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 简短右键菜单 多浏览器兼容
Jan 01 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
小程序图片长按识别功能的实现方法
Aug 30 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
javascript自定义日期比较函数用法示例
Jul 22 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
php检查页面是否被百度收录
2015/10/28 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
javascript如何实现create方法
2019/11/04 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
python创建关联数组(字典)的方法
2015/05/04 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
numpy数组拼接简单示例
2017/12/15 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python列表解析配合if else的方法
2018/06/23 Python
python迭代器常见用法实例分析
2019/11/22 Python
django中related_name的用法说明
2020/05/20 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
维修工先进事迹
2014/05/29 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
党员自我评价2015
2015/03/03 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书