如何基于ID匹配处理两个JS数组对象的XP计算并生成结果数组？

我有两个JavaScript数组对象myOldArray和myNewArray，每个对象包含id、name、xp字段，需要生成finalArray，满足以下要求：

• 若ID在两个数组中都存在，xp设为newarray.xp - oldarray.xp
• 忽略仅在old数组中存在的ID
• 仅在new数组中存在的ID，直接保留其xp

我尝试用filter方法但没得到正确结果，请求帮助实现该功能。

原始数组代码 #

const myOldArray = [
{ "id": 1, "name": "A", "xp": 100 },
{ "id": 2, "name": "B", "xp": 150 },
{ "id": 3, "name": "C", "xp": 120 },
{ "id": 4, "name": "D", "xp": 70 },
{ "id": 5, "name": "E", "xp": 50 },
{ "id": 6, "name": "F", "xp": 100 }];

const myNewArray = [
{ "id": 1, "name": "A", "xp": 150 },
{ "id": 2, "name": "B", "xp": 200 },
{ "id": 3, "name": "C", "xp": 140 },
{ "id": 4, "name": "D", "xp": 100 },
{ "id": 5, "name": "E", "xp": 20 },
{ "id": 7, "name": "G", "xp": 50 }];

预期结果数组 #

const finalArray = [
    { "id": 1, "name": "A", "xp": 50 },
    { "id": 2, "name": "B", "xp": 50 },
    { "id": 3, "name": "C", "xp": 20 },
    { "id": 4, "name": "D", "xp": 30 },
    { "id": 5, "name": "E", "xp": 30 },
    { "id": 7, "name": "G", "xp": 50 }];

我的尝试代码 #

const finalArray= myOldArray.filter((el) => {
  return myNewArray.some((f) => {
     if(f.id === el.id)
    return el.xp-f.xp;
  });
});

console.log(finalArray);

你的代码问题出在：

1. filter仅用于筛选原数组元素，不会修改元素的xp值，不符合需求中计算差值的要求
2. some方法返回布尔值，你返回的el.xp-f.xp会被转为布尔值（非0为true，0为false），逻辑完全偏离需求

正确思路是遍历新数组（因为要保留所有新数组元素，排除仅在旧数组的元素），对每个元素检查是否存在于旧数组，再计算对应xp：

方法一：基础实现（map+find） #

const finalArray = myNewArray.map(newItem => {
  // 在旧数组中查找同ID元素
  const oldItem = myOldArray.find(oldItem => oldItem.id === newItem.id);
  if (oldItem) {
    // 存在则计算new.xp - old.xp，保留其他字段
    return { ...newItem, xp: newItem.xp - oldItem.xp };
  }
  // 不存在则直接返回原元素
  return { ...newItem };
});

console.log(finalArray);

方法二：性能优化（适合大数据量） #

如果数组元素较多，find的遍历会导致O(n²)的时间复杂度，建议先将旧数组转为以id为键的映射对象，把查找效率提升到O(1)：

// 构建旧数组ID与xp的映射
const oldXpMap = myOldArray.reduce((map, item) => {
  map[item.id] = item.xp;
  return map;
}, {});

const finalArray = myNewArray.map(newItem => {
  const oldXp = oldXpMap[newItem.id];
  return {
    ...newItem,
    xp: oldXp !== undefined ? newItem.xp - oldXp : newItem.xp
  };
});

console.log(finalArray);

两种方法都能得到预期结果，方法二更适合处理大量数据的场景。

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