JavaScript数组去重(12种方法)

点击右上方红色按钮关注“web秀”,让你真正秀起来

前言

数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看。

在真实的项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重。虽然日常项目用到的概率比较低,但还是需要了解一下,以防面试的时候可能回被问到。

JavaScript数组去重(12种方法)

JavaScript数组去重(12种方法)


数组去重的方法

一、利用ES6 Set去重(ES6中最常用)


JavaScript数组去重(12种方法)

ES6 Set去重(ES6中最常用)

不考虑兼容性,这种去重的方法代码最少。这种方法还无法去掉“{}”空对象,后面的高阶方法会添加去掉重复“{}”的方法。


二、利用for嵌套for,然后splice去重(ES5中最常用)


JavaScript数组去重(12种方法)

splice去重

双层循环,外层循环元素,内层循环时比较值。值相同时,则删去这个值。


三、利用indexOf去重


JavaScript数组去重(12种方法)

indexOf去重

新建一个空的结果数组,for 循环原数组,判断结果数组是否存在当前元素,如果有相同的值则跳过,不相同则push进数组。


四、利用sort()


JavaScript数组去重(12种方法)

sort()

利用sort()排序方法,然后根据排序后的结果进行遍历及相邻元素比对。


五、利用对象的属性不能相同的特点进行去重

JavaScript数组去重(12种方法)

对象的属性不能相同的特点进行去重


六、利用includes


JavaScript数组去重(12种方法)

includes


七、利用hasOwnProperty


JavaScript数组去重(12种方法)

hasOwnProperty

利用hasOwnProperty 判断是否存在对象属性


八、利用filter


JavaScript数组去重(12种方法)

filter


九、利用递归去重

JavaScript数组去重(12种方法)

递归去重


十、利用Map数据结构去重

JavaScript数组去重(12种方法)

Map数据结构去重

创建一个空Map数据结构,遍历需要去重的数组,把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值,所以最终得到的就是去重后的结果。


十一、利用reduce+includes

JavaScript数组去重(12种方法)

reduce+includes


十二、[...new Set(arr)]

[...new Set(arr)]


代码就是这么少----(其实,严格来说并不算是一种,相对于第一种方法来说只是简化了代码)

公告


分享到:


相關文章: