最近项目闲下来了,恶补基础知识,把ES6的一些语法都好好看了一遍(没错,读了个标题)。
结合自己的代码,回想以前我为数组去重写过的 forEach、filter、indexOf的哪些语法``,现在想想,终究是错付了。就像爱情,没有遇到合适的一样, new Set() 才是我的白马王子。
初识new Set
第一次遇见Set ,我还没有什么感觉,MDN是这么介绍的:Set 是 ECMAScript 2015(ES6)引入的一种 集合类型,它是一个 值的集合,其中的值是唯一的,即集合中不会有重复的值。
我没有什么感觉,以为它只是个去重工具,也就那样吧。
基本语法
const mySet = new Set([iterable]);
iterable:可迭代对象(如数组、字符串、NodeList 等),其中的元素将作为初始值添加到 Set 中。
基础示例
const set = new Set([1, 2, 3, 3]);
console.log(set); // Set(3) {1, 2, 3}
Set 的实例方法
方法 | 用法 | 说明 |
---|---|---|
add(value) | set.add(1) | 添加值,重复自动忽略 |
has(value) | set.has(1) | 判断值是否存在 |
delete(value) | set.delete(1) | 删除值 |
clear() | set.clear() | 清空所有值 |
size | set.size | 元素个数 |
[...set] | 展开成数组 | 用于转换或遍历 |
forEach(cb) | 遍历每个值 | 类似数组的 forEach |
为什么我现在爱上 new Set()?
但是,后来,我被它那迷人的简洁和温柔所折服,它的写法与强大是让人心动感觉!
自动去重 + 顺序保留
const arr = [1, 2, 2, 3];
const unique = [...new Set(arr)];
// [1, 2, 3]
一行解决以前几行都未必写对的问题。
查找唯一值高效、清晰
相比 filter 搭配 indexOf 查唯一值,Set 拿出来就能判断有没有,优雅至极
const set = new Set();
set.add('foo');
set.has('foo'); // true
天生就是集合,不是数组!
可以直接做交集、并集、差集,这才是真正意义上的“集合操作”:
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
// 交集
const intersect = [...a].filter(x => b.has(x));
// [2, 3]
以前总得自己套两层循环,现在直接 .has() 就完了,干净利落!
new Set() 为我的付出
和new Set相处久了,我越来越离不开它,在很多场合,我都需要它:
数组去重最简单
const arr = [1, 2, 2, 3];
const unique = [...new Set(arr)];
字符串去重(保持顺序)
const uniqueChars = [...new Set('aabbcc')].join('');
// 'abc'
判断是否有重复元素
function hasDup(arr) {
return arr.length !== new Set(arr).size;
}
多数组合并去重(并集)
const a = [1, 2];
const b = [2, 3];
const union = [...new Set([...a, ...b])];
// [1, 2, 3]
做缓存池:确保每个任务只执行一次
const done = new Set();
function runOnce(id, fn) {
if (done.has(id)) return;
done.add(id);
fn();
}
基于字段的对象去重
const users = [
{ id: 1, name: 'a' },
{ id: 2, name: 'b' },
{ id: 1, name: 'c' },
];
const seen = new Set();
const dedup = users.filter(u => {
if (seen.has(u.id)) return false;
seen.add(u.id);
return true;
});
new Set的专一
new Set是专一的,它的内心只能有唯一的存在
Set 对象里,相同引用才算同一个:
const a = { x: 1 };
const b = { x: 1 };
new Set([a, b]).size; // 2,因为引用不同
NaN 在 Set 里是“相等”的:
new Set([NaN, NaN]).size; // 1
我就知道,它只忠诚于我!
写在最后
爱,或许就像写代码。
forEach 和 filter 的确帮我做了很多事情,它们频繁出现在我的代码里,兢兢业业、无怨无悔。可我得承认,那不是爱,那只是习惯。
直到我遇见了 Set——它不常出现,却总能在关键时刻,优雅地解决问题,让人心安。它简洁、高效、不啰嗦,仿佛天生就是为“唯一”而存在。
作者:快乐就是哈哈哈
链接:https://juejin.cn