ES6 擴充套件運算子的應用
阿新 • • 發佈:2018-11-26
(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]