如果更改对象值，则数组值会更改

Question

数组改变了它的值，即使它被推入更早

var original = 
[{
    a: 1,
    data: 
        { b: 'before' }
},
{
    a: 2,       
    data: 
        { b: 'before' }
}];

var arr1 = [];
var arr2 = [];


for(i=0; i<original.length; i++) {
    let value = original[i];

    //pushed earlier
    arr1.push(value);

    let newvalue = original[i];
    if (newvalue.data.b == "before") {
        newvalue.data.b = "after";
        arr2.push(newvalue);
    }
}

console.log("ARRAY 1 ");
console.log(arr1);
console.log("ARRAY 2 ");
console.log(arr2);

生产

ARRAY 1 
[ { a: 1, data: { b: 'after' } }, { a: 2, data: { b: 'after' } } ]
ARRAY 2
[ { a: 1, data: { b: 'after' } }, { a: 2, data: { b: 'after' } } ]

我猜这与 JS 如何更改值有关，因为它被原始数组本身引用。

在使用原始数组修改和创建另一个数组的同时必须保留原始数组的情况下，最佳解决方案是什么？

Answer 1

您将使用所谓的传播运算符来创建副本并允许您修改它。示例：

let newElement = 1;
const modifiedArray = [...oldArray, newElement];

还有其他 javascript 方法，例如 slice() 将 return 数组的修改副本。

Answer 2

javascript 中的数组和对象默认按引用传递。

如果你想避免这种行为，你可以使用 Object.assign 但是对于对象的深层复制失败所以你必须在这里使用 JSON.parse(JSON.stringify(obj))，

let newvalue = JSON.parse(JSON.stringify(original[i]));

var original = [{
    a: 1,
    data: {
      b: 'before'
    }
  },
  {
    a: 2,
    data: {
      b: 'before'
    }
  }
];

var arr1 = [];
var arr2 = [];


for (i = 0; i < original.length; i++) {
  let value = JSON.parse(JSON.stringify(original[i]));

  //pushed earlier
  arr1.push(value);

  let newvalue = JSON.parse(JSON.stringify(original[i]));
  if (newvalue.data.b == "before") {
    newvalue.data.b = "after";
    arr2.push(newvalue);
  }
}

console.log("ARRAY 1 ");
console.log(arr1);
console.log("ARRAY 2 ");
console.log(arr2);

如果更改对象值，则数组值会更改

Array value changes if object value is changed

javascript

reference