React中如何匹配两个对象数组的id并更新对应name属性

推荐方案（时间复杂度更低） #

先将result2转换为以id为键的映射对象，遍历result1时直接查表匹配即可，避免嵌套循环，适合数据量较大的场景：

var result1 = [
    {id:1, name:'Sandra'},
    {id:2, name:'John'},
    {id:3, name:'Peter'},
    {id:4, name:'Bobby'}
];

var result2 = [
    {id:2, name:'Malai'},
    {id:4, name:'Lama'}
];

// 构建id对应name的映射表
const nameMap = {}
result2.forEach(item => {
  nameMap[item.id] = item.name
})

// 遍历result1更新匹配项的name
result1.forEach(item => {
  if (nameMap.hasOwnProperty(item.id)) {
    item.name = nameMap[item.id]
  }
})

注：上述方案直接修改原result1数组，如果需要保留原始result1数据不受影响，可以先对result1做深拷贝后再执行更新操作

简易方案（适配小数据量场景） #

如果两个数组数据量都很小，也可以直接用嵌套循环实现匹配更新：

result1.forEach(item1 => {
  for (const item2 of result2) {
    if (item1.id === item2.id) {
      item1.name = item2.name
      break // 匹配到后可直接跳出循环减少不必要遍历
    }
  }
})

执行上述任意一种代码后，result1就会变为你需要的目标结果。

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