3种JavaScript中删除重复数组值的简单方法

快来打我* 2022-08-31 07:27 138阅读 0赞

![9975c1f2de6da86be07c6c64c160da2b.png][]

原文 | https://medium.com/code-85/three-easy-ways-to-remove-duplicate-array-values-in-javascript-97131baeba7a

原译 | 小爱

有多种方法可以删除数组中的重复值。在开始使用推荐的方法之前，先问问自己你使用的是哪个 ES 版本？

我们将通过三种策略来删除重复值。每个策略都将使用更新的约定，从而产生更高效的代码。为了节省空间，假设每个代码片段都使用一个名为 items 的变量，该变量是一个包含一些重复值的数组。

**1、带有 .indexOf() 的 For 循环**

第一种方法经过实战测试，保证即使是最古老的基础设施也能使用。

我们首先定义一个新数组来保存唯一值，然后使用 for 循环通过 indexOf() 方法手动检查每个值。当 indexOf() 返回 -1 时，我们知道该值尚未出现在我们的唯一数组中。

var unique = [];
    for(var i=0; i < items.length; i++) {
      if(unique.indexOf(items[i]) == -1) {
        unique.push(items[i]);
      }
    }

**2、.filter() 与 .indexOf()**

第二个序列将需要 ES5，它于 2009 年发布。

使用 .filter()，我们避免预定义一个空数组并绕过 for 循环。该策略的秘诀在于 .indexOf() 将返回从左侧开始找到的值的索引。这意味着如果当前索引与 .indexOf() 的返回值不匹配，那么我们找到了重复项。

var unique = items.filter(
      (item, index) => {
        return items.indexOf(item) == index;
      }
    );

**3、Set() 与扩展运算符**

这个最终策略利用了 2015 年发布的 ES6 的特性。

在 ES6 中，JavaScript 支持 Set() 数据结构，根据定义，该结构仅包含唯一值。使用 Set() 的一个缺点是我们不再留下数组。我们使用扩展运算符来解决这个问题，将集合解包到一个新形成的数组中。

const unique = [... new Set(items)];

你需要根据正在构建的环境来决定选择哪种实现。虽然自然的反应是“越新越好”，但不要忘记考虑代码的舒适度以及在重新访问时识别代码的能力。

以上就是我分享的3种方法，希望对你也有帮助，谢谢你的阅读！

#  #

**学习更多技能**

**请点击下方公众号**

![4361caa3f40ea5fd447f6a63cdcdccfc.gif][]

![99553a3e74e2dba92b3edca96556ab03.png][]

![dfb6484f2335120246b182c60132154e.png][]

[9975c1f2de6da86be07c6c64c160da2b.png]: /images/20220829/598d00f7f27c49fe924af9364f1b60d0.png
[4361caa3f40ea5fd447f6a63cdcdccfc.gif]: /images/20220829/baae6b7fb4de4765aa8bd0e7d2cffe16.png
[99553a3e74e2dba92b3edca96556ab03.png]: /images/20220829/14cad929f74442dba7d7307f309213f9.png
[dfb6484f2335120246b182c60132154e.png]: /images/20220829/86c9d439167f421198c0094f4caf975c.png