1、ES6的Set方法去重
new Set是ES6新推出的一种类型。它和数组的区别在于,Set类型中的数据不可以有重复的值。当然,数组的一些方法Set也无法调用。
使用方法:将一个数组转化为Set数据,再转化回来,就完成了去重。
const arr = [1,1,2,2,3,3,4,4,5,5];
const setData = Array.from(new Set(arr));
console.log(setData);//[1,2,3,4,5]
注意:Set去重有一个弊端,它无法去重引用类型数据,只能是值类型的数据(比如全是string或者全是number)
2、indexOf去重
const unique=(arr)=>{
let repeatArr = [];
for(let i = 0,len = arr.length; i < len; i++){
if (repeatArr.indexOf(arr[i]) === -1)
repeatArr.push(arr[i])
return repeatArr
}
}
unique([1,1,2,2,3,3])
// [1,2,3]
注意:这个方法也有一个细节点,您或许已经发现了,上文的if 和 for 没有花括号;是的;for 和 if 都默认对下面一条语句负责。在没有必要的情况下,不用多加一个{}。
3、includes去重
使用includes的去重方法和indexOf不能说很像,基本上一模一样。变换的仅仅只是判断方法。
includes的判断方法更简单了,循环数组的每一样,用新数组检测当前数组中是否包含数组项,如果不包含,则追加该元素。
const handleRemoveRepeat = (arr) =>{
let repeatArr = [];
for(let i = 0, len = arr.length; i < len; i++)
if(!repeatArr.includes(arr[i]))
repeatArr.push(arr[i])
return repearArr;
}
4、filter去重
const unique = (arr) => arr.filter((item,index) => arr.indexOf(item,0)===index);
unique([1,1,2,2,3,3,4,4])
//[1,2,3,4]
indexOf 的特性是返回被查找的目标中包含的第一个位置的索引
[1,2,3,4,1].indexOf(1)
//0
下标为0和下标为4的位置存储的都是“1”。但是indexOf()只返回了0。因为indexOf 的特性是返回被查找的目标中包含的第一个位置的索引,我们可以利用这个特性来完成去重。
5、ES5常用:双重for循环,然后splice去重
var arr = [10, 20, 30, 10, 20, 30, 10, 100, 2, 3];
function uniqArr(arr) {
//遍历数组中的每一个元素
for (var i = 0; i < arr.length; i++) {
//获取索引i之后的所有的数组元素
for (var j = i + 1; j < arr.length; j++) {
//使用索引为i的元素与后面的元素一个个的作比较,遇到相同的就删除
if (arr[i] == arr[j]) {
arr.splice(j, 1);//删除重复元素
j--;
}
}
}
return arr;
}
console.log(uniqArr(arr));
6、Map()
has方法可以判断Map对象中是否存在指定元素,有则返回true,否则返回false
set方法可以向Map对象添加新元素map.set(key,value)
values方法可以返回Map对象值的遍历器对象
let arrObj = [
{ name: "小红", id: 1 },
{ name: "小橙", id: 1 },
{ name: "小黄", id: 4 },
{ name: "小绿", id: 3 },
{ name: "小青", id: 1 },
{ name: "小蓝", id: 4 }
]
//方法一:
let map = new Map();
for(let item of arrObj){
if(!map.has(item.id)){
map.set(item.id,item);
}
};
arr=[...map.values()];
console.log(arr);
//方法二:
const map =new Map()
const newArr= arrObj.filter(v=> !map.has(v.id) && map.set(v.id, 1));
console.log(newArr)
JS对象数组去重
1、使用reduce
例1:
function uniqueFun(arr,uniId){
let hash = {}
return arr.reduce((accum,item) =>{
hash[item[unId]] ?‘’ :hash[item[uniId]] = true && accum.push(item)
return accum
},[])
}
例2:
var arrData = [
{id: , name: "小明"},
{id: , name: "小张"},
{id: , name: "小李"},
{id: , name: "小孙"},
id: , name: "小周"},
{id: , name: "小陈"},
];
var obj = {}
val cur =[]
arrData = arrData.reduce((cur,next) =>{
obj[next.id] ? "" :obj[next.id] = true && cur.push(next);
return cur;
},[])
console.log(arrData)
2、使用filter和Map(强烈推荐)
function unique(arr,uniId){
const res = new Map()
return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1))
}