循环向数组推入对象仅保留最后值的问题求助及解决建议

嘿，我太懂你遇到的这个坑啦！这是JavaScript里引用类型常踩的小陷阱，咱们来快速搞定它～

问题根源 #

你把myObj的声明放在了for循环外面，而对象属于引用类型——也就是说，整个循环里你其实一直在修改同一个对象的属性，然后把这个对象的"引用"（相当于指针）push到data数组里。循环结束后，数组里所有元素指向的都是同一个对象，自然就全显示最后一次修改的内容啦！

两种解决方案 #

方案1：把对象声明移到循环内部

每次循环都创建一个全新的对象，这样每次push到数组里的都是独立的对象引用：

var data = [];
for (var kl = 0; kl < reportCriteriaIdData.length; kl++) {
  var myObj = {}; // 移到循环内，每次新建对象
  myObj["id"] = [myId];
  myObj[thisobj.scFilterLabel[0]] = [reportCriteriaIdData[kl].text];
  myObj["label"] = [reportCriteriaIdData[kl].text];
  myObj["index"] = [kl];
  data.push(myObj);
}

方案2：push时复制新对象

如果不想调整myObj的声明位置，可以在push的时候用扩展运算符或者Object.assign复制一个新对象进去：

var myObj = {};
var data = [];
for (var kl = 0; kl < reportCriteriaIdData.length; kl++) {
  myObj["id"] = [myId];
  myObj[thisobj.scFilterLabel[0]] = [reportCriteriaIdData[kl].text];
  myObj["label"] = [reportCriteriaIdData[kl].text];
  myObj["index"] = [kl];
  data.push({...myObj}); // 扩展运算符复制新对象
  // 也可以用 Object.assign：data.push(Object.assign({}, myObj));
}

这样调整后，data数组里的每个元素都会对应循环中当前次的属性值，不会再全部变成最后一个对象啦！

内容的提问来源于stack exchange，提问作者anu