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));

请注意，随着样本对象的增长，这种克隆方法的效率会降低。尝试显示 here.

的其他一些方法

Answer 2

as mentioned in this post

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

这样您就可以为它们分配一个容器用于您的修改，并且克隆问题就消失了。

Javascript 中的对象数组引用数组

Array of array of objects reference in Javascript

javascript

arrays

reference

underscore.js