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 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
vue3中的组件间通信
Mar 31 Vue.js
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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
javascript中的几个运算符
2007/06/29 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
AngularJS快速入门
2015/04/02 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
高中生自我评语大全
2014/01/19 职场文书
网络管理员岗位职责
2014/03/17 职场文书
农民工讨薪标语
2014/06/26 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书