ES6 扩展运算符的应用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010881899/article/details/79912990

（1）复制数组

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

    //复制数组
    const a1 = [1,2];
    const a2 = a1;

    a2[0] = 3;
    console.log(a1); //[3,2]

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

ES5 只能用变通方法来复制数组

    //ES5 只能用变通方法来复制数组
    const a3 = [1,2];
    const a4 = a3.concat(); //concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

    a4[0] = 4;
    console.log(a3);  //[1,2]
    console.log(a4);  //[4,2]

上面代码中，a1会返回原数组的克隆，再修改a2就不会对a1产生影响。

ES6扩展运算符提供了复制数组的简写方法

    const a5 = [1,2];
    //写法1
    const a6 = [...a5];
    console.log(a6); //[1,2]
    a6[0] = 3;
    console.log(a6); //[3,2];
    console.log(a5); //[1,2]

    //写法2
    const [...a6] = a5;
    console.log(a6); //[1,2];
    a6[0] = 4;
    console.log(a6);  //[4,2]
    console.log(a5); //[1,2]

（2）合并数组

扩展运算符提供了数组合并的新写法。

    //ES5方式
    var arr1 = [1,2];
    var arr2 = [3,4];
    console.log(arr1.concat(arr2)); //[1,2,3,4]

    //ES6方式
    let arr3 = [1,2];
    let arr4 = [3,4];
    console.log([...arr3,...arr4]); //[1,2,3,4]