js中数组对象去重的几种方式
- 1、方法一:双层for循环
- 2、对象访问属性的方法
- 3、Map()方法
- 4、reduce方法
首先我们定义数组的形式
let arrObj = [
{ name: "张三", key: '1' },
{ name: "李四", key: '2' },
{ name: "王五", key: '3' },
{ name: "张三", key: '1' },
{ name: "李四", key: '2' }
];
需求:把key值相同的对象删掉,下面是想要的结果
1、方法一:双层for循环
两两比较,如果后一个对象的key值和前一个对象的key值相等,就把后面的对象删除。
let arrObj = [
{ name: "张三", key: '1' },
{ name: "李四", key: '2' },
{ name: "王五", key: '3' },
{ name: "张三", key: '1' },
{ name: "李四", key: '2' }
]
function uniqueArr (arr) {
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[i].key == arr[j].key) {
arr.splice(j, 1)
j--
}
}
}
return arr
}
console.log(uniqueArr(arrObj));
2、对象访问属性的方法
采用对象访问属性的方法,判断属性值是否存在。
let arrObj = [
{ name: "张三", key: '1' },
{ name: "李四", key: '2' },
{ name: "王五", key: '3' },
{ name: "张三", key: '1' },
{ name: "李四", key: '2' }
]
function uniqueArr (arr) {
var result = []
var obj = {}
for (var i = 0; i < arr.length; i++) {
if (!obj[arr[i].key]) {
result.push(arr[i])
obj[arr[i].key] = true
}
}
return result
}
console.log(uniqueArr(arrObj));
3、Map()方法
has方法可以判断Map对象中是否存在指定元素,有则返回true,否则返回false
set方法可以向Map对象添加新元素 map.set(key, value)
values方法可以返回Map对象值的遍历器对象
let arrObj = [
{ name: "张三", key: '1' },
{ name: "李四", key: '2' },
{ name: "王五", key: '3' },
{ name: "张三", key: '1' },
{ name: "李四", key: '2' }
]
// 方法一:
let map = new Map()
for (let item of arrObj) {
if (!map.has(item.key)) {
map.set(item.key, item)
};
};
arr = [...map.values()]
console.log(arr)
// 方法二: (代码较为简洁)
const map = new Map()
const newArr = arrObj.filter(v => !map.has(v.key) && map.set(v.key, 1))
console.log(newArr);
4、reduce方法
let arrObj = [
{ name: "张三", key: '1' },
{ name: "李四", key: '2' },
{ name: "王五", key: '3' },
{ name: "张三", key: '1' },
{ name: "李四", key: '2' }
]
var obj = {}
arrObj = arrObj.reduce(function (item, next) {
obj[next.key] ? '' : obj[next.key] = true && item.push(next)
return item
}, [])
console.log(arrObj);