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

Question

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

我已经使用了堆栈溢出中的一个代码片段,如果我从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;
}

我的对象结构就像

我使用淘汰框架.

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

请在这方面帮助我.提前致谢.

Answer 1

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

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

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

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

编辑:

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

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

Answer 2

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

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

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

Answer 3

要复制数组的值而不复制数组的引用，您可以简单地执行以下操作：

let tempArray = [...mainArray];

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

但是，这不会为数组内的对象创建新的引用。要为数组和其中的对象创建新引用，您可以执行以下操作：

JSON.parse(JSON.stringify(mainArray));

Answer 4

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

例:

var mainArr = [],
    tmpArr = []

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

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

Answer 5

对于其他一些同样的问题。您也可以这样做。
使用新的es6功能，您可以创建一个数组的副本（不带引用）和每个对象的副本，而不带一个引用级别。

const copy = array.map(object => ({ ...object }))

它的功能和习惯性恕我直言

注意：传播语法在复制数组时有效地深入了一层。因此，可能不适合复制多维数组，如下面的示例所示（与Object.assign（）和spread语法相同）。
更多信息：https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

因此，基本上，如果您的对象没有对象作为属性。此语法是您所需的一切。不幸的是，规范上没有“开箱即用”的深度克隆功能，但是如果需要，您可以随时使用库

浏览器兼容性警告：我认为它现在是Ecma规范的一部分，但是某些浏览器并不完全支持传播语法喷射。但是，使用其中一种流行的编译器就可以了