JavaScript学习笔记(十四)：ES6 Set函数详解

Set函数的基本概念

Set是ES6引入的一种新的数据结构，类似于数组，但成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。

通过new Set()可以创建一个新的Set实例：

const set = new Set();

---

常用方法与属性

add(value) 向Set实例添加一个值，返回Set结构本身，因此可以链式调用：

set.add(1).add(2).add(3);

delete(value) 删除Set实例中的某个值，返回一个布尔值表示是否删除成功：

set.delete(1); // true

has(value) 判断Set实例中是否包含某个值，返回布尔值：

set.has(2); // true

clear() 清除Set实例中的所有成员，没有返回值：

set.clear();

size属性 返回Set实例的成员总数：

set.size; // 0

---

遍历操作

Set实例有四个遍历方法，可以用于遍历成员：

keys() 返回键名的遍历器：

for (let item of set.keys()) {console.log(item);
}

values() 返回键值的遍历器：

for (let item of set.values()) {console.log(item);
}

entries() 返回键值对的遍历器：

for (let item of set.entries()) {console.log(item);
}

forEach() 使用回调函数遍历每个成员：

set.forEach((value, key) => {console.log(key, value);
});

---

应用场景

1. 数组去重

利用Set的唯一性可以快速实现数组去重：

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

2. 字符串去重：

const str = 'abacad';
const uniqueStr = [...new Set(str)].join('');

3. DOM元素集合去重：

const elements = [...document.querySelectorAll('div')];
const uniqueElements = new Set(elements);

4. 存储唯一值 

在需要存储不重复的数据时，Set 比数组更高效，例如存储用户 ID、标签等。

const userIds = new Set();
userIds.add(1001).add(1002).add(1001);
console.log(userIds.size); // 2

5. 集合运算

可以模拟数学中的集合运算，如并集、交集、差集等：

const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);// 并集
const union = new Set([...a, ...b]); // Set {1, 2, 3, 4}// 交集
const intersect = new Set([...a].filter(x => b.has(x))); // Set {2, 3}// 差集
const difference = new Set([...a].filter(x => !b.has(x))); // Set {1}

---

注意事项

NaN 的处理
Set 认为 NaN 等于 NaN，尽管在 JavaScript 中 NaN !== NaN。

const set = new Set();
set.add(NaN);
set.add(NaN);
console.log(set.size); // 1

对象引用
Set 中的对象是引用类型，即使内容相同，也会被视为不同的值。

const set = new Set();
set.add({});
set.add({});
console.log(set.size); // 2

遍历顺序
Set 的遍历顺序就是插入顺序，可以用 forEach 或 for...of 遍历。

const set = new Set([1, 2, 3]);
set.forEach(value => console.log(value));
for (const value of set) {console.log(value);
}

---

优化建议

替代数组查找： 当需要频繁检查某个值是否存在时，使用Set的has方法比数组的indexOf或includes更高效。

大数据量去重： 对于大规模数据去重操作，Set的性能明显优于传统数组遍历方法。

内存优化： 在只需要存储唯一值的场景下，使用Set比数组更节省内存空间。

遍历优化： Set提供了keys()、values()和entries()方法用于遍历，比数组遍历在某些场景下更高效。

---

总结

ES6的Set数据结构为解决数据唯一性问题提供了原生支持，其特点是值唯一、操作高效。在去重、集合运算等场景下表现优异，相比传统数组方法有显著性能优势。

Set与Map类似，但更关注值本身的唯一性而非键值对关系。在实际开发中，合理使用Set可以简化代码逻辑，提高运行效率，特别是在处理大数据量和频繁查找的场景下。