如何在 JavaScript 中復制數組

由於數組在 JavaScript 中是類似集合的對象，所以不能簡單地使用等號運算符（= ) 複製值。它只會復制對原始對象的引用，而不是數組的元素。

在 vanilla JavaScript 中，有多種方法可以克隆數組的內容。您可以使用 Array.slice() 方法、Array.from() 方法或擴展運算符 (... ) 來複製一個數組。您不需要使用循環來遍歷數組的所有元素並將它們推送到另一個數組中。

Array.slice() 方法

將現有數組的內容複製到新數組中最簡單快捷的方法是使用不帶任何參數的 slice() 方法：

const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];

// clone `fruits` using `slice()`
const moreFruits = fruits.slice();

console.log(moreFruits);

// ['🍑', '🍓', '🍉', '🍇', '🍒']

在上面的代碼中，slice() 方法創建一個淺層 原始數組的副本，而不是深度克隆。原始數組保持不變。如果原始數組包含對象，則只會將它們的引用複製到新數組中。

Array.from() 方法

在 JavaScript 中克隆數組的另一種方法是使用 Array.from() 方法。它創建了一個新的、淺拷貝的 Array 來自類似數組或可迭代對象的對象。

這是一個例子：

const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];

// clone `fruits` using `Array.from()`
const moreFruits = Array.from(fruits);

Array.from() 方法是在 ES6 中引入的，所以它只適用於現代瀏覽器。但是您可以使用 polyfill 將瀏覽器支持方式推回 IE6。

擴展運算符

擴展運算符（... ) 是現代 JavaScript（ES6 及更高版本）中可用的另一個選項，可用於通過“傳播”其元素來克隆數組：

const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];

// clone `fruits` using spread operator
const moreFruits = [...fruits];

就像 Array.slice() ，擴展運算符創建原始數組的淺表副本。克隆陣列時，它只會下降一級。如果要處理多維數組或包含對象的數組，則必須尋找其他替代方案。

Array.concat() 方法

雖然 Array.concat() 方法最初用於將兩個數組合併為一個，您也可以使用它來克隆數組：

const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];

// merge `fruits` with emtpy array to 
// create a new array
const moreFruits = [].concat(fruits);

查看本指南以了解有關 JavaScript 數組以及如何使用它們在單個變量中存儲多個值的更多信息。