es6 数组去重_JS数组去重的9种方法(包括去重NaN和复杂数组类型)
其实网上已经有很多js数组的去重方法,但是我看了很多篇并自己通过代码验证,发现都有一些缺陷,于是在研究多篇代码之后,自己总结了9种方法,如果有哪里不对请及时纠正我哈~
测试代码
let arr1 = [3, 1, [1], 1, [1], true, true, {}, '1', NaN, undefined, NaN, undefined, {}, null, null];let arr2 = [];for (let i = 0; i < 100000; i++) { arr2.push(0 + Math.floor((100000 - 0 + 1) * Math.random()));}// 封装在Array的原型对象会更好,this就是指向调用该方法的数组Array.prototype.unique = function () { //...}console.log(arr1.unique());// 测试去重效果console.time('test');console.log(arr2.unique());// 测试去重时间console.timeEnd('test');
备注:
- arr1包含了两个相同的数组[1]、并且数组[1]和1的顺序打乱(这是为了突出sort的弊端)有两个NaN、两个undefined、两个null等等,把平时会用到的数据类型都写上来了有两个相同的空对象{}
- arr2放入10万个随机纯数字,大的数据量才能看出时间的差别对于纯number的数组,以下所有方法(包括网上的各种方法)都是可行的
- 正确去重的arr1:[3, 1, [1], true, {}, '1', NaN, undefined, null],length = 9。
一、不能正确去重NaN和Object的方法
1. 两种for循环 + splice(耗时最长)
Array.prototype.unique = function () { for (let i = 0; i < this.length; i++) { for (let j = i + 1; j < this.length; j++) { if (this[i] === this[j]) { this.splice(j, 1); j--; } } } return this;}
test: 21208.31396484375 ms(花了21s....)
不能去重NaN和复杂数组类型(比如 Object 和 Array )
2. forEach + indexOf
Array.prototype.unique = function () { let newArr = []; this.forEach((item) => { if (newArr.indexOf(item) === -1) { newArr.push(item); } }) return newArr;}
结果同上,建议大家自己运行一下(就是懒得截图
- test: 4104.52294921875 ms
不能去除重复的NaN和复杂数据类型
原因:indexOf 认为 NaN 不等于 NaN
3. filter + indexOf
Array.prototype.unique = function () { return this.filter((item, index) => { // 利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等,如果不等则说明该元素是重复元素 return this.indexOf(item) === index; })}
test: 5682.358154296875 ms
不能去掉重复的复杂数据类型,同时还会去掉所有的NaN
原因:indexOf 认为 NaN 不等于 NaN ,所以也就不认为他们是重复元素。
4. for + sort(sort有问题)
Array.prototype.unique = function () { let newArr = []; this.sort(); for (let i = 0; i < this.length; i++) { if (this[i] !== this[i + 1]) { newArr.push(this[i]); } } return newArr;}
- test: 61.96484375 ms
带 sort 方法的只对纯number或者纯string类型有效,它无法区分1和'1',因为它是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。
这时候如果有一段这样的排序[1, '1', 1],再用前后比较的方法去重就会出现问题
在这里他还会把undefined也全都去掉,原因是sort()方法排序后,undefined排在最后,而最后一个undefined要和this[length]进行比较,而这个值并不存在,而也是undefined,就会认为他们是同一个值。
同样它不能去重NaN和复杂数据类型,但是耗时是在方法里面是最少之一了(都之一了用别的不香吗)
5. sort + reduce(sort有问题)
Array.prototype.unique = function () { return this.sort().reduce((init, cur) => { if (init.length === 0 || init[init.length - 1] !== cur) { init.push(cur); } return init; }, []);}
- test: 66.679931640625 ms
同样他也是用sort排序再前后比较
比上面那个方法好一点点,还能正确去重undefined(我觉得前后比较这种方法着实不靠谱)
同样也不能去重NaN和复杂数组类型,耗时也是在方法里面是最少之一。
二、能正确去重NaN,不能去重复杂数据类型
1. forEach + includes
Array.prototype.unique = function () { let newArr = []; this.forEach((item) => { if (!newArr.includes(item)) { newArr.push(item); } }) return newArr;}
- 4181.393798828125 ms
可以去掉重复的NaN,但是不能去掉重复的复杂数据类型
includes 认为 NaN === NaN 为 true
2. forEach + map
Array.prototype.unique = function () { let map = new Map(); let newArr = new Array(); this.forEach((item) => { if (!map.has(item)) { map.set(item, 1); newArr.push(item); } }); return newArr;}
同上,不截图了,自行运行一哈~
- test: 27.030029296875 ms
可以去NaN,不能去重复杂数组类型,运行速度快,耗时最少的方法之一
3. Set
Array.prototype.unique = function () { return [...new Set(this)];}
同上,不截图了
- test: 31.197021484375 ms
可以去掉重复的NaN,但是不能去掉重复的复杂数据类型,运行速度快,耗时最少的方法之一,代码最短!
三、可以去掉NaN和复杂数据类型的!
1. filter + hasOwnProperty + JSON.stringify
Array.prototype.unique = function () { let obj = {}; return this.filter(function (item, index, arr) { return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true); });}
- test: 126.3359375 ms
可以去掉重复的NaN和重复的复杂数据类型
在object中,key如果是number类型,它会自动转换成string类型,所以{1:1}和{"1":1}是相等的,这不是这个方法的缺陷,这是Oject的缺陷
而{1: 1}和{1: "1"}这种value值不同的可以正确区分开。
- 该方法的核心:以typeof item元素类型+item的字符串作为key
- 有些文章写的方法是直接使用item,让obj自行隐式转换成字符串
- 考虑到obj的字符串都为'[object Object]',这里使用JSON.stringify(item),就可以保存不同的obj字符串
后记
其实上面的方法不外乎三种:
- 利用for、forEach、filter遍历,再利用indexOf、includes等方法判断是否重复;
- 利用Set数据结构的特性;
- 利用obj或者map的key不能重复的特性。
实际开发应该更多的是纯数字的去重(吧?),而且也用不上这么多方法。能记住两三种根据实际情况的需求来选择就行了(吧?)
但作为一个正在找工作的应届生,不得不总结多几种方法,这样面试官问起来的时候才不至于口哑无言嘿嘿嘿
(完)
es6 数组去重_JS数组去重的9种方法(包括去重NaN和复杂数组类型)相关推荐
- mysql去重的最方便的两种方法_mysql去重的最方便的两种方法
参考资料:http://blog.csdn.net/guocuifang655/article/details/3993612 方法一: 在使用mysql时,有时需要查询出某个字段不重复的记录,虽然m ...
- 去除html重复的元素 js,js数组中去除重复值的几种方法
在日常开发中,我们可能会遇到将一个数组中里面的重复值去除,那么,我就将我自己所学习到的几种方法分享出来 去除数组重复值方法: 1,利用indexOf()方法去除 思路:创建一个新数组,然后循环要去重的 ...
- php判断数组的值是否为空,PHP判断数组是否为空的常用方法(五种方法)
本文介绍了PHP开发中遇到的数组问题,小编在这里给大家总结了5中方法关于php判断数组是否为空问题,需要的朋友参考下 本文介绍了PHP开发中遇到的数组问题,这里介绍了判断PHP数组为空的5种方法,有需 ...
- Java字节数组转换成十六进制字符串的几种方法
前言 最近在项目中需要将字节数组转换成十六进制字符串,而Java内置的库中并没有相关工具可用,因此查了一下byte数组转hex字符串的相关方法,列出如下,需要可以直接拿来使用. 方法1:使用Strin ...
- php删除数组指定的元素,php删除数组中指定值的元素的几种方法
php删除数组中指定值的元素的几种方法 发布时间:2020-11-11 10:44:07 来源:亿速云 阅读:102 作者:小新 这篇文章主要介绍php删除数组中指定值的元素的几种方法,文中介绍的非常 ...
- #Python# 二维数组的定义、使用的几种方法
#Python# 二维数组的定义.使用的几种方法 通常的困扰 1.先介绍最简单的一种方式 2.再介绍最常见的一种方式 3.最后介绍最暴力直观的一种方式 通常的困扰 之前对Python里面创建.使用二维 ...
- 数组去重(驱虫)的两种方法
var text = [1,2,3,"a","a",1,1,2,2,3,3,4,5,5,3,9,"b","b",3] 方 ...
- 易语言删除数组里的指定成员的三种方法
我们想从从数组里删除指定成员的时候,首先要遍历数组, 找到对应的成员名称,然后使用删除成员命令来删除.以下提供了三种思路. 方法一: 窗口程序集名 保 留 保 留 备 注 窗口程序集1 子程序名 返回 ...
- js 判断数组中是否有重复值两种方法
判断数组中是否有重复的值,重复则提示优先级重复 第一种方法 推荐 // 以数组值为键,持续向一个对象里面加值,// 如果在加值之前就发现这个属性在对象中已经存在,那么他就是重复的 function i ...
- JS实现找出数组中重复的数字的三种方法
分享在JS中实现--找出数组中重复数字的方法的三种 法一. 排序比较法 先排序,再通过遍历比较,若相等,则添加到结果数组中,最后对结果数组进行去重,即可得到结果. function getSameNu ...
最新文章
- 获取某个元素相对于视窗的位置-getBoundingClientRect
- 洛谷—— P1869 愚蠢的组合数
- java webservice报文过长_工作1-5年的Java程序猿到底需要怎样的一个技术栈?
- 一些DIV+CSS 命名规范
- android thrift https,HTTPS 学习
- Spring入门篇——第6章 Spring AOP的API介绍
- adpater里写toast_如何在Android中显示Toast?
- 英特尔宣布推出锐炫 A 系列移动端独立显卡
- Jenkins实现测试环境到生产环境一键部署(Windows)
- Linux笔记(一)——虚拟机的安装与Centors安装,安装vmtools,虚拟机的克隆,虚拟机的快照,共享文件的使用
- 基于windows的iOS自动化测试
- (7) PyQt 设计并实现【工厂扫码装箱系统】- Python代码实现BarTender自动化打印条码标签
- appium无法定位元素,TouchAction坐标定位工具
- ':app:clean'. Unable to delete directory:app\build\intermediates
- 物理层的传输介质和设备
- java工程师的薪资真的有那么高吗?
- python括号是中文还是英文_Python括号约定
- 大福利:4000余本数学书下载地址
- coco数据集目标检测论文_做目标检测,这6篇就够了:CVPR 2020目标检测论文盘点...
- 手机拍的试卷打印出来是黑的一片怎么办
热门文章
- android指纹解锁动画,Android指纹解锁示例代码
- ubuntu18.04安装NVIDIA驱动的心酸(失败)经历及解决方法(换系统成功)
- 虚拟机系统 无网络连接网络连接网络连接服务器,Win10虚拟机无法连接网络怎么解决?...
- CSS 伪类选择器 last-child 和 last-of-type 的区别
- 11 Git原理进阶
- python(采用属猪输出斐波拉契数列前30个数,每行输出五个数)
- 杜甫经典长诗“三吏”“三别”赏析
- Python 之 bytes/bytearray 的深入浅出
- java aa 咖啡怎样冲泡_【转】咖啡—冲泡方式
- r7 2700X装Linux,AMD 锐龙 7 2700X 装机