JavaScript中高效合并多数组关联对象的优化方法咨询

原实现的核心问题是嵌套遍历导致的时间复杂度爆炸：每次遍历用户时都对三个大数组执行filter，相当于对每个用户都完整扫描一遍movies、toys、colors数组，时间复杂度为O(U*(M+T+C))（U是用户数，M/T/C分别是三个关联数组的长度），数据量越大性能越差。

优化思路是预处理关联数据为哈希映射，将查找操作从O(N)降为O(1)，整体时间复杂度降到O(U+M+T+C)，具体步骤如下：

步骤1：将关联数组转换为按account_id分组的映射 #

先对movies、toys、colors各遍历一次，把每个数组中的元素按account_id归类，存入Map（或普通对象）：

// 处理电影数据
const movieMap = new Map();
moviesOfusers.forEach(movie => {
  const key = movie.account_id;
  if (!movieMap.has(key)) {
    movieMap.set(key, []);
  }
  movieMap.get(key).push(movie);
});

// 处理玩具数据
const toyMap = new Map();
toysOfusers.forEach(toy => {
  const key = toy.account_id;
  if (!toyMap.has(key)) {
    toyMap.set(key, []);
  }
  toyMap.get(key).push(toy);
});

// 处理颜色数据
const colorMap = new Map();
colorsOfUsers.forEach(color => {
  const key = color.account_id;
  if (!colorMap.has(key)) {
    colorMap.set(key, []);
  }
  colorMap.get(key).push(color);
});

步骤2：遍历用户数组快速合并数据 #

现在遍历用户时，直接从映射中取出对应的数据，无需再扫描整个关联数组：

const fullUsers = users.map(user => ({
  user,
  favorite_movie: movieMap.get(user.id) || [],
  favorite_toys: toyMap.get(user.id) || [],
  favorite_colors: colorMap.get(user.id) || []
}));

额外优化点 #

• 如果account_id是数值类型，用普通对象做映射性能和Map接近；如果是字符串（比如示例中的123-456），Map的表现更稳定，也避免对象键的隐式转换问题。
• 可以封装一个通用的分组函数，避免重复代码：

  function groupBy(arr, keyField) {
    const map = new Map();
    arr.forEach(item => {
      const key = item[keyField];
      if (!map.has(key)) map.set(key, []);
      map.get(key).push(item);
    });
    return map;
  }
  
  // 调用方式更简洁
  const movieMap = groupBy(moviesOfusers, 'account_id');
  const toyMap = groupBy(toysOfusers, 'account_id');
  const colorMap = groupBy(colorsOfUsers, 'account_id');
  

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