...扩展运算符

使用场景和作用

1 可以替代apply方法
当参数为一个数组，我们需要返回这个参数数组中所有元素之和，普通做法：

function f1(x, y, z) {
    return x + y + z;
}
var args = [1, 2, 3];
// 两种调用方式
// 1，这种方式在参数较少的情况下还能应付，但是参数一旦过多就不靠谱了，
addFun(args[0], args[1], args[2]) // 6
// 2，用apply方法直接传递数组
f1.apply(null, args); // 6

apply方法能很好的解决参数过多的问题，但是使用扩展运算符就更简洁了：

f1(...args) // 6

2 剩余参数(rest运算符)，主要针对函数形参
剩余参数运算符与扩展运算符都是…，但是使用起来却不一样，可以简单的理解为剩余运算符和扩展运算符是相反的，扩展运算符是把数组或对象进行展开，而剩余运算符是把多个元素合并起来。
主要用于不定参数，可以理解为arguments的替代品，因此ES6开始不再使用arguments对象。

let demoFun = function (...args) {
    for (let item of args) {
        console.log(item);
    }
}
demoFun(1, 2, 3) // 1, 2, 3

let demoFun = function (argA, ...args) {
    console.log(argA);
    console.log(args)
}
demoFun(1, 2, 3);
// 1
// [2, 3]

配合解构赋值使用时，把他理解为整体为一个元素就行了

var [a, ...rest] = [1, 2, 3, 4];
// 这里把...rest整体看成一个元素
console.log(a) // 1
console.log(rest) // [2, 3, 4]

3 数据连接、合并

连接数组，使用push将数组添加到另一个数组的尾部：

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
arr1.push(...arr2);
console.log(arr1) // [1, 2, 3, 4, 5, 6]

合并数组（代替concat方法）：

var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
var es6Arr = [...arr1, ...arr2];
console.log(es6Arr) // ['a', 'b', 'c', 'd', 'e', 'f']

4 数组和对象的拷贝

var arr1 = [1, 2, 3];
var arr2 = [...arr1];
console.log(arr1 === arr2) // false
arr2.push(4); // 修改arr2，不会影响arr1的值
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]

5 字符串转数组

var str = 'hello';
// ES5 处理方式
var es5Arr = str.split('');
console.log(es5Arr) // ["h", "e", "l", "l", "o"]
// ES6 处理方式
var es6Arr = [...str];
console.log(es6Arr) // ["h", "e", "l", "l", "o"]