JS中如何为数组内的所有对象元素添加指定key-value键值对

现有代码存在的问题 #

• 数组方法使用不当：Array.prototype.map() 设计用于生成并返回新数组，要求回调函数返回每个位置对应的新元素，你当前的代码既没有接收map的返回值，也没有在回调中返回内容，属于方法误用。遍历修改原数组元素的场景更适合使用Array.prototype.forEach()。
• 你现有代码实际上已经修改了原数组arr的内容：因为数组中存储的是对象引用，回调参数item直接指向原数组内的对象，你给item添加price属性的操作已经作用于原对象，直接打印原数组arr就能看到你期望的结构。如果你此前是拿map的返回值作为处理结果，会得到全是undefined的数组，这是你没有得到预期结果的核心原因。

实现方案 #

方案1：直接修改原数组（匹配你现有写法逻辑） #

const arr = [{'a' :1, 'b':2},{'a':2, 'b':4}]
// 遍历修改原数组用forEach更合适
arr.forEach( item => {
  item.price = 1
  document.getElementById("body").innerHTML += 'a : '+ item.price + ' ' 
});
console.log(arr) // 输出结果和你期望的完全一致

方案2：不修改原数组，生成新数组（无副作用写法） #

如果你不希望改动原始数组被修改，正确使用map返回新数组即可：

const arr = [{'a' :1, 'b':2},{'a':2, 'b':4}]
const newArr = arr.map( item => {
  // 展开原对象属性，添加新属性，不改动原对象
  const newItem = {...item, price: 1}
  document.getElementById("body").innerHTML += 'a : '+ newItem.price + ' ' 
  return newItem
});
console.log(newArr) // 得到目标结果，原数组arr保持不变

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