扩展运算符的应用——拷贝与合并

复制数组

数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。 如：

    const a1 = [1, 2];
    const a2 = a1;
    a2[0] = 2;
    a1 // [2, 2]

上面代码中，a2并不是a1的克隆，而是指向同一份数据的另一个指针。修改a2，会直接导致a1的变化。

方法一：ES5的concat() ``

    var arr = [1,2,3,4,5];
    var arr1 = arr.concat()
    arr1.push(100)  
    console.log(arr1)   //  [1, 2, 3, 4, 5, 100]
    console.log(arr)   //  [1, 2, 3, 4, 5]
    
    所以 上面代码中，arr会返回原数组的克隆，再修改arr1就不会对arr产生影响(浅拷贝)。
    arr == arr1   // false

方法二：ES6的 ... 扩展运算符

    let arr1 = [1,2]	
    let arr2 = [...arr1]
    arr1.push(99)
    console.log(arr1)   // [1,2,99]
    console.log(arr2)   // [1,2]
    
    所以，上面代码中，arr会返回原数组的克隆，再修改arr1就不会对arr产生影响(浅拷贝)。
    arr == arr1   // false
    

数组合并

    const arr1 = ['a', 'b'];
    const arr2 = ['d', 'e'];

    // ES5 的合并数组
    arr1.concat(arr2);  // [ 'a', 'b' , 'd', 'e' ]

    // ES6 的合并数组
    let newarr = [...arr1, ...arr2]  // [ 'a', 'b', 'c', 'd', 'e' ]

不过，这两种方法都是浅拷贝，使用的时候需要注意。

    const a1 = [{ foo: 1 }];
    const a2 = [{ bar: 2 }];

    const a3 = a1.concat(a2);
    const a4 = [...a1, ...a2];

    a3[0] === a1[0] // true
    a4[0] === a1[0] // true

上面代码中，a3和a4是用两种不同方法合并而成的新数组，但是它们的成员都是对原数组成员的引用，这就是浅拷贝。如果修改了引用指向的值，会同步反映到新数组。