es6中的扩展运算符

对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

1.在函数的传参数过程,将剩余的参数放入一个数组中。
rest参数形式为（…变量名），值为一个数组，用于获取函数多余参数。

    function f(a,...arr){
        console.log(arr);
    }
    f(1,2,3,4,4); //[2,3,4,5]复制代码
    rest参数只能放在最后一个，否则报错：
    function f(a, ...b, c){...}; // 报错 

2.数组中的拓展运算
拓展运算符使用(…)，类似rest参数的逆运算，将数组转为用(,)分隔的参数序列。

	console.log(...[1, 2, 3]);   // 1 2 3 
    console.log(1, ...[2,3], 4); // 1 2 3 4

拓展运算符主要使用在函数调用。

    function f (a, b){
           console.log(a, b);
       }
       f(...[1, 2]); // 1 2
        
       function g (a, b, c, d, e){
           console.log(a, b, c, d, e);
       }
       g(0, ...[1, 2], 3, ...[4]); // 0 1 2 3 4复制代码

若拓展运算符后面是个空数组，则不产生效果。

    [...[], 1]; // [1]

替代apply方法

    // ES6之前
    function f(a, b, c){...};
    var a = [1, 2, 3];
    f.apply(null, a);
     
    // ES6之后
    function f(a, b, c){...};
    let a = [1, 2, 3];
    f(...a);
     
    // ES6之前
    Math.max.apply(null, [3,2,6]);
     
    // ES6之后
    Math.max(...[3,2,6]);

拓展运算符的运用
(1)复制数组：
直接复制数组时，只是浅拷贝，如果要实现深拷贝，可以使用拓展运算符。

    // 通常情况 浅拷贝
    let a1 = [1, 2];
    let a2 = a1; 
    a2[0] = 3;
    console.log(a1,a2); // [3,2] [3,2]
     
    // 拓展运算符 深拷贝
    let a1 = [1, 2];
    let a2 = [...a1];
    // let [...a2] = a1; // 作用相同
    a2[0] = 3;
    console.log(a1,a2); // [1,2] [3,2]

(2)合并数组： 这里合并数组，是浅拷贝。

    let a1 = [1,2];
    let a2 = [3];
    let a3 = [4,5];
     
    // ES5 
    let a4 = a1.concat(a2, a3);
     
    // ES6
    let a5 = [...a1, ...a2, ...a3];
     
    a4[0] === a1[0]; // true
    a5[0] === a1[0]; // true

(3)与解构赋值结合：
与解构赋值结合生成数组，但是使用拓展运算符需要放到参数最后一个，否则报错。

    let [a, ...b] = [1, 2, 3, 4]; 
    // a => 1  b => [2,3,4]
     
    let [a, ...b] = [];
    // a => undefined b => []
     
    let [a, ...b] = ["abc"];
    // a => "abc"  b => []

扩展运算符可以将字符串转为真正的数组

[...'hello']   // [ "h", "e", "l", "l", "o" ]

将数据结构转为数组

// arguments对象
function foo() {
  const args = [...arguments];
}

用于替换es5中的Array.prototype.slice.call(arguments)写法