JS实现：依据id合并两个嵌套数组对象的指定字段

核心思路 #

先把其中一个数组（比如arr2）转换成以id为键的映射对象，实现O(1)时间复杂度的快速查找，再遍历另一个数组（arr1），将对应字段合并生成目标数组。这种方式比嵌套循环更高效，数据量越大优势越明显。

完整代码实现 #

// 修正原代码字符串未加引号的语法问题
let arr1 = [{id: 0, name: 'Ben', city: 'Philadelphia'}, {id: 1, name: 'Alice', city: 'Frankfurt'}, {id: 2, name: 'Detlef', city: 'Vienna'}];
let arr2 = [{id: 2, age: 18}, {id: 0, age: 39}, {id: 1, age: 75}];

// 步骤1：将arr2转为id->age的映射对象
const ageMap = arr2.reduce((map, item) => {
  map[item.id] = item.age;
  return map;
}, {});

// 步骤2：遍历arr1，合并字段生成arr3
let arr3 = arr1.map(item => ({
  name: item.name,
  city: item.city,
  age: ageMap[item.id]
}));

console.log(arr3);
// 输出结果：
// [{name: 'Ben', city: 'Philadelphia', age: 39}, {name: 'Alice', city: 'Frankfurt', age: 75 }, {name: 'Detlef', city: 'Vienna', age: 18}]

额外处理：兼容id缺失的情况 #

如果存在某个id在其中一个数组里缺失的情况，可以添加默认值或判断逻辑，避免出现undefined：

let arr3 = arr1.map(item => ({
  name: item.name,
  city: item.city,
  age: ageMap[item.id] || '未知' // 找不到对应age时显示默认值
}));

场景适配 #

该方案完全适配你提到的LocalStorage数据与API返回数据合并的场景，无论是从LocalStorage取出解析后的数组，还是API返回的JSON数组，都可以直接套用上述逻辑，合并后的数据可直接用于DOM渲染等后续操作。

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