0. new Set 的不适用
项目中需要将一个对象数组去重,一般的数组去重可以直接用 new Set() 方法即可,但是对象数组的话,因为每一个元素都是引用类型比较复杂,使用new Set 无法进行去重,代码如下所示:
var arr1 = ["张三","李四","王五","张三"]
var arr2 = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":1,"name":"王五"},{"id":1,"name":"张三"}];
console.log(new Set(arr1));
console.log(new Set(arr2));
结果如下:可以看出,new Set去重对于对象数组并不适用。
我们可以采取以下三种方法来去重对象数组
注:以下都是根据标识id属性进行去重
1. 常规for循环遍历
var arr = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"},{"id":2,"name":"张三"}];
var result = [];
var obj = {};
for(var i =0; i<arr.length; i++){
if(!obj[arr[i].id]){
result.push(arr[i]);
obj[arr[i].id] = true;
}
}
console.log(result);
2. new Map
var arr = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"},{"id":2,"name":"张三"}];
function unique(arr) {
// 创建一个Map对象实例
const res = new Map()
// 过滤条件:如果res中没有某个键,就设置这个键的值为1
return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
}
console.log(unique(arr));
注意:键值是多少不重要,主要是利用map结构去重,因为map中的key是唯一的。
3. reduce
//reduce第一个参数是遍历需要执行的函数,第二个参数是item的初始值
var arr = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"},{"id":2,"name":"张三"}];
var obj = {};
arr = arr.reduce(function(item, next) {
obj[next.id] ? '' : obj[next.id] = true && item.push(next);
return item;
}, []);
console.log(arr);