ES6 Set() 数组去重

ES6 Set()去重
Set。它类似于数组,但是成员的值都是唯一的
通过add()方法向 Set 结构加入成员

let arr = [1,2,3,4,1,5,2,3];
var set2 = new Set();
arr.forEach(item=>{
	set2.add(item)
})
console.log(set2);
console.log(Array.from(set2));

let str = ['测试1','测试2','测试2','测试1','测试3'];
var set = new Set();
str.forEach(item=>{
	set.add(item)
})
console.log(set);
console.log(Array.from(set));

数据如下:
在这里插入图片描述

Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。


const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

// 去除数组的重复成员
[...new Set(array)]

[... new Set('abcdefgabc')]
// ["a", "b", "c", "d", "e", "f", "g"]

[... new Set('abcdefgabc')].join(',')
// a,b,c,d,e,f,g
### 使用 ES6 实现数组ES6 中,可以通过多种方式实现数组。以下是几种常见且高效的方法: #### 方法一:使用 `Set` 和扩展运算符 通过创建一个新的 `Set` 对象并将其转换回数组的方式可以轻松实现数组。这种方法简单直观,并适用于大多数基本数据类型的数组。 ```javascript const arr = [1, 2, 3, 4, 4, 5, 5, 6, 6]; const uniqueArr = [...new Set(arr)]; console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5, 6] ``` 此方法利用了 `Set` 的特性——它会自动移除复项[^1]。 --- #### 方法二:使用 `forEach` 和 `includes` 另一种常用的手动实现方式是遍历原数组并将未出现过的元素加入新数组中。这种方式虽然稍显冗余,但在某些场景下仍然适用。 ```javascript Array.prototype.unique = function () { let newArr = []; this.forEach((item) => { if (!newArr.includes(item)) { newArr.push(item); } }); return newArr; }; const arr = [1, 2, 3, 4, 4, 5, 5, 6, 6]; const uniqueArr = arr.unique(); console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5, 6] ``` 该方法能够正确处理 `NaN` 值的问题[^2]。 --- #### 方法三:针对对象数组(基于特定键) 当需要对包含对象的数组进行时,可以根据某个唯一字段(如 `id`)来进行操作。这里介绍两种主流方法:`Map` 结合过滤器以及 `reduce()` 函数。 ##### 子方法 A:使用 `Map` 进行 借助 `Map` 数据结构存储已访问的对象键值对,从而快速判断是否已经存在相同记录。 ```javascript var person = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Charlie' }, // 需要 ]; var m = new Map(); person = person.filter((ele) => !m.has(ele.id) && m.set(ele.id, "")); console.log(person); // 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] ``` 上述代码片段展示了如何依据对象中的 `id` 字段完成过程[^3]。 ##### 子方法 B:使用 `reduce()` 实现 除了 `Map` 外,还可以采用累加器模式来构建无复的结果集。 ```javascript var person = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Charlie' }, // 需要 ]; const uniquePerson = person.reduce((acc, cur) => { const x = acc.find(item => item.id === cur.id); if (!x) { return acc.concat([cur]); } else { return acc; } }, []); console.log(uniquePerson); // 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] ``` 这种逻辑清晰易懂,适合初学者学习掌握[^5]。 --- #### 总结 以上列举了几种典型的 ES6 数组方案,每一种都有其特点和局限性。对于基础类型数组推荐优先考虑 `Set` 方式因其简洁性和高性能表现;而对于复杂嵌套或者对象形式的数据,则需结合具体需求选取合适的工具链路加以解决。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值