ES6学习(函数扩展)_qq_34231078的博客-程序员宅基地

技术标签: js  javascript  

今天主要是学习ES6中函数的扩展。例如常用的箭头函数、函数参数默认值等。

一、箭头函数

ES6可以使用“=>”箭头来定义函数。
我们为什么喜欢使用箭头函数呢,因为它可以简化我们的代码,使之看起来更美观。
如果定义的函数不需要传参则使用空括号来;传一个参数时,可以直接使用这个参数;传参大于一个时,则需要使用括号把参数括起来。

//不传参数
var func = () => 1;
// 等同于
var func= function () {
    
  return 1;
};

//一个参数
var func = data => data;
// 等同于
var func= function (data) {
    
  return data;
};

//两个参数
var func = (data,index) => data[index];
// 等同于
var func= function (data,index) {
    
  return data[index];
};

如果箭头函数的代码块中的语句大于一条的话,需要用大括号括起来,还要使用return把结果返回。
如果没有用return返回的话,则调用函数结果是undefined

var func = data => {
    
	let tempIndex = 2;
	return data[tempIndex]
};

那使用箭头函数需要注意哪些呢?

(1)this指向问题,在箭头函数中this的指向是不变的,就是定义时所在的对象。
(2)不能使用new命令来创建对象。
(3)在函数体内不存在arguments对象,不能使用。可以用 rest 参数代替。
(4)箭头函数不能用作 Generator 函数。

什么时候不能使用箭头函数呢?

(1)定义对象方法

const calculator = {
    
    array: [1, 2, 3],
    sum: () => {
       //修改  sum(){
    
        console.log(this === window); // => true
        return this.array.reduce((result, item) => result + item);
    }
};

console.log(this === window); // => true

// Throws "TypeError: Cannot read property 'reduce' of undefined"
//原因是箭头函数把函数上下文绑定到了 window 上
calculator.sum();

//相同的问题,在定义原型方法也会有
function Cat(name) {
    
    this.name = name;
}

Cat.prototype.sayCatName = () => {
      //修改 function(){  
    console.log(this === window); // => true
    return this.name;
};

const cat = new Cat('Mew');
cat.sayCatName(); // => undefined

(2)定义事件回调

//给一个按钮添加点击事件
const btn= document.getElementById('Btn');
btn.addEventListener('click', () => {
      //修改 function(){
    
    console.log(this === window); // => true
    this.innerHTML = '搜索';
});
//this的指向为window

二、参数默认值

可以给参数默认值,也可结合我们两章学习的解构赋值。
如果函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。

function log(x, y = 5) {
    
  console.log(x, y);
}

log(1) // 1 5
log(1, 2) // 1 2


function foo({
    x, y = 5}) {
    
  console.log(x, y);
}
foo({
    }) // undefined 5
foo({
    x: 1}) // 1 5
foo({
    x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

三、reset参数

用于获取函数的多余参数。是一个数组,该变量将多余的参数放入数组中。

function add(...values) {
    
  let sum = 0;
  for (var val of values) {
    
    sum += val;
  }
  return sum;
}
add(2, 5, 3) // 10

欢迎关注公众号(web学习吧),一起学习进步:
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34231078/article/details/106573992

智能推荐

中年危机,职场危机;未雨绸缪_Garth.的博客-程序员宅基地

“内卷”这个词已经流行了一段时间,内卷是实实在在的存在的,在各种各样的媒体,app中都可以看到内卷的存在,各种各样的极端的案例给我们呈现社会的内卷。今天看到了两个案例深有感触:中年危机35+的年龄原本是上有老,下有小正好需要工作养活一家老小的时候,但是在资本家的眼里,就是性价比不高的一个群体,是考虑优化的群体,想想我们以后都要经历中年,不禁焦虑,你以为焦虑就可以了么,那么还是太年轻,还是缺少社会的毒打充满挑战的职场[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z

PHP ini_set()无效的原因_stone256的博客-程序员宅基地

版权声明:本文为博主原创文章,未经博主允许不得转载。PHP配置中,post_max_size,upload_max_filesize用 ini_set() 方法是修改不了的.正确的做法是用.htaccess文件:[plain] view plain copy php_value upload_max_filesize 1024

快速了解删除数据的思路以及防止误删数据_萨[email protected]本儿的博客-程序员宅基地

快速了解删除数据的思路以及防止误删数据我们编程这条路都是由查询,新增,修改(更新),删除,这基本的四个操作来演绎出来的。那么现在,我就来为大家分享一下,我的个人理解删除数据的方法,以及思路。删除是增,改,删,查中最简单的,只要指明删除的数据就可以直接删除。当然,数据是非常重要的,我们想删除这条数据之前,要知道它的地位是多高,意思就是,其他的数据是否对我们要删除的数据是否有依赖性,也就...

Cordova+Vue 混合开发实现下载并预览_weixin_34308389的博客-程序员宅基地

1.前言近期混合应用开发需要下载和预览的功能,选择方案为先下载到本地,再使用cordova-plugin-file-opener2插件进行预览。采用此预览方案文件会被先下载到本地,cordova-plugin-file-opener2插件其实可以直接打开网络地址来实现预览,采用此方式是基于以下考虑:避免重复下载避免有文件格式解析错误的情况,用户可以到本地再次进行查看下载目录可...

软件测试学习中的一些有用网站_DoctorAbe的博客-程序员宅基地

作为小白,在学习软件测试过程中遇到的一些比较有用的公众号、网站,做一总结分享出来,后面也会及时更新里面的内容。1.公众号:搜狗测试、软件测试资源分享2.博客/论坛:51testing论坛,CSDN一些博客3.小白学习可以参考此博主此篇文章:软件测试自学指南---从入门到精通_零基础学软件测试-程序员宅基地_软件测试4.360doc网站:软件测试领域架构:软件测试领域架构软件测试面试题:一套比较完整的软件测试人员面试题(包括技术和人力资源方面)常见软件测试面试题:常见软件测试面试题.

eclipse运行没反应,运行框跳不出来(show view)_肆呀的博客-程序员宅基地_eclipse运行什么也不显示

一开始以为是因为像C语言那样出现多个main运行错误,可是检查过后发现其他的main已经用/* */处理完毕,而且并没有提示运行出错。接着又以为是因为test1包下有两个类,便把其中一个删除,但还是不行。果然,,还是得百度一下你就知道,其实是因为运行窗口被关闭了。解决方法:Windows → Show view → Console便可以打开运行窗口。或者快捷键 Alt+Shift+Q...

随便推点

Java 常用集合框架List、Set、Map和Queue等体系汇总_程序员史迪仔的博客-程序员宅基地

一、集合框架二、Collection接口1、List接口(1)ArrayList(2)LinkedList(3)Vector(4)Stack2、Set接口(1)HashSet(2)LinkedHashSet(3)TreeSet(4)List 和 Set 适用场景(5)使用示例3、Queue三、Map接口(1)HashMap 和 Hashtable(2)LinkedHashMap(3)TreeMa...

eplan可运行于linux系统吗,Eplan安装对电脑操作系统的要求_weixin_39897127的博客-程序员宅基地

安装前提条件对于EPLAN 平台的操作需要Microsoft 的.NET Framework 4.0。其它信息以及这些Microsoft 组件的最新版本可在Microsoft 的网页上下载。您的EPLAN 存储介质上也具备.NET Framework 4.0。在此切换至以下目录:cd-romServicesNet Framework 4.0zh_CN为了安装.NET Framework,请双击Do...

GB28181 ps流解析出h264_Jons伯恩特的博客-程序员宅基地

PS流格式可以自行网上搜索很多资料,参考网址:https://blog.csdn.net/u012519333/article/details/53208767#ifndef __ACTIVE_PS_PARSER_H_ #define __ACTIVE_PS_PARSER_H_ typedef void APSPARSER_H; //ACTIVE_PS_PARSER_HANDLE ...

分享 C语言--四则混合运算(栈应用)(正负数,小数,括号和+-*/的优先级) 请在VS2019运行_岭南红的博客-程序员宅基地_c语言混合四则运算编程

在这里插入代码片```#define _CRT_SECURE_NO_WARNINGS#include<stdio.h>#include<stdlib.h>#include<string.h>#define Elemtype char#define Elemtype1 doubletypedef struct Node { Elemtype data; struct Node* pNext;}Node,*pNode;typedef struct S

node express koa 学习笔记_嘤嘤怪呆呆狗的博客-程序员宅基地

node express koa 学习笔记,源代码可以私聊

Oracle根据中文首字母排序_「已注销」的博客-程序员宅基地_oracle中文首字母排序

 很明显,上图中的姓名显示杂乱无章,今天的任务就是让上图中的 姓名按照顺序排列 1、按照拼音排序--按照拼音排序select * from stuinfoORDER BY NLSSORT(stuname,'NLS_SORT = SCHINESE_PINYIN_M')2、按照笔画排序--按照笔画排序select * from stuinfoORDER BY ...