删除地图函数中的重复项[重复]答案

【问题标题】：Remove Duplicates within a map function [duplicate]删除地图函数中的重复项[重复]
【发布时间】：2021-04-07 07:23:54
【问题描述】：

我正在尝试删除数组中的重复项。我有来自帖子的标签，这也是数组：

tags: ['react', 'javascript', 'node']

从地图功能我有这样的输出： node react javascript react javascript react javascript node

<div class="tags">
  {posts.map(post =>
    post.frontmatter.tags.map(tag => (
      <Link
        key={tag + `tag`}
        to={`/tags/${kebabCase(tag)}/`}
        className="tag is light"
      >
        {tag}
      </Link>
    ))
  )}
</div>

我尝试实现.filter 和reduce，但我被卡住了。

提前致谢

【问题讨论】：

忘记花哨的过滤器和映射方法，将问题分解。您需要遍历数组并检查之前是否遇到过每个项目。您可以使用对象文字（即字典，在这种情况下相同）来完成此操作。尽管您可能不会，但我鼓励您尝试根据我所写的内容来解决这个问题。从长远来看，它会帮助你。

标签： javascript arrays filter reduce

【解决方案1】：

var sandwiches = ['turkey', 'ham', 'turkey', 'tuna', 'pb&j', 'ham', 'turkey', 'tuna'];
var deduped = Array.from(new Set(sandwiches));

// Logs ["turkey", "ham", "tuna", "pb&j"]
console.log(deduped);

【讨论】：

【解决方案2】：

将值放入 Set 将忽略重复项并将其放回新数组中以对其进行映射。

<div class="tags">
  {posts.map(post =>
    [...new Set(post.frontmatter.tags)].map(tag => (
      <Link
        key={tag + `tag`}
        to={`/tags/${kebabCase(tag)}/`}
        className="tag is light"
      >
        {tag}
      </Link>
    ))
  )}
</div>

【讨论】：

【解决方案3】：

您可以使用Set 从数组中获取唯一元素，并使用扩展语法将结果作为数组获取。

const arr = ["node", "react", "javascript", "react", "javascript", "react", "javascript", "node"];
const res = [...new Set(arr)];
console.log(res);

【讨论】：