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

IT技术 javascript
2021-03-09 22:09:25

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

我使用了堆栈溢出的代码片段之一,这部分就像我从主数组中删除所有对象一样,临时数组仍然保留该值,但是当我在主数组中进行一些修改并单击取消按钮时,我会从中删除所有对象使用 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

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

6个回答

让我明白:您不希望只拥有一个新数组,而是希望为数组本身中存在的所有对象创建一个新实例?因此,如果您修改临时数组中的对象之一,该更改不会传播到主数组?

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

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

如果您有更复杂的对象(例如由您自己的构造函数、html 节点等创建的实例),那么您需要一种特别的方法。

编辑:

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

var tempArray = [];
for (var i = 0, item; item = mainArray[i++];) {
    tempArray[i] = new newObjectCreation(item.localIP, item.remoteIP, item.areaId);
}
为什么 JavaScript 没有执行此操作的功能?就像function cloneObject (o) { return JSON.parse(JSON.stringify(o)); }......除了在幕后做一些更快的事情。或者甚至更好:调用所有对象的方法,clone()这样您就可以执行mainArray.clone().
2021-04-26 22:09:25
如果您只有属性而不是方法,并且您不关心具有相同构造函数的完全相同的对象,而只关心具有相同值的普通对象,则是的,您将拥有一种“深拷贝”。明确地说:function foo(a) { this.a = a }; var main = [new foo(1)], temp = JSON.parse(JSON.stringify(main));那么你将拥有main[0].a等于1temp[0].a如果您更改最后一个temp[0].a = 4,则更改将不会反映到main[0].a. 然而main[0].constructorfootemp[0].constructorObject
2021-04-28 22:09:25
非常感谢你的回答我感谢你的帮助 template.Temparray(JSON.parse(JSON.stringify(ko.toJS(template.Mainarray())))); 我已经使用了上面的代码片段,它在 n=knockout 框架中按预期工作。向你致敬 :)
2021-05-03 22:09:25
谢谢@ZER0!使用原生 JSON 函数是我见过的最优雅的建议。
2021-05-03 22:09:25
var tempArray = JSON.parse(JSON.stringify(mainArray)); 做一个深拷贝,即没有对象引用?2.) 关于手动复制,此手动复制是否仍指向相同的对象引用。
2021-05-14 22:09:25

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

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

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

对于其他一些有同样问题的人。你也可以这样做。
使用新的es6 功能,您可以创建数组的副本(无引用)和每个对象的副本,而无需一级引用。

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

恕我直言,它更具功能性和惯用性

注意:在复制数组时,Spread 语法有效地深入一层因此,它可能不适合复制多维数组,如下例所示(与 Object.assign() 和 spread 语法相同)。
更多信息:https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

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

浏览器兼容性警告:我认为它现在是 Ecma 规范的一部分,但有些浏览器并不完全支持扩展语法 jet。但是使用一种流行的转译器你会没事的

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

const tempArray = [...mainArray];

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

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

JSON.parse(JSON.stringify(mainArray));
数组没有引用,但里面的对象是。
2021-05-01 22:09:25
对于数组数组,试试这个: var start = [[4,2,6,5],[1,8,7,3]]; var temp = start.map(e => e.slice(0)); var tempEs6 = start.map(e => [...e]);
2021-05-13 22:09:25

所以你想要一个没有对象引用的深拷贝?当然,使用.slice().

例子:

var mainArr = [],
    tmpArr = []

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

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

这在 Google Chrome 25 下对我不起作用。在我修改新数组的第一个对象后,它也修改了原始数组的第一个对象。没有downvote,因为它确实适用于简单的数组,只是不适用于我认为是OP重点的对象数组。
2021-04-30 22:09:25
但是双 JSON 解析有效...根据 MDN(developer.mozilla.org/en/docs/Web/JavaScript/Reference/...):“对于对象引用(而不是实际对象),切片将对象引用复制到新数组。原始数组和新数组都引用同一个对象。如果引用的对象发生更改,则更改对新数组和原始数组都是可见的。”
2021-05-06 22:09:25
如果数组中有对象,这将不起作用。它将复制对象引用。
2021-05-16 22:09:25
正如大家所说。除非数组中有简单的对象,否则这根本不起作用。在大多数情况下使用大多数 Js 框架时,这将不起作用(这是一种过度简化)。这个答案没有回答这个问题。
2021-05-19 22:09:25
这对我也不起作用。stackoverflow.com/questions/28482593/...
2021-05-20 22:09:25