1. 双层循环法配合splice或布尔标记:
- 双层循环遍历数组,第一层循环的元素与后续所有元素比较,如果发现重复则删除。
- 这种方法会直接修改原数组,不推荐在需要保持原始数组不变的情况下使用
for (let i = 0; i < array.length; i++) {
for (let j = i + 1; j < array.length; j++) {
if (array[i].id === array[j].id) {
array.splice(j, 1);
j--; // 由于数组长度已变,需要回溯一位避免跳过下一个元素
}
}
}
2. reduce方法
- 使用reduce()函数遍历数组,并检查新数组中是否存在相同标识符的对象。
array.reduce((acc,cur)=>{
let isExist = acc.find(item=>item.id === current.id)
if(!isExist){
acc.push(current)
}
return acc;
},[])
3. 使用Map数据结构:
- 创建一个Map对象。
- 遍历数组中的每个对象,将对象的唯一标识符(如id)作为键存入Map中。如果Map中没有这个键,则添加该对象到新的数组中。
- has 判断数组中是否存在id 返回布尔值
let array = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Charlie' },
];
let map = new Map();
let uniqueArray = [];
array.forEach(obj => {
if (!map.has(obj.id)) {
map.set(obj.id, obj);
uniqueArray.push(obj);
}
});
4. lodash库的uniqBy函数:
- 虽然不是纯JavaScript内置的方法,但 lodash 库提供了一个便捷的 _.uniqBy 函数来处理这个问题。
let array = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' },
{ id: 3, name: 'LiLi' },
];
let newArr = $lodash.uniqBy(array, 'id');
console.log(newArr)
//输出: [
// { id: 1, name: 'Alice' },
//{ id: 2, name: 'Bob' },
//{ id: 3, name: 'LiLi' },
];