3种JavaScript中删除重复数组值的简单方法
原文 | 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种方法,希望对你也有帮助,谢谢你的阅读!
学习更多技能
请点击下方公众号