如何匹配电影genre_ids与genres数组并添加genre_name属性？

核心思路 #

先把genres数组转换成ID-类型名的映射对象，避免每次匹配都遍历整个genres数组，提升效率；再遍历movies数组，给每个电影对象匹配对应的类型名称数组。

代码实现 #

1. 准备示例数据

// 示例 genres 数组
const genres = [
  { id: 28, name: '动作' },
  { id: 12, name: '冒险' },
  { id: 16, name: '动画' },
  { id: 35, name: '喜剧' }
];

// 示例 movies 数组
const movies = [
  { id: 1, title: '头号玩家', genre_ids: [12, 28] },
  { id: 2, title: '寻梦环游记', genre_ids: [16] },
  { id: 3, title: '无匹配测试', genre_ids: [999] }
];

2. 处理逻辑（不修改原数据）

// 转换 genres 为映射对象，快速查找类型名
const genreMap = genres.reduce((acc, genre) => {
  acc[genre.id] = genre.name;
  return acc;
}, {});

// 生成带 genre_name 属性的新电影数组
const processedMovies = movies.map(movie => {
  // 匹配类型名，过滤掉无匹配的项
  const genreNames = movie.genre_ids.map(id => genreMap[id]).filter(Boolean);
  // 返回新对象，保留原属性并添加 genre_name
  return { ...movie, genre_name: genreNames };
});

console.log(processedMovies);

3. 直接修改原数组的写法

如果不需要保留原数组，可直接修改原对象：

const genreMap = genres.reduce((acc, genre) => {
  acc[genre.id] = genre.name;
  return acc;
}, {});

movies.forEach(movie => {
  movie.genre_name = movie.genre_ids.map(id => genreMap[id]).filter(Boolean);
});

说明 #

• reduce生成的映射对象，让ID匹配类型名的操作从O(n)降到O(1)，数据量大时优势明显。
• filter(Boolean)会自动移除genreMap[id]返回的undefined（即无匹配的ID），确保genre_name始终是有效数组。
• 用扩展运算符...movie创建新对象，避免污染原数据，符合函数式编程的最佳实践。

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