js2个数组对象合并去重
时间: 2024-12-30 22:25:19 浏览: 9
### JavaScript 中合并两个数组对象并去除重复项
在 JavaScript 中,可以通过多种方式实现数组对象的合并与去重操作。下面介绍一种基于 `Set` 和结构解构赋值的方式来进行此操作。
#### 使用 `Set` 对象和扩展运算符 (`...`) 实现简单数值型数组的合并与去重
对于简单的数值类型的数组,可以直接利用 ES6 的特性——`Set` 来轻松完成这一任务[^2]:
```javascript
function unique(arr) {
return [...new Set(arr)];
}
let arr1 = [1, 2, 3];
let arr2 = [3, 4, 5];
console.log(unique([...arr1, ...arr2])); // 输出: [1, 2, 3, 4, 5]
```
然而,在面对更复杂的场景如含有对象的数组时,则需采用不同的策略来确保依据特定字段进行唯一性判断。
#### 针对含对象的数组按指定键名去重
假设存在如下形式的对象数组,并希望根据某个共同属性(例如 id 或 name 字段)作为判定条件执行去重逻辑:
```javascript
const arrayA = [
{id: 1, value: "apple"},
{id: 2, value: "banana"}
];
const arrayB = [
{id: 2, value: "orange"},
{id: 3, value: "grape"}
];
```
此时可借助 `reduce()` 函数配合 Map 数据结构达到目的[^5]:
```javascript
function mergeAndDeduplicateByKey(arrayOne, arrayTwo, keyField){
const map = new Map();
(arrayOne.concat(arrayTwo)).forEach(item => {
if(!map.has(item[keyField])){
map.set(item[keyField], item);
}
});
return Array.from(map.values());
}
// 测试代码片段
const mergedUniqueArray = mergeAndDeduplicateByKey(
[{id: 1, value: "apple"},{id: 2, value: "banana"}],
[{id: 2, value: "orange"},{id: 3, value: "grape"}],
'id'
);
console.log(mergedUniqueArray);
/* 结果应为:
[
{"id": 1,"value":"apple"},
{"id": 2,"value":"banana"},
{"id": 3,"value":"grape"}
]
*/
```
上述例子展示了如何通过自定义函数 `mergeAndDeduplicateByKey` 接收三个参数:待处理的第一个数组、第二个数组以及用于比较的关键字名称。该方法内部创建了一个临时映射表用来存储不重复的数据条目,最后将其转换回标准数组格式返回给调用者。
阅读全文