如何从对象属性中生成去重后的数组？

给定如下对象数组，需要从每个对象的topics属性中提取所有元素，生成一个无重复的新数组：

const data = [
  {
    topics: [
      "tutorial",
      "JS",
      "Video"
    ],
    // 其他属性
  },
  {
    topics: [
      "tutorial",
      "CSS",
      "Testing"
    ],
    // 其他属性
  },
  {
    topics: [
      "HTML",
      "JS",
      "Music"
    ],
    // 其他属性
  }
]

原代码的问题 #

你原本的写法存在两处核心错误：

• 直接push(item.topics)会把整个数组作为单个元素推入，导致最终结果是嵌套数组
• ...topics会把当前已有的topics数组元素再次推入，造成重复添加且逻辑混乱

原代码无法实现扁平化和去重的需求。

正确解决方案 #

方案1：使用flatMap + Set（简洁高效）

利用flatMap扁平化所有topics数组，再通过Set自动去重，最后转回数组：

const topics = [...new Set(data.flatMap(item => item.topics))];

执行后topics结果为：["tutorial", "JS", "Video", "CSS", "Testing", "HTML", "Music"]

方案2：使用forEach + Set（分步处理）

如果需要更直观的分步逻辑，可以先通过Set收集元素（自动去重），再转成数组：

const topicSet = new Set();
data.forEach(item => {
  item.topics.forEach(topic => {
    topicSet.add(topic);
  });
});
const topics = [...topicSet];

方案3：兼容旧环境（无flatMap时）

如果运行环境不支持flatMap，可以用reduce先合并所有数组，再去重：

// 先合并所有topics为一维数组
const allTopics = data.reduce((acc, item) => acc.concat(item.topics), []);
// 去重
const topics = [...new Set(allTopics)];

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