js如何快速去除数组空值：JS数组去重的9种方法

小君 2023-02-02 07:26:42 669

js如何快速去除数组空值：JS数组去重的9种方法不能去掉重复的复杂数据类型，同时还会去掉所有的NaNArray.prototype.unique = function () { return this.filter((item index) => { // 利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等，如果不等则说明该元素是重复元素 return this.indexOf(item) === index; }) } test: 5682.358154296875 msArray.prototype.unique = function () { let newArr = []; this.forEach((item) => { if (newArr.indexOf(item) === -1) {

其实网上已经有很多js数组的去重方法，但是我看了很多篇并自己通过代码验证，发现都有一些缺陷，于是在研究多篇代码之后，自己总结了9种方法，如果有哪里不对请及时纠正我哈~

js如何快速去除数组空值：JS数组去重的9种方法(1)

测试代码

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; }

js如何快速去除数组空值：JS数组去重的9种方法(2)

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

js如何快速去除数组空值：JS数组去重的9种方法(3)

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; }

js如何快速去除数组空值：JS数组去重的9种方法(4)

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

js如何快速去除数组空值：JS数组去重的9种方法(5)

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; }

js如何快速去除数组空值：JS数组去重的9种方法(6)

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

js如何快速去除数组空值：JS数组去重的9种方法(7)