ES6函数学习记录

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运算符适用于：知道前面的一部分参数的数量，但对于后面剩余的参数数量未知的情况。