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

共 1201字,需浏览 3分钟

 ·

2021-07-27 20:16

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


学习更多技能

请点击下方公众号


浏览 21
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报