在JavaScript 中 14 個拷貝數組的技巧

來源：twitter
做用：Milos
譯者：前端小智

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

爲了保證的可讀性，本文采用意譯而非直譯。

數組拷貝常常被誤解，但這並非由於拷貝過程自己，而是由於缺少對 JS 如何處理數組及其元素的理解。JS 中的數組是可變的，這說明在建立數組以後還能夠修改數組的內容。

這意味着要拷貝一個數組，我們不能簡單地將舊數組分配給一個新變量，它也是一個數組。若是這樣作，它們將共享相同的引用，而且在更改一個變量以後，另外一個變量也將受到更改的影響。這就是咱們須要克隆這個數組的緣由。

接着來看看一些關於拷貝何克隆數組的有趣方法和技巧。

技巧 1 - 使用Array.slice方法

const numbers = [1, 2, 3, 4, 5]

const copy = numbers.slice()
copy.push(6) // 添加新項以證實不會修改原始數組

console.log(copy)
console.log(numbers)

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 2 - 使用Array.map方法

const numbers = [1, 2, 3, 4, 5]

const copy = numbers.map( num => num )
copy.push(6) // 添加新項以證實不會修改原始數組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 3 - 使用Array.from 方法

const numbers = [1, 2, 3, 4, 5];

const copy = Array.from(new Set(numbers));
copy.push(6); // 添加新項以證實不會修改原始數組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 4 - 使用展開操做符

const numbers = [1, 2, 3, 4, 5];

const copy = [...numbers];
copy.push(6); // 添加新項以證實不會修改原始數組

console.log(copy);
console.log(numbers);

// 輸出 
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 5 - 使用 Array.of 方法和展開操做符

const numbers = [1, 2, 3, 4, 5];

const copy = Array.of(...numbers);
copy.push(6); // 添加新項以證實不會修改原始數組

console.log(copy);
console.log(numbers);

// 輸出 
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Array.of() 方法建立一個具備可變數量參數的新數組實例，而不考慮參數的數量或類型。Array.of() 和 Array 構造函數之間的區別在於處理整數參數：Array.of(7) 建立一個具備單個元素 7 的數組，而 Array(7) 建立一個長度爲7的空數組（注意：這是指一個有7個空位(empty)的數組，而不是由7個undefined組成的數組）。

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

技巧 6 - 使用 Array 構造函數和展開操做符

const numbers = [1, 2, 3, 4, 5];

const copy = new Array(...numbers);
copy.push(6); // 添加新項以證實不會修改原始數組

console.log(copy);
console.log(numbers);

// 輸出 
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 7 - 使用解構

const numbers = [1, 2, 3, 4, 5];

const [...copy] = numbers;
copy.push(6); // 添加新項以證實不會修改原始數組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 8 - 使用 Array.concat 方法

const numbers = [1, 2, 3, 4, 5];

const copy = numbers.concat();
copy.push(6); // 添加新項以證實不會修改原始數組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 9 - 使用 Array.push 方法和展開操做符

const numbers = [1, 2, 3, 4, 5];

let copy = [];
copy.push(...numbers);
copy.push(6); // 添加新項以證實不會修改原始數組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 10 - 使用 Array.unshift 方法和展開操做符

const numbers = [1, 2, 3, 4, 5];

let copy = [];
copy.unshift(...numbers);
copy.push(6); // 添加新項以證實不會修改原始數組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 11 - 使用 Array.forEach 方法和展開操做符

const numbers = [1, 2, 3, 4, 5];

let copy = [];
numbers.forEach((value) => copy.push(value));
copy.push(6); // 添加新項以證實不會修改原始數組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 12 - 使用 for 循環

const numbers = [1, 2, 3, 4, 5];

let copy = [];
for (let i = 0; i < numbers.length; i++) {
    copy.push(numbers[i]);
}
copy.push(6); // 添加新項以證實不會修改原始數組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 13 - 使用 Array.reduce 方法

這個作法是可行，但比較多餘，少用

const numbers = [1, 2, 3, 4, 5];

const copy = numbers.reduce((acc, x) => { acc.push(x); return acc; }, []);
copy.push(6); // 添加新項以證實不會修改原始數組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 14 - 使用古老的 apply 方法

const numbers = [1, 2, 3, 4, 5];

let copy = [];
Array.prototype.push.apply(copy, numbers);
copy.push(6); // 添加新項以證實不會修改原始數組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://twitter.com/protic_milos

總結

請注意，上面這些方法執行的是淺拷貝，就是數組是元素是對象的時候，我們更改對象的值，另外一個也會跟着變，就能技巧4來講，若是我們的數組元素是對象，以下所示：

const authors = [
  { name: '前端小智', age: 25 }, 
  { name: '王大冶', age: 30 }, 
]

const copy = [...authors ]
copy[0].name = '被更改過的前端小智'

console.log(copy)
console.log(authors)

輸出

因此上面的技巧適合簡單的數據結構，複雜的結構要使用深拷貝。數組拷貝常常被誤解，但這並非由於拷貝過程自己，而是由於缺少對 JS 如何處理數組及其元素的理解。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://medium.com/better-pro...

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。