数组对象去重js
时间: 2023-06-21 12:10:22 浏览: 130
可以使用 Set 数据结构来去重数组对象,然后将 Set 转换回数组即可。
例如:
```javascript
const arr = [
{ id: 1, name: "John" },
{ id: 2, name: "Jane" },
{ id: 1, name: "John" },
{ id: 3, name: "Sarah" },
];
const uniqueArr = Array.from(new Set(arr.map((item) => item.id))).map((id) =>
arr.find((item) => item.id === id)
);
console.log(uniqueArr);
```
这段代码首先使用 `map` 方法将原数组中的每个对象转换为它们的 `id` 值,并用 `Set` 去重。然后通过 `Array.from` 将 `Set` 转换为数组,再使用 `map` 方法找到原数组中对应的对象,最终返回的就是去重后的数组对象。
相关问题
js数组对象去重
可以使用 Set 数据结构来实现数组对象去重。具体实现如下:
```javascript
const arr = [
{ id: 1, name: 'Tom' },
{ id: 2, name: 'Jerry' },
{ id: 1, name: 'Tom' },
{ id: 3, name: 'Lucy' }
];
const set = new Set(arr.map(JSON.stringify));
const newArr = Array.from(set).map(JSON.parse);
console.log(newArr);
// Output: [{ id: 1, name: 'Tom' }, { id: 2, name: 'Jerry' }, { id: 3, name: 'Lucy' }]
```
上述代码中,先使用 `map` 方法将每个对象转换为字符串形式,然后将其作为 Set 的元素,这样就可以去重了。最后再将 Set 转换为数组,并使用 `map` 方法将字符串转换为对象形式即可得到去重后的数组。
js 数组对象去重
### JavaScript 中数组对象去重的方法
在 JavaScript 中,对于数组对象的去重操作有多种实现方式。以下是几种常见的方法:
#### 方法一:使用 `reduce` 和辅助对象
通过 `reduce` 方法可以遍历整个数组并构建一个新的无重复项的结果集。此过程中可以通过一个临时对象来记录已经存在的键值。
```javascript
let newObj = {};
const repeatData = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' }
];
repeatData = repeatData.reduce((preVal, curVal) => {
newObj[curVal.id] ? '' : newObj[curVal.id] = true && preVal.push(curVal);
return preVal;
}, []);
console.log(repeatData, 'repeatData');
```
这种方法的核心在于利用了一个外部的对象 `newObj` 来存储已处理过的唯一标识符(如 `id`),从而避免重复数据被加入最终结果集中[^1]。
---
#### 方法二:基于 ES6 的 `Set` 结构与自定义逻辑
虽然原生的 `Set` 只能用于简单类型的去重,但对于复杂对象也可以借助其特性配合其他手段完成目标。
```javascript
const arr = [
{ name: 'zhangsan', age: 12 },
{ name: 'lisi', age: 14 },
{ name: 'zhangsan', age: 12 },
{ name: 'lisi', age: 14 },
{ name: 'zhangsan', age: 12 }
];
function uniqueByProperty(array, propertyKey) {
const seen = new Set();
return array.filter(item => {
const value = item[propertyKey];
if (seen.has(value)) {
return false;
} else {
seen.add(value);
return true;
}
});
}
const result = uniqueByProperty(arr, 'name');
console.log(result);
```
这里我们创建了一个名为 `uniqueByProperty` 的通用工具函数,它接受两个参数——待过滤的数组以及作为区分依据的关键字段名称。内部则运用到了集合类型 `Set` 来追踪哪些属性已经被遇到过[^2]。
---
#### 方法三:Map 数据结构的应用
另一种优雅的方式是采用 `Map` 这种高效的数据容器来进行快速查表式的判定工作。
```javascript
/**
* @description: 对象数组去重
* @param arr 要去重的数组
* @param key 根据某一个属性去重
* @return 去重后的数组
*/
function removeSame(arr, prop) {
let map = new Map(); // 创建新的映射实例
for (let item of arr) {
!map.has(item[prop]) && map.set(item[prop], item); // 如果当前prop对应的值未存在,则存入
}
return [...map.values()]; // 将所有value取出形成新数组返回
}
const data = [
{ id: 1, name: 'Tom' },
{ id: 2, name: 'Jerry' },
{ id: 1, name: 'Tom' }
];
console.log(removeSame(data, 'id'));
```
上述代码片段展示了如何定义一个专门用来解决此类问题的小型库函数 `removeSame()` ,该函数接收原始数组及其指定属性名作输入,并输出经过适当筛选后的新列表[^3]。
---
### 性能对比分析
每种方案都有各自的优缺点,在实际项目开发当中可以根据具体需求场景灵活选用最合适的那一种。比如当关注点放在执行效率上时可能更倾向于选择第三种;而如果追求简洁明了的话第二种也不失为一个好的选项。
---
阅读全文
相关推荐















