最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

ES6第十节:ES6为函数做了哪些扩展?

ES6 rockyxia 6276浏览

写在前面

ES6一路扩展,字符串、数组、数值、对象无一“幸免”,ES6说要雨露均沾,函数也不能落下,今天,就来讲解ES6对函数的扩展。

20160620-es6

姿势准备好了吗?前方高能,第10节开讲……

参数的默认值

在开发中,给函数的参数指定默认值,是很普遍很常见的一个需求,我们先来回顾一下传统的实现方式,对比着看更好理解:

function person(n,a){
    var name = n || 'Zhangsan';
    var age  = a ||  25;
}

上面是传统的实现方式,通过或运算实现,原理:如果运算符 || 左侧为true,直接返回左侧的值,否则返回右侧的值; 在person函数内,如果参数n没有传参,那么变量name得到的值就是“Zhangsan”,如果传参了,变量name的值就为参数n的值。

但是,前提是参数对应的布尔值不能false(比如:数字0,空字符串等转换成布尔值就是false),这就使得这种传统的实现方式存在一定的不足和缺陷。

这个时候ES6说:“竟然这种写法有缺陷,咱就不要用这种写法了,我给你们带来一种新的实现方式,比这种写法好用多了,更简捷”。

function person(name = 'Zhangsan',age = 25){
    console.log(name,age);
}
    
person();//结果:Zhangsan  25
person('Lisi',18);//结果:Lisi  18

看,我们把默认值的设定放在了参数上:(name = ‘Zhangsan’,age = 25),这样就实现了参数name的默认值为‘Zhangsan’,age的默认值为25。而不需要在函数体内进行检测,函数体内可以专注对参数的使用或者运算,再也不用担心函数的实际传参情况了。

上面的案例,我们对person( )函数进行两次调用,区别是有传参数没传参数,运行的结果也符合我们的预期:没传参,得到的是默认值Zhangsan 25,传参就会得到传入的参数值:Lisi 18。

但是,多留个心眼,凡事总会有但是,如果函数有多个参数,但只有部分需要指定默认值,另一部分不需要的话,那么,设定默认值的参数一定要放在最后。看案例:

//错误写法
function person(age = 25,name){
    console.log(name,age);
}
    
//正确写法
function person(name,age = 25){
    console.log(name,age);
}

上面的person函数,两个参数name和age,其中只有age需要指定默认值,name不需要,那么,age的排序就必须放在最后,name放在前面。也就是有默认值的参数后面不能再跟不需默认值的参数了

另外,只有当传入的参数为undefined,才会触发默认值赋值。否则,哪怕你传的参数值为0,false,null都不会触发默认值赋值,这就完美的解决了传统实现方式的弊端,试试看:

function person(age = 12){
    console.log(age);
}
    
person();//结果:12
person(undefined);//结果:12

person(0);//结果:0
person(null);//结果:null

看person( )函数的4次调用和结果,只有不传或者传入undefined的时候才会触发默认值赋值,得到12,传入数字0或者null都不会触发默认值赋值。

还有一个要注意的地方,函数的参数是默认声明的,声明过的变量,就不能用let或者const关键字再次声明,否则会报错的,不信给你看一个案例:

function person(age = 12){
    let age = 25;//错误,再次声明age
}

上面这种情况,函数被调用后,就会报错,会提示你age已经被声明过了,你别再声明它了。

rest参数

rest参数,这是一个新的概念,rest的中文意思是:剩下的部分。

如果用在函数上,就代表是获取函数剩下部分的参数。具体是什么意思?我们还是得看案例才好理解,假设现在我们有这样的一个需求:将一组数字进行求和,然后把求和的结果赋值到一个变量去,我们用rest参数实现:

 
//求和函数,得到的结果赋值到result
function sum(result,...values){
    //打印values看看是什么
    console.log(values);
    //结果:[1,2,3,4]

    //进行求和
    values.forEach(function (v,i) {
        //求和得到的结果存到result
        result += v;
    });
    //打印出求和的结果看看
    console.log(result);
    //结果:10
}

//存储求和结果的变量res
var res = 0;
//调用sum函数
sum(res,1,2,3,4);

上面的代码注释把每一步都写得很详细,首先,我们会看到一个陌生的语法:…values;咦?这是什么鬼?这是一种新的写法,也就是我们要介绍的rest参数,它代表的意思是:在实参中,除了第一个参数以外,剩余的参数都会被...values获取到。

在上面的案例中:sum(res,1,2,3,4),也就是除去实参 res 以外的参数,它们是1,2,3,4一共4个参数。它们全被…values收入囊中,接着,我们打印了values,看到的结果是一个数组:[1,2,3,4],也就是这4个参数被装在了一个数组中,我们想要使用这4个参数的话,就可以用数组的方法来对他们进行处理,所以我们用了forEach方法对它们进行了循环,并求和,把求和结果存储到了变量res中,最后我们打印出结果,得到了数字10,也就是数字1,2,3,4的求和结果。

(上面这段有点长,耐心读完了吗?读不懂,可以拉上去再阅读一遍上面的代码案例)

上面的案例主要是介绍了rest参数的用法,首先是表示法:…values(三个点+变量名);其次,values是一个数组;我们要学会这两点即可。

要注意的是,rest参数必须是函数的最后一个参数,后面不能再跟其他参数,什么意思呢?看案例:

//错误写法
function sum(result, ...values, mult){
    //rest参数...values后面还有一个参数mult
}
//正确的写法
function sum(result, mult, ...values){
    //rest参数...values放在最后
}

上面有错误和正确的两种表示,在注释上有说明原因。总之rest参数后面不能再跟有其他参数。

rest参数并不是适合所有的函数使用,只在特定的情境下会比较适用,比方说刚刚案例中的求和函数,就十分适合要rest参数把实际的参数收集起来放在数组中进行求和,在适当的情况下使用它可以事半功倍,减少代码量,提高开发效率。

扩展运算符

上面讲到的rest参数,它的表示法使用…(三个点),它除了用在rest参数中,还有其他用途,我们称这种表示法为扩展运算符,那么,它还有什么作用呢?

它一般结合数组使用,把数组的元素用逗号分隔开来,组成一个序列。我们看一下实际案例:

function sum(a,b) {
   return  a+b ;
}

let arr = [2,3];
//用扩展运算法将数组[2,3]转换成2,3  
sum(...arr);
//结果:5

上面的sum( )函数是简单的将两个数字相加求和,参数是两个普通的参数x,y,并不是什么高逼格的rest参数,所以我们运用了扩展运算符…将数组[ 2,3 ] 转成了 2,3 两个普通的数列,再传进sum( )方法,对应上x,y两个参数。实际上,sum( …arr ) 的效果相当于sum( 2,3 ) 。

从这个案例我们就可以理解扩展运算符…的作用了,它可以将一个数组转成一个对应的参数数列。在实际开发中,你可以根据扩展运算符的作用,可以灵活运用,实现各种效果。

箭头函数

箭头函数,这又是一个新概念,ES6给我们介绍一种全新的定义函数的方式,就是用箭头符号(=>),故得名为箭头函数。具体怎么用,我们来看案例:

//传统写法
var sum = function(a) {
   return  a ;
};
    
//箭头函数写法
var sum = a => a;

什么?第二种写法这么简短…..不敢信!!

上面演示了两种写法,函数的作用都是一样的,传入参数a,直接返回a;第一种传统的写法大家都熟悉,我们看看第二种写法:a=>a; 这里的第一个a代表是传进去的参数,箭头=>后面的a表示函数体;也许大家跟我一样,很不习惯,但这种写法确实简洁了很多。

看到这里,有开发经验的“老司机”可能会问:如果传入的参数不止一个,或者函数体不是简单的返回a,需要做一些其他的运算,含有多条语句的话,怎么办?

问得好,对于这种情况,我们又有另一种处理办法。举个例子,假如我们给函数传入2个参数,然后进行相加运算,我们用箭头函数来实现:

//箭头函数写法
var sum = (a,b) => {return a+b}
sum(1,2);//结果:3

注意上面的参数和函数体部分,如果参数超过1个的话,需要用小括号()括起来,函数体语句超过1条的时候,需要用大括号{ }括起来。

箭头函数的最大作用就是简化函数的实现,大大地减少代码量。来举个例子对比一下,假设我们现在要对一个数组 [ 1,2,3,4 ] 里面的数求和,我们分别用传统的方式和箭头函数都实现一次,大家看看差别:

//传统的写法
var sum = 0;
[1,2,3,4].forEach(function(v){
    sum += v;
});
    
//箭头函数的写法
var sum = 0;
[1,2,3,4].forEach(v => sum+=v);

大家对比一下,用箭头函数代替了传统的匿名函数,确实减少了代码量。

今天讲解的函数扩展都是一些新概念,新语法。也许你看懂了,但是过段时间会忘记,不用慌,这很正常,只有通过多练习、多使用才会记住。如果你现在的项目还未使用到这些知识的话,不妨先收藏起来,有空的时候翻看一下,也是很有帮助的,因为ES6是趋势,总有一天会进入你的代码中。

本节小结

总结:ES6为函数的扩展包括:参数的默认值、rest参数、扩展运算符(…)以及箭头函数。它们有一个共同的有点就是:使得代码更加简洁,结合需求灵活使用,可以大大地提高开发效率。

关于箭头函数的this使用的补充

那么,接下来我们就学习一下,究竟这个箭头函数的this有什么不一样的地方,让大家这么重视?

用一句话概括:箭头函数中的this指向的是定义时的this,而不是执行时的this。

如果上面这句话听的是懂非懂或者完全不懂的,没关系,下面会有案例讲解。

举个栗子

来看看this的一个使用案例:

//定义一个对象
var obj = {
    x:100, //属性x
    show(){
    //延迟500毫秒,输出x的值
        setTimeout(
           //匿名函数
           function(){console.log(this.x);},
           500
       );
    }
};
obj.show();//打印结果:undefined

案例中,我们的obj对象中有一个属性x和一个属性show( )方法(用的是对象的简洁表示法),show( )通过this打印出x的值。可最后一句代码执行后,我们打印出的结果是undefined。这是为什么呢?难道x的值不是100吗?

没错,x的值确实是100,但问题出在了this上,当代码执行到了setTimeout( )的时候,此时的this已经变成了window对象(setTimeout( )是window对象的方法),已经不再是obj对象了,所以我们用this.x获取的时候,获取的不是obj.x的值,而是window.x的值,再加上window上没有定义属性x,所以得到的结果就是:undefined。

我们可以用一些ES5中的知识来巧妙地避过这个坑,但是,我们今天主要介绍的是ES6的箭头函数。

箭头函数闪亮登场

如果使用箭头函数来编写同样的一段代码,得到的this.x又是另一番景象。我们来试试看:

//定义一个对象
var obj = {
    x:100,//属性x
    show(){
        //延迟500毫秒,输出x的值
        setTimeout(
           //不同处:箭头函数
           () => { console.log(this.x)},
           500
        );
    }
};
obj.show();//打印结果:100

同样的一段代码,唯一的不用就是setTimeout中,原本的匿名函数用箭头函数代替了,你可以往上翻,对比着看两段代码的不同之处。此外,最大的不同的是打印结果,用箭头函数编写的这段代码,成功地打印出了我们想要的结果:100。

为什么是这样?正如文章第三段所概括:

箭头函数中的this指向的是定义时的this,而不是执行时的this

当定义obj的show( )方法的时候,我们在箭头函数编写this.x,此时的this是指的obj,所以this.x指的是obj.x。而在show()被调用的时候,this依然指向的是被定义时候所指向的对象,也就是obj对象,故打印出:100。

以上就是箭头函数中this的指向问题讲解!如果看完有点绕的话,可以重看一遍,看慢一点,学得更快!

补课小结

总结 :箭头函数的this指向的是定义时的this对象,而不是执行时的this对象。

转载请注明:Rockyxia Web技术博客 » ES6第十节:ES6为函数做了哪些扩展?
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)