您的位置 首页 php

JS数组去重的9种方法(包括去重NaN和复杂数组类型)

测试代码

 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字符串

后记

其实上面的方法不外乎三种:

  1. 利用for、forEach、filter遍历,再利用indexOf、includes等方法判断是否重复;
  2. 利用Set数据结构的特性;
  3. 利用obj或者map的key不能重复的特性。

实际开发应该更多的是纯数字的去重(吧?),而且也用不上这么多方法。能记住两三种根据实际情况的需求来选择就行了(吧?)
但作为一个正在找工作的应届生,不得不总结多几种方法,这样面试官问起来的时候才不至于口哑无言嘿嘿嘿
(完)

文章来源:智云一二三科技

文章标题:JS数组去重的9种方法(包括去重NaN和复杂数组类型)

文章地址:https://www.zhihuclub.com/34907.shtml

关于作者: 智云科技

热门文章

网站地图