如何根据另一对象数组的匹配字段替换对象数组的属性值？

核心思路 #

先将arr2转换为value-url键值对映射，避免反复遍历arr2提升查找效率，之后遍历arr1完成匹配替换。

代码实现（修改原数组） #

var arr1 = [{name:'qqq'}, 
           {name:'www'}, 
           {name:'eee'},
           {name:'rrr'}]

var arr2 = [{value:'qqq',url:'123'}, 
           {value:'www',url:'456'}]

// 构建value到url的映射表
const valueToUrl = arr2.reduce((map, item) => {
  map[item.value] = item.url;
  return map;
}, {});

// 遍历arr1替换匹配项
arr1.forEach(obj => {
  if (valueToUrl.hasOwnProperty(obj.name)) {
    obj.name = valueToUrl[obj.name];
  }
});

console.log(arr1);
// 输出结果：[{name:'123'}, {name:'456'}, {name:'eee'}, {name:'rrr'}]

代码实现（返回新数组，不修改原数组） #

如果需要保留原数组arr1，可以用map生成新数组：

var arr1 = [{name:'qqq'}, 
           {name:'www'}, 
           {name:'eee'},
           {name:'rrr'}]

var arr2 = [{value:'qqq',url:'123'}, 
           {value:'www',url:'456'}]

const valueToUrl = arr2.reduce((map, item) => {
  map[item.value] = item.url;
  return map;
}, {});

const newArr1 = arr1.map(obj => ({
  name: valueToUrl[obj.name] || obj.name
}));

console.log(newArr1);
// 输出结果：[{name:'123'}, {name:'456'}, {name:'eee'}, {name:'rrr'}]

补充说明 #

• 用reduce构建映射表的时间复杂度为O(n)，遍历替换为O(m)，整体效率远高于嵌套遍历的O(n*m)。
• 使用hasOwnProperty判断能避免匹配到原型链上的属性，更安全；若确定映射表无原型属性，直接用valueToUrl[obj.name]判断也可行。

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