es6方法 数组去重 多个数组去重 数组对象去重

本文详细介绍如何使用JavaScript进行数组及对象数组的去重操作,包括单个数组去重、多个数组联合去重、对象数组去重等实用技巧,适用于前端开发中常见的数据处理场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.单个数组的去重
Array.from(new Set(arr))
2.多个数组去重 返回不同数据展示
let a = [1, 2, 3, 4]
let b = [3, 4, 5]
let union = [...new Set([...a, ...b])]
console.log(union)
3.单个数组对象去重
let b = [{ id: '4', result: '第三' }, { id: '2', result: '第四' }, { id: '2', result: '第二' }]
let d = []
let hash = {}
d = b.reduce((item, next) => {
hash[next.id] ? '' : hash[next.id] = true && item.push(next)
return item
}, [])
console.log(d, '看看看')
4.多个数组对象去重  
let jsonArray = [{ id: '1', result: '第一' }, { id: '2', result: '第二' }]
let b = [{ id: '4', result: '第三' }, { id: '3', result: '第四' }, { id: '2', result: '第二' }]
let c = [...jsonArray, ...b] //两个数组合并一个的简单方法
let d = []
let hash = {}
d = c.reduce((item, next) => {
hash[next.id] ? '' : hash[next.id] = true && item.push(next)
return item
}, [])
console.log(d, '看看看')

转载于:https://www.cnblogs.com/yn-cn/p/10876416.html

### 方法一:使用 `Set` 数据结构 ES6 中引入了 `Set` 数据结构,它是一种集合,不允许复值。利用 `Set` 可以非常方便地数组中的复元素。例如: ```javascript let oldArray = [1, 2, 3, 4, 4]; let newArray = [...new Set(oldArray)]; console.log(newArray); // [1, 2, 3, 4] ``` 此方法也适用于字符串: ```javascript let oldStr = 'ababbc'; let newStr = [...new Set(oldStr)].join(''); console.log(newStr); // "abc" ``` 使用 `Set` 的优势在于代码简洁且性能较好,尤其是在处理大量数据时,效率较高[^2]。 --- ### 方法二:结合 `Array.from()` 与 `Set` 除了使用展开运算符 `[...]`,还可以通过 `Array.from()` 方法将 `Set` 转换为数组: ```javascript let list = [1, 2, 3, 4, 5, 2, 499, 155, 66, 72, 666, 5, 2, 5, 6, 5, 55, 15, 56, 24, 5, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]; let set = new Set(list); let newList = Array.from(set); console.log(newList); // [1, 2, 3, 4, 5, 499, 155, 66, 72, 666, 6, 55, 15, 56, 24] ``` 此方法与 `[...]` 类似,但 `Array.from()` 提供了更多的灵活性,比如可以传入映射函数来进一步处理元素[^4]。 --- ### 方法三:使用 `filter()` 和 `indexOf()` 在某些情况下,可能需要兼容不支持 `Set` 的环境,或者希望手动实现逻辑。可以通过 `filter()` 和 `indexOf()` 实现: ```javascript let arr = [1, 2, 2, 3, 4, 4, 5]; let narr2 = []; arr.forEach((item) => { if (narr2.indexOf(item) === -1) { narr2.push(item); } }); console.log(narr2); // [1, 2, 3, 4, 5] ``` 该方法通过遍历数组并检查新数组中是否已存在当前元素,若不存在则添加。虽然代码略显冗长,但在某些特定场景下仍然有效[^3]。 --- ### 方法四:复杂数据结构 对于包含对象数组等复杂数据类型的数组,可以结合 `JSON.stringify()` 和 `Set` 实现: ```javascript let list = [1, 2, 2, "kerwin", "kerwin", [1, 23, [3.4], [1, 2], 3, { name: "kerwin" }, { age: 100 }, { name: "kerwin" }], undefined, undefined, NaN, NaN]; function uni(arr) { let res = new Set(); return arr.filter(item => { let id = JSON.stringify(item); if (res.has(id)) { return false; } else { res.add(id); return true; } }); } console.log(uni(list)); ``` 此方法通过将每个元素序列化为字符串,确保对象数组的深层结构也能被正确识别并[^4]。 --- ### 总结 - **简单数组**:推荐使用 `Set` 或 `[...new Set(array)]`。 - **复杂数组**:可结合 `JSON.stringify()` 和 `Set`。 - **兼容性考虑**:在不支持 `Set` 的环境中,可以使用 `filter()` 和 `indexOf()`。 每种方法都有其适用场景,开发者可根据具体需求选择最合适的实现方式。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值