14 個拷貝數組的 JS 技巧

來源：twitter

做用：Milos

譯者：前端小智

---

在項目開發過程當中，企業會有不少的任務、需求、缺陷等須要進行管理，CORNERSTONE 提供敏捷、任務、需求、缺陷、測試管理、WIKI、共享文件和日曆等功能模塊，幫助企業完成團隊協做和敏捷開發中的項目管理需求；更有甘特圖、看板、思惟導圖、燃盡圖等多維度視圖，幫助企業全面把控項目狀況。

---

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

數組拷貝常常被誤解，但這並非由於拷貝過程自己，而是由於缺少對 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。

原文：twitter.com/protic_milo…

總結

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

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

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

console.log(copy)
console.log(authors)
複製代碼

輸出

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

交流（歡迎加入羣，羣工做日都會發紅包，互動討論技術）

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

github.com/qq449245884…

由於篇幅的限制，今天的分享只到這裏。若是你們想了解更多的內容的話，能夠去掃一掃每篇文章最下面的二維碼，而後關注我們的微信公衆號，瞭解更多的資訊和有價值的內容。