JavaScript如何从对象数组中提取去重后的category分类值

核心逻辑是先提取所有分类并去重，再遍历去重后的分类数组渲染节点，不要直接遍历原产品数组。

最简实现（ES6+ 兼容环境） #

利用Set数据结构自动去重的特性，一行代码就能拿到唯一分类：

// 提取并去重得到唯一分类数组：['car', 'plane', 'ship']
const uniqueCategories = [...new Set(DummyProducts.map(item => item.category))]

然后替换你原来的渲染逻辑，遍历这个去重后的数组即可：

{uniqueCategories.map((category) => (
  <Link to="/" className={Style.NavBottomLink} key={category}>
    {category}
  </Link>
))}

注意：React 遍历渲染时建议给节点加唯一key属性，这里分类名本身唯一，直接用category做key比用索引更合理。

不使用Set的兼容实现 #

如果需要兼容不支持ES6 Set的环境，可以用filter配合indexOf实现去重：

const uniqueCategories = DummyProducts
  .map(item => item.category)
  .filter((category, index, arr) => arr.indexOf(category) === index)

渲染逻辑和上面完全一致。

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