1. 程式人生 > >ES6 擴充套件運算子的應用

ES6 擴充套件運算子的應用

(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]