Javascript中引用的对象数组数组

Question

我有一个数组如下

var sample = [{a:1, b: 1, c:1}, {a:1, b: 1, c:1}, {a:1, b: 1, c:1}];

然后我运行以下代码并尝试groupsOfItems[0].sample[0].a = 10 ， groupsOfItems[0].sample[0].a ， groupsOfItems[1].sample[0].a和groupsOfItems[2].sample[0].a变为10。

我该如何防止这种情况？

 var sample = [{a:1, b: 1, c:1}, {a:1, b: 1, c:1}, {a:1, b: 1, c:1}]; var groupsOfItems = []; for(let i = 0; i < 10; i++) { var item = {}; item.sample = _.clone(sample); groupsOfItems.push(item); } groupsOfItems[0].sample[0].a = 10 console.log(groupsOfItems[0].sample[0].a,groupsOfItems[1].sample[0].a,groupsOfItems[2].sample[0].a); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 

Answer 1

在将对象赋予数组的属性之前，您需要克隆该对象

更换

item.sample = sample;

同

item.sample = JSON.parse(JSON.stringify(sample));

请注意，当样本对象增长时，这种克隆方法效率会降低。 尝试这里显示的其他一些方法。

Answer 2

如本文所述

for(let i = 0; i < 10; i++) {
        var item = {};
        item.sample = $.extend(true, [], sample);
        groupsOfItems.push(item);
    }

Answer 3

我会避免一般克隆对象。 克隆对象只会在轨道下方的痛苦中结束。 以下是我在过去没有克隆的情况下取得的相似之处。

var sample = [{   a: 1,   b: 1,  c: 1}, {  a: 1,  b: 1,  c: 1}, {  a: 1,  b: 1,  c: 1}];
var groupsOfItems = [];

var Item = function(a, b, c) {
  this.a = a;
  this.b = b;
  this.c = c;
}

for (let i = 0; i < 10; i++) {
  var item = {};
  item.sample = _.map(sample, function(item) {
    return new Item(item.a, item.b, item.c)
  });
  groupsOfItems.push(item);
}

groupsOfItems[0].sample[0].a = 10

console.log(groupsOfItems[0].sample[0].a, groupsOfItems[1].sample[0].a, groupsOfItems[2].sample[0].a);
//10 1 1

通过这种方式，您可以为它们分配所有容器以进行修改，克隆问题就会消失。