React JS中如何从数组对象提取所有标签生成新数组？

需求与数据 #

想要构建一个带复选框的自更新过滤器，现有数据如下：

const Shooting= [
    {
      name: "John & Johna ",
      tag: ["wedding", "couple"],
      img: [ src1 , src2, ...] // 无关字段
    },
    {
      name: "Mario & Marie",
      tag: ["couple", "NSFW"],
      img: [ src1 , src2, ...] // 无关字段
    },
  ];
export default Shooting;

期望输出 #

Filter:
[]wedding 
[]couple  
[]NSFW    
// [] 代表复选框，"couple"为数组中的重复项，最终只显示一次

现有思路 #

1. 将所有标签存入一个新数组
2. 编写函数去除新数组中的重复项
3. 使用map函数遍历过滤后的数组渲染复选框 -> Obj.map((tag)=>{...})

问题 #

如何将所有标签提取到一个新列表中？

解决方案 #

1. 提取所有标签 #

用数组的flatMap方法就能一步提取所有标签，它会先遍历每个Shooting项，取出对应的tag数组，再把所有tag合并成一个一维数组：

const allTags = Shooting.flatMap(item => item.tag);
// 结果：["wedding", "couple", "couple", "NSFW"]

要是运行环境不支持flatMap，用reduce拼接数组也能达到同样效果：

const allTags = Shooting.reduce((total, currentItem) => {
  return total.concat(currentItem.tag);
}, []);

2. 去除重复标签 #

最简便的方式是利用ES6的Set结构，Set会自动剔除重复值，再把它转回数组即可：

const uniqueTags = [...new Set(allTags)];
// 结果：["wedding", "couple", "NSFW"]

如果要兼容更老的环境，用filter结合indexOf判断也是常规操作：

const uniqueTags = allTags.filter((tag, index) => {
  // 只保留第一次出现的标签
  return allTags.indexOf(tag) === index;
});

3. 渲染复选框 #

拿到去重后的标签数组，就可以用map循环渲染复选框了（以React为例）：

<div>
  <p>Filter:</p>
  {uniqueTags.map(tag => (
    <div key={tag} style={{ margin: '4px 0' }}>
      <input type="checkbox" id={tag} value={tag} />
      <label htmlFor={tag}>{tag}</label>
    </div>
  ))}
</div>

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