es6陣列的複製
阿新 • • 發佈:2018-12-27
陣列是複合的資料型別,直接複製的話,只是複製了指向底層資料結構的指標,而不是克隆一個全新的陣列。
const a1 = [1, 2];
const a2 = a1;
a2[0] = 2;
a1 // [2, 2]
上面程式碼中,修改a2,會直接導致a1的變化。
這是淺克隆
es5中通過變通的方式來實現深克隆
const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]
上面程式碼a1會返回原陣列的克隆,再修改a2就不會對a1產生影響這個就是深克隆
es6中擴充套件運算子提供了複製陣列的簡便寫法。
const a1 = [1, 2]; // 寫法一 const a2 = [...a1]; // 寫法二 const [...a2] = a1;
上面的兩種寫法,a2都是a1的克隆。
擴充套件運算子提供了數組合並的新寫法,不過他們也是淺拷貝。
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合併陣列
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合併陣列
[...arr1, ...arr2, ...arr3]
// [ '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
本文借鑑自http://es6.ruanyifeng.com/#docs/array
by還差的太遠了