ES5 ES6中Array对象去除重复项的方法总结
更新时间：2017年04月27日 14:18:49 作者：Microzz
这篇文章主要给大家介绍了Array对象去除重复项的相关资料，文中通过示例代码详细介绍了在ES5和ES6中Array对象去除重复项的方法，需要的朋友可以参考借鉴，下面来一起看看吧。
输入例子
[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN].uniq()
输出例子
[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']
分析
题目要求给 Array 添加方法，所以我们需要用到 prototype。数组去重本身算法不是很难，但是在 JavaScript 中很多人会忽视 NaN 的存在，因为在 JS 中 NaN !== NaN 。但是在去重中我们又不能保留两个 NaN ，所以需要进行一下判断，这是很多人容易忽视的。
ES5的实现如下：
代码
Array.prototype.uniq = function () {
var arr = [];
var flag = true;
this.forEach(function(item) {
// 排除 NaN (重要！！！)
if (item != item) {
flag && arr.indexOf(item) === -1 ? arr.push(item) : '';
flag = false;
} else {
arr.indexOf(item) === -1 ? arr.push(item) : ''
}
});
return arr;
}
验证
我们只需要在数组上直接调用 uniq 方法就可以了，如：
[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN].uniq()
结果为：
[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']
进阶
ES6的实现
ES6新增了 Set 对象，也就是我们所说的“集合”，它类似于数组，但是成员的值都是唯一的，没有重复的值。所以可以方便去重。
Set本身是一个构造函数，用来生成Set数据结构。(详看👉Set和Map数据结构)
如果用ES6为 Array 对象添加一个去除重复项的方法，则可以如下实现：
Array.prototype.uniq = function() {
return Array.from(new Set(this));
}
代码中用 Array.from 把 Set 结构转换成数组，当然，你也可以用其他方法，这里不深究。这里去重关键代码只需要一行，是不是非常简单？😄
如果你要优雅一点，可以使用 ES6 的扩展运算符。如下：
Array.prototype.uniq = function() {
return [...new Set(this)];
}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了JAVA四种基本排序方法,较为详细的总结分析了插入法、冒泡法、选择法及Shell排序等四种常用的排序技巧,非常具有实用价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了JS实现移动端触屏拖拽功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
由于经常需要进行页面间传参且各种传参的业务场景也不相同,根据官方文档和日常工作进行了总结,下面这篇文章主要给大家总结介绍了关于小程序页面之间数据传递的4种方法,需要的朋友可以参考下2023-04-04
createElement和onclick...2006-11-11
这篇文章主要介绍了实例讲解使用原生JavaScript处理AJAX请求的方法,这样就算是利用原生API而脱离了jQuery中的Ajax方法,需要的朋友可以参考下2016-05-05
我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单，比如下面这张图片。那么如何实现导航菜单栏中的二级下拉菜单呢？下面小编给大家分享JS中用三种方式实现导航菜单中的二级下拉菜单，感兴趣的朋友一起看看吧2016-10-10
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
本文主要介绍了js判断是否在iframe中及防止网页被别站用 iframe嵌套的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了学习JavaScript编程语言的8张思维导图分享,本文给出了javascript变量、javascript运算符、javascript数组、javascript流程语句、javascript字符串函数、javascript函数基础、javascript基础DOM操作、javascript正则表达式的思维导图,需要的可以参考下2015-03-03
在一些程序开发中，对于删除操作，最好再让用户确认一下，以免误操作，带来的损失，下面的方法，大家可以参考下。各个语言下，都通用的思路。2010-07-07
本文通过实例代码给大家介绍了django js 实现表格动态标序号 ,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-07-07
最新评论