核心提示:es6的函数es6函数的几个新特性:可以设置参数默认值 可以结合解构赋值默认值使用 利用rest(变量名)传入任意参数 rest和扩展运算符rest参数(变量名),用于获取函数的多余参数,rest参数...
es6的函数
es6函数的几个新特性:
可以设置参数默认值 可以结合解构赋值默认值使用 利用rest(…变量名)传入任意参数… rest和扩展运算符
rest参数(…变量名),用于获取函数的多余参数,rest参数搭配的变量是一个数组,该变量将多余的参数放入其中。
1. 利用rest(…变量名)传入任意参数
var x = 1; function foo(...y) { console.log(y) //[1,2,3,4] console.log(arguments) //{ '0': 1, '1': 2, '2': 3, '3': 4 } var x = 2; setTimeout(function() { console.log(x) }, 1000) } foo(1, 2, 3, 4)
rest和arguments有点相似,区别在于:
1、箭头函数不能使用arguments
2、rest返回的数组,arguments是类数组
3、rest参数后不能有其他的参数
2. 利用扩展运算符(…数组)替代数组的apply方法
在es5中,需要用apply将数组转化为函数参数,如下
function f(x, y, z) { console.log(x + ' ' + y + ' ' + z); } var args = [1, 2, 3]; f.apply(null, args)
在es6中就不需要这种方式了,可以使用…来代替
function f(x, y, z) { console.log(x + ' ' + y + ' ' + z); } var args = [1, 2, 3]; // f.apply(null, args) f(...args)
另一个例子
var arr1 = [0, 1, 2] var arr2 = [3, 4, 5] var arr3 = arr1.concat(arr2) console.log(arr3) //[ 0, 1, 2, 3, 4, 5 ] var arr4 = arr1.push(arr2) console.log(arr1) //[ 0, 1, 2, [ 3, 4, 5 ] ]
这里我们想通过arr1.push(arr2),发现失败了,最后仅仅是最后一个元素变成了数组。
如果想使用arr1.push方法的话,就需要用apply传arr2了
var arr4 = Array.prototype.push.apply(arr1, arr2) //[ 0, 1, 2, 3, 4, 5 ]
但是如果使用扩展运算符的话,就简单一些了
var arr4 = arr1.push(...arr2)
原理很简单,因为扩展运算符可以把数组转化为逗号分割的参数。
扩展运算的用法:
合并数组 与解构赋值结合 分割字符串… name属性
函数的name属性可以返回函数名
箭头函数
特性1:this总是指向函数所在的对象
function foo() { setTimeout(() => { console.log("id", this.id) //id 42 }, 100) } function foo2() { setTimeout(function() { console.log("id:", this.id) //id: undefined }, 100) }
foo2是普通函数,setTimeout里面的普通函数this指向全局对象;
foo1是箭头函数,setTimeout里的箭头函数的this指向当前对象;
说明:箭头函数this的固定化并不是因为剪头函数内部有this指针,而正是因为它没有this指针,所以,内部的this就指向外层代码块的this。
所以,箭头函数不能用作构造函数
除了this,arguments、super和new.target也是不存在的,它们都指向外层函数的这些属性