React(JS)中如何统计电影列表里不重复的主题(theme)数量

需求与数据示例 #

需要统计电影列表中不重复的主题（theme）数量。
数据示例：

const movies = [
  {"id" : 1, "name": "Ps: i love you", "theme": { "id": 1, "name": "love"} }, 
  {"id" : 2, "name": "Holiday", "theme": { "id": 1, "name": "love"} }, 
  {"id" :3, "name": "Scary Movie", "theme": { "id": 2, "name": "horror"} }
];

示例中实际有2个不重复主题：love和horror。

当前代码问题 #

你当前的代码只是过滤出包含主题名称的电影条目，没有做去重处理，所以得到的数量是3，不符合需求：

const movieTheme= movies.filter((item) => item.theme.name);
const movieThemeCount = movieTheme.length;
console.log(movieThemeCount ); // 输出3，不是期望的2

解决方案 #

方法1：用Set自动去重（推荐） #

利用JS中Set集合自动去重的特性，提取所有主题的唯一标识（优先用theme.id，比name更精准，避免同名不同主题的情况），再获取Set的大小即可：

// 提取主题id存入Set，自动去重
const uniqueThemeIds = new Set(movies.map(movie => movie.theme.id));
const themeCount = uniqueThemeIds.size;
console.log(themeCount); // 输出2

如果业务场景允许用主题名称去重，也可以这么写：

const uniqueThemeNames = new Set(movies.map(movie => movie.theme.name));
const themeCount = uniqueThemeNames.size;
console.log(themeCount); // 输出2

方法2：手动遍历去重 #

通过遍历数组，用对象记录已出现过的主题标识，统计不重复的数量：

const seenThemes = {};
let count = 0;

movies.forEach(movie => {
  const themeId = movie.theme.id;
  if (!seenThemes[themeId]) {
    seenThemes[themeId] = true;
    count++;
  }
});

console.log(count); // 输出2

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