将对象数组复制到JavaScript中的另一个数组

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

hAlE asked 2020-01-14T12:22:09Z
7个解决方案
96 votes

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

...您可以使用<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>applypush可能更惯用(您还会看到slice(0),但默认值为0,所以...):

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

从ES2015(又名ES6)开始,还有<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>,它从任何类似数组的事物(包括实际数组)创建一个新数组:

var destinationArray = Array.from(sourceArray);

(对于较旧的JavaScript引擎,可以填充/填充2252253050579911680)。

同样从ES2015开始,您可以使用可迭代的扩展符号和带有任何可迭代的数组文字(包括数组):

var destinationArray = [...sourceArray];

之后,两个数组将具有相同的内容。 更改一个数组不会更改其他数组。 自然,如果数组条目是一个对象,则两个数组中该对象的条目将指向同一对象; 这不是“深层”副本。

如果目标数组存在...

...并且要将源数组的内容附加到它,可以使用<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

destinationArray.push.apply(destinationArray, sourceArray);

通过使用JavaScript函数的apply功能在目标数组上调用<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>,可以实现此目的,该功能使您可以将函数调用的参数指定为数组。 push将推入具有参数的元素,因此最终将元素从源数组复制到目标数组。

在ES2015及更高版本中,您可以使用可扩展的传播符号(<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>)来使该清理器更干净:

destinationArray.push(...sourceArray);

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

这是ES5版本:

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

T.J. Crowder answered 2020-01-14T12:24:13Z
23 votes

实现此工作的简单方法是使用:

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

我在获取arr.concat()arr.splice(0)提供深层副本时遇到问题。 上面的代码段非常完美。

jsbisht answered 2020-01-14T12:24:38Z
4 votes

克隆数组的一种好方法是使用数组文字和散布运算符。 ES2015使这成为可能。

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

let 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中的散布运算符在复制阵列时会深入一层。 因此,它们不适合复制多维数组。

MauricioLeal answered 2020-01-14T12:25:12Z
3 votes
var clonedArray = array.concat();
Ilya answered 2020-01-14T12:25:27Z
1 votes

如果要保留参考:

Array.prototype.push.apply(destinationArray, sourceArray);

Veikko Karsikko answered 2020-01-14T12:25:52Z
1 votes

有两个重要注意事项。

  1. 使用newArray1 = JSON.parse(JSON.stringify(old array))无法在Angular 1.4.4和jQuery 3.2.1(这是我的环境)下使用。
  2. newArray1 = JSON.parse(JSON.stringify(old array))是一个对象。 因此,如果您执行类似newArray1 = oldArray.slice(0); newArray2 = oldArray.slice(0)的操作,则这两个新数组将仅引用1个数组,更改其中一个将影响另一个。

或者,使用newArray1 = JSON.parse(JSON.stringify(old array))仅复制该值,因此每次都会创建一个新数组。

Tran Vu Dang Khoa answered 2020-01-14T12:26:26Z
0 votes

如果您使用的是nodeJS,建议使用concat()。 在所有其他情况下,我发现slice(0)可以正常工作。

bean5 answered 2020-01-14T12:26:46Z
translate from https://stackoverflow.com:/questions/16232915/copying-an-array-of-objects-into-another-array-in-javascript