ES6在函数扩展方面,新增了很多特性。
- 箭头函数
- 参数默认值
- 参数结构赋值
- 扩展运算符
- rest参数
- this绑定
- 尾调用
箭头函数中的this指向
ES5 中,this指向的是函数被调用的对象;而 ES6 的箭头函数中,this指向的是函数被定义时。简单来说,箭头函数中的this,是不会变的,是永远绑定在当前的环境下。
拓展运算符
- 扩展运算符的格式为…
- rest运算符的格式为…变量名
有了ES6,当我们在定义一个方法,但是不确定其参数的个数时,我们就可以用扩展运算符作为参数。
以前,我们在定义方法时,参数要确定个数,如下:
function fn(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
console.log(d);
}
fn(1, 2, 3);
上方代码中,因为方法的参数是三个,但使用时是用到了四个参数,所以会报错:
现在,我们有了扩展运算符,就不用担心报错的问题了。代码可以这样写:
function fn(...arg) { //当不确定方法的参数时,可以使用扩展运算符
console.log(arg[0]);
console.log(arg[1]);
console.log(arg[2]);
console.log(arg[3]);
}
fn(1, 2, 3); //方法中定义了四个参数,但只引用了三个参数,ES6 中并不会报错。
上方代码中注意,arg参数之后,不能再加别的参数,否则编译报错。
举例:数组赋值的问题
我们来分析一段代码:(将数组 arr1 赋值给 arr2)
let arr1 = ['www', 'smyhvae', 'com'];
let arr2 = arr1; // 将 arr1 赋值给 arr2,其实是让 arr2 指向 arr1 的内存地址
console.log('arr1:' + arr1);
console.log('arr2:' + arr2);
console.log('---------------------');
arr2.push('你懂得'); //往arr2 里添加一部分内容
console.log('arr1:' + arr1);
console.log('arr2:' + arr2);
上方代码中,我们往往 arr2 里添加了你懂的,却发现,arr1 里也有这个内容。原因是:let arr2 = arr1;其实是让 arr2 指向 arr1 的地址。也就是说,二者指向的是同一个内存地址。
如果不想让 arr1 和 arr2 指向同一个内存地址,我们可以借助扩展运算符来做:
let arr1 = ['www', 'smyhvae', 'com'];
let arr2 = [...arr1]; //arr2 会重新开辟内存地址
console.log('arr1:' + arr1);
console.log('arr2:' + arr2);
console.log('---------------------');
arr2.push('你懂得'); //往arr2 里添加一部分内容
console.log('arr1:' + arr1);
console.log('arr2:' + arr2);
rest 运算符
rest 在英文中指的是剩余部分(不是指休息)。我们来举个例子,理解剩余部分的含义:
function fn(first, second, ...arg) {
console.log(arg.length);
}
fn(0, 1, 2, 3, 4, 5, 6); //调用函数后,输出结果为 5
上方代码的输出结果为 5。 调用fn()时,里面有七个参数,而arg指的是剩下的部分(因为除去了first和second)。
从上方例子中可以看出,rest运算符适用于:知道前面的一部分参数的数量,但对于后面剩余的参数数量未知的情况。