没有重复的javascript新数组答案

【问题标题】：javascript new array without duplicates没有重复的javascript新数组
【发布时间】：2020-05-06 00:12:07
【问题描述】：

hmm.. 我尝试了一些方法，但无法让它发挥作用......我知道它应该比我做的更简单。

我想创建一个没有重复的数组。你能帮帮我吗？

useEffect(() => {
    allBands.forEach(band => {
        if(!availableGenres.includes(band.bandGenre)){
            setAvailableGenres(genres => [...genres, band.bandGenre])  
        }
    })
}, [allBands])

【问题讨论】：

能否提供allBands、genres和availableGenres？我们不知道您使用的是什么结构。
下面的答案有效——但我很好奇你是否有其他想法。 allBands 是一个对象数组，每个对象都有一个 bandGenre。我使用 forEach() 方法从 allBands 数组中的每个对象中提取流派。 -- availableGenres 和 setAvailableGenres 是我存储提取的流派的反应中 useState 的一部分。 'genres' 是状态的更新器。感谢您的回复！

标签： javascript reactjs use-effect use-state

【解决方案1】：

我可能会推荐使用内置的Set 对象来跟踪独特的流派。一旦您的Set 拥有所有流派，您就可以使用扩展运算符 (...) 将其转换回数组并设置可用的流派。

useEffect(() => {
  const genres = new Set();
  allBands.forEach(band => {
    genres.add(band.bandGenre);
  })
  setAvailableGenres([...genres]);
}, [allBands])

【讨论】：

哇！我从来没有听说过这个。有用！ - 我现在正在阅读它 - 我看到它会自动检查以确保每个值都是唯一的？使用 new Set() 有什么缺点吗？非常感谢你给我看这个。
一个缺点是Sets 是无序的。

【解决方案2】：

如果我没有误解你的数据结构，你可以试试这个。

useEffect(() => {
  setAvailableGenres(genres => [
    ...genres, 
    ...allBands.map(band => band.bandGenre).filter(bandGenre => !genres.includes(bandGenre))
])}, [allBands])

【讨论】：