1. Set
Set
有点类似数组,但是Set
和数组最大的不同在于Set
中不能存在相同的元素。
new Set([1,2,3,4,1,2,3,4]); // { 1, 2, 3, 4 }
其次,Set
的内置函数也没有数组那么丰富。主要有:add()
、has()
、delete()
、clear()
、keys()
、values()
、entries()
、forEach()
// 1、初始化 Set
const set = new Set();
// 2、添加值
set.add(1);
set.add(2);
set.add(3).add(4); // Set(4) {1, 2, 3, 4}
// 3、删除值
set.delete(1); // true
console.log(set); // Set(3) {2, 3, 4}
// 4、查找值
set.has(3); // true
set.has(1); // false
// 5、清空 Set
set.clear();
console.log(set); // Set(0) {}
// 6、遍历 Set
set = new Set([1,2,3,4]);
for (const key of set.keys()) {
console.log(key);
}
/*
* 1
* 2
* 3
* 4
*/
for (const value of set.values()) {
console.log(value);
}
/*
* 1
* 2
* 3
* 4
*/
for (const item of set.entries()) {
console.log(item);
}
/*
* [1,1]
* [2,2]
* [3,3]
* [4,4]
*/
// 注意:values()为默认迭代方法,keys()为values()方法的别名
set.values === set[Symbol.iterator] === set.keys
// 因此可以直接这么用
for (const val of set) {
console.log(val);
}
/*
* 1
* 2
* 3
* 4
*/
// 也可以使用forEach()方法遍历,使用方法和数组的forEach()相同
set.forEach((key, value) => {
console.log(key, value);
});
/*
* 1 1
* 2 2
* 3 3
* 4 4
*/
除上面的方法外,Set
还有一个实例属性size
。表示Set
实例的长度。
const set = new Set([1,2,3,4]);
set.size // 4
Set
可以使用解构
const set = new Set();
set.add(1).add(2).add(3); // Set(3) { 1, 2, 3 }
[...set] // [1,2,3]
利用Set
内不能存在相同元素的特性,我们可以用Set
来做数组的去重。
let arr = [1,2,3,4,2,3,4,1,2,5];
// 使用 Set 去重
arr = [...new Set(arr)]; // [1, 2, 3, 4, 5]
使用Set
实现并集、交集、差集、对称差集
// 实现并集
function union(first, ...others) {
const unionSet = new Set(first);
for (const set of others) {
for (const setValue of set) {
unionSet.add(setValue);
}
}
return unionSet;
}
// 实现交集
function intersection(first, ...others) {
const intersectionSet = new Set(first);
for (const value of intersectionSet) {
for (const set of others) {
if (!set.has(value)) {
intersectionSet.delete(value);
}
}
}
return intersectionSet;
}
// 实现两个集合的差集
function difference(a, b) {
const set = new Set(a);
for (const bValue of b) {
if(set.has(bValue)) {
set.delete(bValue);
}
}
return set;
}
// 实现两个集合的对称差集
function symmetricDifference(a, b) {
return difference(union(a, b), intersection(a, b));
}
2. WeakSet
WeakSet
和WeakMap
类似,WeakSet
的元素只能是对象类型的。只有以下的方法:
const ws = new WeakSet();
const obj = {
o: { msg: 'message' }
};
// 1. 添加元素
ws.add(obj.o);
// 2. 查找元素
ws.has(obj.o);
// 3. 删除元素
ws.delete(obj.o);
和WeakMap
一样,WeakSet
也不能遍历,是一种弱映射,里面的元素不会被计入垃圾回收机制,只要元素引用清空了对应WeakSet
也会清空。
WeakSet
的应用没有WeakMap
那样广泛,但是它可以用来给DOM
元素做一个标记。例如:我们需要给某个元素设置禁用的标记。
const btn = document.querySelector('button');
btn.setAttribute('disabled', true);
const set = new WeakSet();
set.add(btn);
// 通过查找 set 中是否存在对应元素来判断这个元素是否被禁用了
set.has(btn);
这样的好处是如果DOM
节点删除了,那么set
内对应的元素也会被垃圾回收机制回收。避免了内存占用。