在javascript中将对象数组复制到另一个数组中

Question

如何将数组的每个元素(元素都是对象)复制到另一个数组中,以便它们完全独立？我不想更改一个数组中的元素来影响另一个元素.

Answer 1

如果目标数组尚不存在......

...你可以使用slice()或concat().slice()可能更惯用(你也会看到slice(0),但默认值是0,所以...):

var destinationArray = sourceArray.slice(); // Probably more idiomatic
// or
var destinationArray = sourceArray.concat();

从ES2015(又名ES6)开始,还可以Array.from从任何类似数组的东西(包括实际数组)创建一个新数组:

var destinationArray = Array.from(sourceArray);

(Array.from可以为较旧的JavaScript引擎进行填充/填充.)

从ES2015开始,您可以使用可迭代的扩展表示法和任何可迭代的数组文字(包括数组):

var destinationArray = [...sourceArray];

之后,两个阵列将具有相同的内容.更改一个阵列不会改变另一个阵列.当然,如果数组条目是一个对象,则两个数组中该对象的条目将指向同一个对象; 这不是一个"深层"的副本.

如果目标数组存在...

...并且您想要将源数组的内容附加到它,您可以使用push:

destinationArray.push.apply(destinationArray, sourceArray);

这可以通过push使用applyJavaScript函数的功能调用目标数组来实现,它允许您将函数调用的参数指定为数组.push将推送尽可能多的元素,因为它最终将元素从源数组复制到目标数组.

在ES2015及更高版本中,您可以使用可迭代的扩展符号(...)来使其更清晰:

destinationArray.push(...sourceArray);

请注意,在这两种情况下,调用受限于JavaScript引擎的最大函数参数数量(截至本文撰写时,对于所有主要引擎至少为数千[并且不是数十万,至少不是Chrome的V8) ]).

这是ES5版本:

var source1, dest1, source2, dest2;

snippet.log("If dest doesn't exist yet:");
source1 = [1, 2, 3, 4];
dest1 = source1.slice(0);
snippet.log("[before change] source1 = " + source1.join(", "));
snippet.log("[before change] dest1 = " + dest1.join(", "));
source1[2] = "three";
dest1[3] = "four";
snippet.log("[after change] source1 = " + source1.join(", "));
snippet.log("[after change] dest1 = " + dest1.join(", "));

snippet.log("If dest already exists and we're just appending:");
source2 = [1, 2, 3, 4];
dest2 = ['a', 'b', 'c', 'd'];
snippet.log("[before append] source2 = " + source2.join(", "));
snippet.log("[before append] dest2 = " + dest2.join(", "));
dest2.push.apply(dest2, source2);
snippet.log("[before change] source2 = " + source2.join(", "));
snippet.log("[before change] dest2 = " + dest2.join(", "));
source2[2] = "three";
dest2[7] = "four";
snippet.log("[after change] source2 = " + source2.join(", "));
snippet.log("[after change] dest2 = " + dest2.join(", "));

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 2

简单的方法是使用:

var cloneArray = JSON.parse(JSON.stringify(originalArray));

我在获取arr.concat()或arr.splice(0)提供深层复制方面存在问题.上面的代码段完美无缺.

Answer 3

克隆数组的一个好方法是使用数组字面量和展开语法。这是由ES2015 实现的。

const objArray = [{name:'first'}, {name:'second'}, {name:'third'}, {name:'fourth'}];

const clonedArr = [...objArray];

console.log(clonedArr) // [Object, Object, Object, Object]

您可以在 MDN 的文档中找到此复制选项：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Copy_an_array

这也是Airbnb的最佳实践。https://github.com/airbnb/javascript#es6-array-spreads

注意：ES2015 中的 spread 语法在复制数组时更深一层。因此，它们不适合复制多维数组。

Answer 4

var clonedArray = array.concat();