JS实现数组去重总结

在真实的项目中碰到的数组去重，一般都是后台去处理，很少让前端处理数组去重。虽然日常项目用到的概率比较低，但还是需要了解一下

一、[...new Set(arr)]

      [...new Set(arr)] //利用Set数据结构不存在重复值的特性，转化为Set类数组去重，通过‘...’扩展运算符将lei数组转为数组

二、利用ES6 Set去重（ES6中最常用）

function unique(arr) {

return Array.from(new Set(arr))

}

let arr = [1,'true', true,null, NaN,'NaN',0, 'a',{},1,'true', true,null, NaN,'NaN',0, 'a',{}]

console.log(unique(arr))

 

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

 测试结果如下

 

        

三、利用filter

function unique(arr) {

return arr.filter(function(item, index,arr){

return arr.indexOf(item, 0) === index;

});

}

let arr = [1,1, 4,5,5, 4,'NaN',0, 'a',{},1,'true', true,null, NaN,'NaN',0, 'a',{}]

console.log(unique(arr))

测试结果如下

 

 

 

四、利用hasOwnProperty

function unique(arr) {

var obj = {}

return arr.filter(function(item, index,arr){

return obj.hasOwnProperty(typeof item + item)? false: (obj[typeof item+item] = true);

});

}

let arr = [1,1, 4,5,5, 4,'NaN',0, 'a',{},1,'true', true,null, NaN,'NaN',0, 'a',{}]

console.log(unique(arr))

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

 

 

 

四、利用Map数据结构去重

function unique(arr) {

let map = new Map();

let array = new Array(); //数组用于返回结果

for (let i = 0; i < arr.length; i++){

if(map.has(arr[i])){ // 如果有该key值

map.set(arr[i], true)

} else {

map.set(arr[i],false);

array.push(arr[i]) // 如果没有该key值

  }

}

return array

}

let arr = [1,1,4,5,5, 4,'NaN',0, 'a',{},1,'true', true,null, NaN,'NaN',0, 'a',{}]

console.log(unique(arr))

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

 

 

 

 

五、利用for嵌套for，然后splice去重（ES5中最常用）

function unique(arr) {

for(let i=0; i<arr.length;i++){

for(let j=i+1; j<arr.length; j++){

if(arr[i] == arr[j]){ //第一个等同于第二个，splice方法删除第二个

arr.splice(j,1);

j--;

}

}

}

return arr

}

let arr = [1,'true', true,null, NaN,'NaN',0, 'a',{},1,'true', true,null, NaN,'NaN',0, 'a',{}]

console.log(unique(arr))

 

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

 

 运行如下图

 

六、利用indexOf去重

function unique(arr) {

if(!Array.isArray(arr)){

console.log('type error')

return

}

let array = []

for(let i=0; i<arr.length;i++){

if (array.indexOf(arr[i]) === -1){

array.push(arr[i])

}

}

return array;

}

let arr = [1,'true', true,null, NaN,'NaN',0, 'a',{},1,'true', true,null, NaN,'NaN',0, 'a',{}]

console.log(unique(arr))

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

 运行结果如下，依然无法去掉{}空对象

  

 

 

七、利用sort()

function unique(arr) {

if(!Array.isArray(arr)){

console.log('type error')

return

}

arr = arr.sort()

let array = [arr[0]]

for(let i= 1; i<arr.length;i++){

if (arr[i] !== arr[i-1]){

array.push(arr[i])

}

}

return array;

}

let arr = [1,1, 4,5, 4,'NaN',0, 'a',{},1,'true', true,null, NaN,'NaN',0, 'a',{}]

console.log(unique(arr))

利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对，不推荐，针对全是数字的数组。

测试如下图 

 

 

转载于:https://www.cnblogs.com/chiyuluo/p/10057950.html