JavaScript如何根据id修改数组对应对象并输出符合预期的结果

问题根因 #

• Array.map() 方法需要为每一个遍历到的元素返回对应的值，你的现有代码存在两个问题：
  1. 仅对id匹配的元素做了判断，没有返回修改后的对象
  2. 没有对id不匹配的元素做返回处理，最终方法执行后只会得到全是undefined的数组
• 额外提醒：直接修改原数组内的对象会产生副作用，建议优先生成新对象避免污染原始数据。

修复后代码 #

无副作用版本（推荐，不会修改原数组和原对象） #

const items = [
  { id: 1, value: "first" },
  { id: 2, value: "second" },
  { id: 3, value: "third" }
];
function getData(value, id) {
  return items.map((_each)=> {
    // id匹配时返回合并新值后的新对象，不匹配直接返回原对象
    return _each.id === id ? {..._each, value} : _each
  })
}

console.log(getData("newvalue", 2))

执行后输出的结果和你给出的expectedOutput完全一致。

可修改原对象版本（适合接受修改原始数据的场景） #

function getData(value, id) {
  return items.map((_each)=> {
    if(_each.id === id) {
      _each.value = value
    }
    // 所有元素都要执行return
    return _each
  })
}

注意该版本会直接修改原items数组内对应id的对象属性。

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