如何使用Javascript从对象数组中的数组属性中获取不同的值

Question

假设我有一个这样的数据集。

posts = [
{
  title: 'title1',
  category: 'cat1',
  tags: ['tag1', 'tag2', 'tag3', 'tag4']
},
{
  title: 'title2',
  category: 'cat1',
  tags: ['tag1', 'tag2', 'tag5']
}];

我想获取所有帖子中唯一标签的列表，如下所示：

['tag1', 'tag2', 'tag3', 'tag4', 'tag5']

我发现 this response 涵盖了如何为单个道具做到这一点：

const categories = [...new Set(posts.map(post => post.category))];

但我似乎无法获得标签的语法。像这样的东西（可以预见），添加数组而不是破坏的值：

const tags = [...new Set(posts.map(post => post.tags))];

显然，我可以循环浏览每个帖子并以这种方式抓取它们，但我确信使用 ES6 有一种更优雅的方式，我只是还没有想出。这里有什么想法吗？

Answer 1

使用Array.flatMap() 获取扁平化的标签数组来创建集合：

const posts = [{"title":"title1","category":"cat1","tags":["tag1","tag2","tag3","tag4"]},{"title":"title2","category":"cat1","tags":["tag1","tag2","tag5"]}];

const result = [...new Set(posts.flatMap(p => p.tags))];

console.log(result);

如果不支持Array.flatMap()，您可以将Array.map() 创建的数组展开到Array.concat() 中以将其展平：

const posts = [{"title":"title1","category":"cat1","tags":["tag1","tag2","tag3","tag4"]},{"title":"title2","category":"cat1","tags":["tag1","tag2","tag5"]}];

const result = [...new Set([].concat(...posts.map(p => p.tags)))];

console.log(result);