ES5 ES6中Array对象去除重复项的方法总结


Posted in Javascript onApril 27, 2017

输入例子

[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)];
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 #Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 #Javascript
JavaScript实现反转字符串的方法详解
Apr 27 #Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 #jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 #jQuery
js实现添加删除表格(两种方法)
Apr 27 #Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 #jQuery
You might like
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
python 字符串格式化代码
2013/03/17 Python
Python常用列表数据结构小结
2014/08/06 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
python实现手机通讯录搜索功能
2018/02/22 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
超级实用的8个Python列表技巧
2020/08/24 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
护理自荐信范文
2013/10/05 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
员工团队活动方案
2014/08/28 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
旷课检讨书500字
2014/10/14 职场文书
生日祝酒词大全
2015/08/10 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
python基础之函数的定义和调用
2021/10/24 Python
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle