如何向数组添加对象并避免对象的key重复覆盖问题

问题原因 #

• 对象是引用类型，你在forEach循环外只初始化了一次obj对象，每次循环都是修改这同一个对象的属性，push到数组里的也都是该对象的引用，最终数组所有元素都指向同一个对象，属性值是最后一次循环赋值的结果。
• 同一个对象的同名属性重复赋值会覆盖旧值，就算不考虑引用问题，也无法保留两个不同的eggs价格。

修复方案 #

每次循环内部单独创建新对象即可，修改后代码如下：

const productsForSale = ['eggs', 'eggs', 'bread', 'milk'];
const soldPrice = [2.70, 2.50, 1.97, 3.29];
const arr = [];
productsForSale.forEach((key, i) => {
  // 每次循环创建全新的对象
  const obj = {};
  obj[key] = soldPrice[i];
  arr.push(obj);
});

也可以用更简洁的map写法实现相同效果：

const result = productsForSale.map((key, i) => ({ [key]: soldPrice[i] }));

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