1. ES6's Set method deduplication
new Set is a new type introduced by ES6. The difference between it and an array is that the data in the Set type cannot have duplicate values. Of course, some methods Set of the array cannot be called.
How to use : Convert an array to Set data, and then convert it back, to complete the deduplication.
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]
Note: Set deduplication has a drawback, it cannot dereference type data, it can only be value type data (such as all string or all number)
2. indexOf deduplication
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]
Note: This method also has a detail point. You may have discovered that the above if and for do not have curly braces; yes; both for and if are responsible for the following statement by default. If it is not necessary, do not add an extra {}.
3. includes deduplication
The deduplication method using includes is not very similar to indexOf, basically the same. What is changed is only the method of judgment.
The judging method of includes is simpler. Loop through each item in the array, use the new array to check whether the current array contains an array item, and if not, add the element.
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 deduplication
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]
The indexOf property returns the index of the first position contained in the object being looked up
[1,2,3,4,1].indexOf(1)
//0
The locations with the subscript 0 and the subscript 4 both store "1". But indexOf() just returns 0. Because the feature of indexOf is to return the index of the first position contained in the searched target, we can use this feature to complete deduplication.
5. ES5 is commonly used: double for loop, and then splice to deduplicate
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()
The has method can determine whether the specified element exists in the Map object, and return true if there is, otherwise return false
The set method can add new elements to the Map object map.set(key,value)
The values method can return the traverser object of the Map object value
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 object array deduplication
1. Use 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. Use filter and Map (strongly recommended)
function unique(arr,uniId){
const res = new Map()
return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1))
}