如何简化JavaScript中电影与类型关联的嵌套循环实现？

你的核心需求是通过电影的genre_ids匹配对应类型名称，原实现存在性能低效和代码细节问题，以下是具体优化方案：

原实现的问题 #

1. 时间复杂度高：三层嵌套循环（遍历电影→遍历电影的类型ID→遍历所有类型），数据量较大时性能会急剧下降，时间复杂度为O(MGK)（M是电影数量，G是单电影平均类型数，K是类型总数）
2. 深拷贝方式有局限：JSON.parse(JSON.stringify(movies))仅能处理JSON安全的数据，遇到函数、Symbol、循环引用等特殊场景会失效
3. 变量错误：代码中moviesCopy未定义，实际应使用newMoviesArray

优化方案：用映射表降低查找复杂度 #

核心思路是先把类型数组转换成ID→名称的映射表，将类型名称的查找时间复杂度降到O(1)，再遍历电影数组生成目标结构，整体时间复杂度优化为O(K + M*G)，性能提升显著。

实现方式1：使用普通对象作为映射表 #

const getMoviesWithGenres = (movies, movieGenres) => {
  // 构建ID到类型名称的映射
  const genreMap = movieGenres.reduce((map, genre) => {
    map[genre.id] = genre.name;
    return map;
  }, {});

  // 遍历电影数组，生成新数组（浅拷贝对象，避免修改原数据）
  return movies.map(movie => ({
    ...movie,
    genre: movie.genre_ids.map(id => genreMap[id])
  }));
};

实现方式2：使用ES6 Map（更适合数字键场景） #

const getMoviesWithGenres = (movies, movieGenres) => {
  const genreMap = new Map(movieGenres.map(genre => [genre.id, genre.name]));
  
  return movies.map(movie => ({
    ...movie,
    genre: movie.genre_ids.map(id => genreMap.get(id))
  }));
};

额外说明 #

• 如果需要深拷贝电影对象（原对象包含嵌套引用类型），可以在map中替换对象展开为深拷贝逻辑，示例：

  return movies.map(movie => {
    const copiedMovie = JSON.parse(JSON.stringify(movie)); // 或自定义递归深拷贝函数
    copiedMovie.genre = movie.genre_ids.map(id => genreMap[id]);
    return copiedMovie;
  });
  

• 两种映射方式的差异：普通对象的键会被转为字符串，Map支持数字作为键，逻辑更严谨，性能差异可忽略，根据习惯选择即可。

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