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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
JS面向对象的程序设计相关知识小结
May 26 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 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
第十二节--类的自动加载
2006/11/16 PHP
mysql5详细安装教程
2007/01/15 PHP
php strtotime 函数UNIX时间戳
2009/01/14 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
Python中random模块用法实例分析
2015/05/19 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
django使用graphql的实例
2020/09/02 Python
python利用faker库批量生成测试数据
2020/10/15 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
小区门卫岗位职责
2013/12/31 职场文书
创先争优活动心得体会
2014/09/04 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
辩论赛新闻稿
2015/07/17 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android