原文 | 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种方法，希望对你也有帮助，谢谢你的阅读！

学习更多技能

请点击下方公众号