在 JavaScript 中复制一个数组

Question

有几种简单的方法可以在 JavaScript 中克隆数组。 您可以使用 Array#slice() 方法 或 扩展运算符 。

const arr = ['hello', 'world'];

// Clone using `slice()`
const arr2 = arr.slice();
arr2; // ['hello', 'world']
arr2 === arr; // false

// Clone using spread operator `...`
const arr3 = [...arr];
arr2; // ['hello', 'world']
arr2 === arr; // false

另外两种常见的方法是 concat()- 将数组转换为空数组 并使用 map() 方法：

// Clone using `concat()`
const arr4 = [].concat(arr);
arr4; // ['hello', 'world']
arr4 === arr; // false

// Clone using `map()`
const arr5 = arr.map(v => v);
arr5; // ['hello', 'world']
arr5 === arr; // false

这 4 种复制数组的方法实际上是相同的，没有太多理由偏爱其中一种。 最显着的区别在于 slice() 享受稍微更好的浏览器支持 - 一直到 Internet Explorer 4。

深拷贝与浅拷贝

请记住，上述所有 4 种方法都会创建数组的 浅层克隆 。 换句话说，它们克隆了数组本身，而 不是 数组元素。当你有一个基元数组（数字、字符串、 null, undefined)，但是当你有一个对象数组时它会这样做。

const arr = [{ answer: 42 }];

const arr2 = arr.slice();
arr2[0].answer = 0;

// `0`, because `arr[0]` is a reference to the same object as `arr2[0]`
arr[0].answer;

JavaScript 没有用于深度克隆数组的内置方法。 您需要使用具有 cloneDeep() 函数，如 lodash 。

const arr = [{ answer: 42 }];

const arr2 = require('lodash').cloneDeep(arr);
arr2[0].answer = 0;

// `42`, because Lodash did a deep clone.
arr[0].answer;