Angular响应式表单循环推送动态内容时属性值重复异常求助

你遇到的这个问题是JavaScript对象引用机制导致的——看起来你应该是在循环外部定义了temp对象，每次循环只是修改这个同一个对象的属性，然后把它的引用push到xyz数组里。数组里的所有元素其实都指向同一个内存地址的对象，所以最后所有对象的c值都会变成数组最后一个元素的值。

解决方案1：循环内创建新对象 #

最直接的办法就是把temp的定义放到循环内部，让每次迭代都生成一个全新的独立对象：

// 处理表单数据得到整数数组
let arr = data['c'].split(',').map(item => parseInt(item));

// 循环时每次新建对象
for(let i = 0; i < arr.length; i++){
  const temp = {
    a: 'some data',
    b: 'some more data',
    c: arr[i]
  };
  this.xyz.push(temp);
}

解决方案2：用展开运算符复用基础属性 #

如果你的temp原本有一些固定的基础属性，可以用对象展开运算符快速复制出一个新对象，再修改动态属性：

// 定义基础模板对象
const baseTemplate = { a: 'some data', b: 'some more data' };
let arr = data['c'].split(',').map(item => parseInt(item));

for(let i = 0; i < arr.length; i++){
  // 展开基础对象，生成新对象并赋值c属性
  const temp = { ...baseTemplate, c: arr[i] };
  this.xyz.push(temp);
}

解决方案3：用Array.map简化代码 #

既然是把数组的每个元素转换成对应结构的对象，用map方法会更简洁优雅，还能避免手动循环的冗余：

let arr = data['c'].split(',').map(item => parseInt(item));

// 直接通过map生成目标数组
this.xyz = arr.map(item => ({
  a: 'some data',
  b: 'some more data',
  c: item
}));

以上三种方式的核心都是确保每个push到数组里的对象都是独立的内存引用，这样每个对象的c值就会对应arr里的对应元素，不会全部变成最后一个值了。

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