如何为对象数组添加Rank属性？JS map遇重复值问题

我猜你遇到的问题大概率是因为在map遍历原数组时，每次都完整遍历了一遍排名数组，最后一次赋值的rank覆盖了之前的结果——哪怕前面已经找到匹配项，循环还在继续，最终所有对象都带上了最后一次循环得到的rank值。

问题根源 #

举个直观的错误写法例子，你可能是这么写的：

// 错误示例：遍历排名数组时没有及时终止，导致最后一个匹配项覆盖所有结果
const originalArray = [/* 你的原对象数组 */];
const rankArray = [/* API返回的排名数组 */];

const wrongResult = originalArray.map(item => {
  let rank;
  // 每次map都遍历整个rankArray，最后一次赋值的rank会覆盖前面的
  rankArray.forEach(rankItem => {
    if (item.name === rankItem.name && item.symbol === rankItem.symbol) {
      rank = rankItem.rank;
    }
  });
  return { ...item, rank };
});

哪怕大部分项在rankArray里能找到匹配，但只要循环没停，后面的项（哪怕不匹配）或者重复的匹配项会把rank变量最后一次赋值的结果带到所有原对象里。

最优解决方案：先构建查找映射表 #

正确的思路是先把排名数据转换成一个快速查找的映射结构（比如Map或者普通对象），用name+symbol的组合作为唯一键，这样既能避免循环覆盖，还能提升查找效率。

步骤1：构建排名映射

const rankArray = [/* API返回的排名数组 */];
// 用Map存储：键是name和symbol的组合字符串，值是对应的rank
const rankMap = new Map();
rankArray.forEach(rankItem => {
  // 生成唯一键，确保name和symbol组合唯一
  const uniqueKey = `${rankItem.name}-${rankItem.symbol}`;
  rankMap.set(uniqueKey, rankItem.rank);
});

步骤2：遍历原数组添加rank属性

const originalArray = [/* 你的原对象数组 */];
const resultArray = originalArray.map(item => {
  const uniqueKey = `${item.name}-${item.symbol}`;
  // 从映射表中获取rank，找不到的话可以设为null或者其他默认值
  const rank = rankMap.get(uniqueKey) ?? null;
  // 返回新对象，不修改原数组（保持immutable）
  return { ...item, rank };
});

如果习惯用普通对象而不是Map，也可以这么写：

const rankObj = {};
rankArray.forEach(rankItem => {
  const uniqueKey = `${rankItem.name}-${rankItem.symbol}`;
  rankObj[uniqueKey] = rankItem.rank;
});

const resultArray = originalArray.map(item => ({
  ...item,
  rank: rankObj[`${item.name}-${item.symbol}`] ?? null
}));

为什么这个方法有效？ #

1. 避免覆盖问题：每个原对象只在映射表中查找一次，直接拿到对应的rank，不会因为循环遍历排名数组导致最后一次赋值覆盖结果。
2. 提升性能：时间复杂度从原来的O(n*m)（n是原数组长度，m是排名数组长度）降到O(n+m)，数据量越大，性能提升越明显。
3. 代码更简洁：逻辑拆分清晰，可读性更强。

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