05.18 JavaScript数组去重的几种方法

一、数组去重的几种方法

1、新建数组法

2、同一个数组删除法

3、利用object/map/set去重法

4、先排序再移除法

5、Filter与indexOf法

二、数组去重代码实现

1、新建数组法,即新建立一个数组,用来存储结果,将原数组项逐个与新数组的成员进行比较,如果新数组中不存在就添加到新数组。时间复杂度:O(n^2)

JavaScript数组去重的几种方法

图1-新建数组去重法

2、同一个数组删除法,两个循环,将数组中的每个元素与其他未与自己比较的元素进行比较,遇到有重复时,将自己删除,并进入下一个循环。这种方式相对效率较高,也不用新数组占用空间。时间复杂度:O(logN)

JavaScript数组去重的几种方法

图2-数组删除去重复从后往前遍历

JavaScript数组去重的几种方法

图3-数组删除去重复从前往后遍历

注意:若是从前往后则需要对length和i进行--处理,因为数组的长度减少了。

3、利用object/map/set去重法,利用数据结构key是唯一的特性和set里不允许重复value来去重,这种方式很讨巧,但是效率也不高。时间复杂度:O(n^2)。

JavaScript数组去重的几种方法

图4-数组去重复Object法

JavaScript数组去重的几种方法

JavaScript数组去重的几种方法

图5-数组去重复Map与Set法

4、先排序再移除法,先将数组排好序,然后从后至前或从前往后逐个与下一个进行比较,如果遇到相同时就删除当前项,进下一个比较。时间复杂度:O(n^2)

JavaScript数组去重的几种方法

图6-数组去重先排序再删除法,自后往前

JavaScript数组去重的几种方法

图7-数组去重先排序再删除法,自前往后

自前往后遍历也要注意相同的问题,即length与i要相应减少。

5、Filter结合IndexOf法,利用indexOf返回数组中第一次出现目标项下标的特点,当内容相同且下标相同表示的就是是不重复的新项,就追加到新数组中,如果查找到但下标不相说明重复了,跳出进行下一个比较。时间复杂度:O(n^2)

最简的方式:a.filter((item, i) => i === a.indexOf(item)),这种写法极简,但是效率不高,不建议这么用。具体原理实现如下:

JavaScript数组去重的几种方法

图8-数组去重indexOf法,continue略微优化

JavaScript数组去重的几种方法

图8-数组去重模拟indexOf法,break略有优化

这两种都比极简法好,极简法是没做任何优化,但因为filer与indexOf都是原生的方法,效率也还可以。

附:filter与indexOf实现源码:

JavaScript数组去重的几种方法

JavaScript数组去重的几种方法

JavaScript数组去重的几种方法


分享到:


相關文章: