在javascript中将对象数组复制到另一个没有对象引用的数组（深层复制）

I have a scenario where i need to copy the array of Objects(Main array) to another Temp array which should not have object reference basically if i make any modification to Main array it should not reflect in the Temp array so that i will preserve the copy independently.

我有一个场景,我需要将对象数组(主数组)复制到另一个Temp数组,该数组不应该有对象引用,如果我对主数组进行任何修改它不应该反映在Temp数组中,这样我将保留独立复制。

I have used one of the code snippet from stack overflow this one does partially like if i delete all objects from the Main array the temp array still hold the value but when i do some modifications in main array and click cancel button iam removing all objects from the main array using array.Removeall(); but the modification still exist in Temp array so which means that object having a reference.

我已经使用了堆栈溢出中的一个代码片段,如果我从Main数组中删除所有对象,temp数组仍然保存值,但是当我在主数组中进行一些修改并单击取消按钮iam删除所有对象时使用array.Removeall()的主数组;但是修改仍然存在于Temp数组中,这意味着该对象具有引用。

clone: function (existingArray) {
  var newObj = (existingArray instanceof Array) ? [] : {};
  console.debug('newObj value is ' + newObj);
  for (i in existingArray) {
    console.debug('i value is' + i);
    if (i == 'clone') continue;
    console.debug('existingArray[i] value ' + existingArray[i]);
    if (existingArray[i] && typeof existingArray[i] == "object") {

      newObj[i] = this.clone(existingArray[i]);
    } else {
      console.debug('in else part ' + existingArray[i]);
      newObj[i] = existingArray[i];
    }
  }
  return newObj;
}

my object structure is like

我的对象结构就像

iam using knockout framework.

我使用淘汰框架。

newObjectCreation = function (localIp, RemoteIp, areaId) {
  this.localIP = ko.observable(localIp);
  this.remoteIP = ko.observable(RemoteIp);
  this.areaId = ko.observable(areaId);
};

template.ProtocolArray.push(new newObjectCreation('', '', '')); // to create default row

please help me in this regard. Thanks in advance.

请帮助我这方面。提前致谢。

6 个解决方案

#1

Let me understand: you don't want just have a new array, but you want to create a new instance for all objects are present in the array itself? So if you modify one of the objects in the temp array, that changes is not propagated to the main array?

让我明白一点:你不想只是拥有一个新数组,但是你想为数组本身中存在的所有对象创建一个新实例?因此,如果您修改临时数组中的一个对象,那么这些更改不会传播到主数组?

If it's the case, it depends by the values you're keeping in the main array. If these objects are simple objects, and they can be serialized in JSON, then the quickest way is:

如果是这种情况,则取决于您在主阵列中保留的值。如果这些对象是简单对象,并且可以使用JSON进行序列化,那么最快的方法是:

var tempArray = JSON.parse(JSON.stringify(mainArray));

If you have more complex objects (like instances created by some your own constructors, html nodes, etc) then you need an approach ad hoc.

如果你有更复杂的对象(比如你自己的构造函数,html节点等创建的实例)那么你需要一个ad hoc方法。

Edit:

If you don't have any methods on your newObjectCreation, you could use JSON, however the constructor won't be the same. Otherwise you have to do the copy manually:

如果你的newObjectCreation上没有任何方法,你可以使用JSON,但构造函数将不相同。否则你必须手动复制:

var tempArray = [];
for (var i = 0, item; item = mainArray[i++];) {
    tempArray[i] = new newObjectCreation(item.localIP, item.remoteIP, item.areaId);
}

#2

So you want a deep copy without object reference? Sure, use .slice().

所以你想要一个没有对象引用的深层副本?当然,请使用.slice()。

Example:

var mainArr = [],
    tmpArr = []

tmpArr = mainArr.slice(0) // Shallow copy, no reference used.

PS: I don't think double-JSON parsing is performance wise.

PS:我不认为双JSON解析是性能明智的。

#3

Lodash can be used for deep copying objects _.cloneDeep(value)

Lodash可用于深度复制对象_.cloneDeep(value)

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// → false

#4

You can use Angular's copy: angular.copy();

你可以使用Angular的副本:angular.copy();

#5

To copy the values of an array without copying the reference, you can simply do:

要复制数组的值而不复制引用,您只需执行以下操作:

let tempArray = [...mainArray];

This is the recommended solution for AirBnb's JS Style Guide: https://github.com/airbnb/javascript#arrays

这是AirBnb JS风格指南的推荐解决方案:https://github.com/airbnb/javascript#arrays

#6

Use angular.copy. But not for the whole array (because it would pass array items by reference), but iterate it and use angular.copy on its members.

使用angular.copy。但不是整个数组(因为它会通过引用传递数组项),但迭代它并在其成员上使用angular.copy。

var newArray = [];
for (var i = 0, item; item = mainArray[i];) {
    newArray[i] = angular.copy(item);
    i++;
}

#1