在真实的项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重。虽然日常项目用到的概率比较低,但还是需要了解一下
一、[...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 判断是否存在对象属性
五、利用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()排序方法,然后根据排序后的结果进行遍历及相邻元素比对,不推荐,针对全是数字的数组。
测试如下图