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也是不存在的,它们都指向外层函数的这些属性