如何简化统计电影JSON中各genre出现次数的重复JS代码？

你完全可以通过一次遍历完成所有电影类型的次数统计，不用为每个类型重复编写map+reduce代码，核心思路是用一个对象来统一记录所有类型的计数：

// 遍历所有电影，统计每个类型的出现次数
const genreCounts = props.movies.reduce((counts, movie) => {
  // 遍历当前电影的所有类型
  movie.genres.forEach(genre => {
    // 累加对应类型的计数，初始值默认为0
    counts[genre] = (counts[genre] || 0) + 1;
  });
  return counts;
}, {});

这段代码执行后，genreCounts会是一个键为类型名称、值为对应出现次数的对象，示例结构如下：

{
  "Comedy": 35,
  "Fantasy": 22,
  "Crime": 18,
  // 其他所有类型的计数
}

如果需要单独获取某个类型的次数，直接通过属性访问即可，比如genreCounts.Comedy或genreCounts["Comedy"]。

补充：确保包含所有预设类型 #

如果你的genres数组里存在一些可能没出现在任何电影中的类型，想要确保这些类型在结果中显示次数为0，可以再做一步补全处理：

// 基于预设的genres数组补全所有类型的计数
const completeGenreCounts = props.genres.reduce((counts, genre) => {
  counts[genre] = genreCounts[genre] || 0;
  return counts;
}, {});

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