如何使用for循环为对象数组元素添加递增id，解决id重复问题

问题原因 #

你在数组中存入的100个元素都指向同一个bikeObject对象的引用，所有元素共享同一块内存地址。后续修改任意元素的id属性时，实际修改的都是同一个对象的属性，因此所有元素的id最终都会等于最后一次赋值的结果，不会出现递增效果。你之前用map、forEach方法失效也是同样的原因。

修复方案 #

核心逻辑是每次向数组存入对象时，创建全新的独立对象，不要复用同一个对象引用。

方案1：循环时直接创建新对象（最推荐）

在遍历的同时完成新对象创建、id赋值、存入数组的操作，逻辑更简洁：

var bikeObject:any = {
    categorie: 'Road Bike',
    img: '',
    title: '',
    price: '',
    description: ''
}
var bicycle:any = [];

function func(){
  for(let i=0; i < 100; i++){
    // 用展开运算符拷贝基础属性，追加id，每次生成独立的新对象
    bicycle.push({
      ...bikeObject,
      id: i
    })
  }
  console.log(bicycle);
}

func();

方案2：用Array.from一行生成目标数组

更简洁的写法，适合不需要额外处理逻辑的场景：

const bikeObject:any = {
    categorie: 'Road Bike',
    img: '',
    title: '',
    price: '',
    description: ''
}
// 直接生成包含100个带递增id对象的数组
const bicycle = Array.from({length: 100}, (_, index) => ({
  ...bikeObject,
  id: index
}))

方案3：保留原有双循环结构的修改方式

如果不想改动原有push的逻辑，可以在赋值id时对每个元素做一次对象拷贝替换：

function func(){
  for(let i=0; i < 100; i++){
    bicycle.push(bikeObject);
  }
  for(let i=0; i < 100; i++){
    // 拷贝生成新对象赋值id后，替换原位置的旧引用
    bicycle[i] = {...bicycle[i], id: i};
  }
  console.log(bicycle);
}

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