VueJS循环赋值后数组内所有对象ID均相同的问题排查

看起来你遇到的是JavaScript对象引用共享导致的典型问题——虽然循环中console.log(this.campaigns[x].id)输出的是正确的独立ID，但最终campaigns数组里的所有对象却共享同一个ID，本质原因是你在循环中直接操作了this.campaignsSettings中对象的引用，而非创建新的独立对象。

问题根源 #

当你执行let campaign = this.campaignsSettings[x];时，并没有生成新对象，只是拿到了campaignsSettings对应索引对象的内存引用。如果campaignsSettings数组内的多个元素指向的是同一个对象（比如初始化时未正确克隆对象，导致多个索引共享同一引用），那每次循环修改campaign.id时，都会覆盖之前已经push到campaigns数组里的对象ID——因为它们都指向内存中的同一个对象。

补充一点：即便campaignsSettings里的元素是不同对象，但只要你直接修改原引用而非克隆，后续操作也会影响数组内已存在的对象。

解决方案 #

核心思路是每次循环创建新的独立对象，而非直接操作原对象引用，你可以用以下两种方式实现：

1. 对象展开运算符（推荐，语法更简洁）

this.campaignsWithEventSettings.map(x => { 
  // 克隆原对象，生成新的独立对象
  let campaign = {...this.campaignsSettings[x]}; 
  campaign.event_settings = true; 
  console.log(this.campaigns[x].id)
  campaign.id = this.campaigns[x].id; 
  campaigns.push(campaign); 
}); 

2. Object.assign方法

this.campaignsWithEventSettings.map(x => { 
  // 用Object.assign克隆对象
  let campaign = Object.assign({}, this.campaignsSettings[x]); 
  campaign.event_settings = true; 
  console.log(this.campaigns[x].id)
  campaign.id = this.campaigns[x].id; 
  campaigns.push(campaign); 
}); 

额外注意点 #

你提到循环中console.log(this.campaigns[x].id)输出正确，这是因为id是原始类型（数字），console.log会直接输出它的即时值；而campaign是引用类型，你push到数组里的是对象引用，后续修改这个引用指向的对象时，数组内的元素也会跟着变化。

另外建议检查this.campaignsSettings的初始化逻辑，确保数组内每个元素都是独立对象，避免多个索引共享同一对象引用的情况，从根源上规避这类问题。

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