在for循环中设置对象值然后推送到数组会导致所有最终数组项具有相同的值

时间:2017-10-19 05:54:39

标签: javascript arrays

假设我有一个简单的函数,它基本上将一个对象作为参数,添加一个值,然后将其推送到一个数组。



var objectFruits = {
  name: 'apple'
}

var fruits = []

function pushToArray(parameters) {
  var newObject;
  newObject = Object.assign({}, parameters)

  for (var i = 0; i < 3; i++) {
    newObject.value = i
    fruits.push(newObject)
    console.log(newObject)
  }
}

pushToArray(objectFruits)

console.log(fruits)
&#13;
&#13;
&#13;

这给了我一个结果:

0: {name: "apple", value: 2}
1: {name: "apple", value: 2}
2: {name: "apple", value: 2}

应该在哪里:

0: {name: "apple", value: 0}
1: {name: "apple", value: 1}
2: {name: "apple", value: 2}

为什么最终数组fruits显示每个项value2

2 个答案:

答案 0 :(得分:2)

您正在循环的每次迭代中更新同一对象的值,您需要创建一个新对象。

只需输入此行

newObject = Object.assign({}, parameters)
在for-loop中

<强>演示

var objectFruits = {
  name: 'apple'
};
var fruits = [];

function pushToArray(parameters) {
  for (var i = 0; i < 3; i++) {
    var newObject = Object.assign({}, parameters)
    newObject.value = i
    fruits.push(newObject);
  }
}

pushToArray(objectFruits);

console.log(fruits);

答案 1 :(得分:1)

您的代码存在的问题是您尝试修改同一对象newObject的值。在循环结束时,newObject的所有值都会使用最后一个值进行更新。

你应该在{for循环中移动let newObject = Object.assign({},parameters);,这样你就可以为每个对象提供新的对象引用,在这里你可以添加不同的value值。

&#13;
&#13;
var objectFruits = {
 name:'apple' 
}

var fruits = []

function pushToArray(parameters) {
  //var newObject = Object.assign({},parameters);

  for( var i=0; i<3; i++) {
    let newObject = Object.assign({},parameters);
    newObject.value = i;
    fruits.push(newObject);
    console.log(newObject);
  }
}

pushToArray(objectFruits)

console.log(fruits)
&#13;
&#13;
&#13;