【校招VIP】ES6中的Set和WeakSet- 校招VIP

转载声明：文章来源https://blog.csdn.net/weixin_42429672/article/details/91374954

注意：我这里讲的Set和Map不是Array中原型对象的方法，而是ES6新规定的数据类型，类似Array，是JS中的内置对象。

所有的方法描述参考：MDN文档描述以及阮一峰ES6教程

Set

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Set是一个构造函数，需要new来创建一个对象，有了Set对象可以很容易得到不重复的元素

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

注意：两个相同的空对象是不同的元素，不会被去掉

可以先看看Set原型对象中有哪些方法和属性：

console.dir(Set.prototype);

一、属性

1.Set.prototype.constructor

构造函数，默认就是Set函数。

2.Set.prototype.size

返回Set实例的成员总数。

二、方法

方法分为：操作方法（用于操作数据）和遍历方法（用于遍历成员）。

操作方法

add(value)：添加某个值，返回 Set 结构本身。

delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。

has(value)：返回一个布尔值，表示该值是否为Set的成员。

clear()：清除所有成员，没有返回值。

1.Set.prototype.add()

参数：value 需要添加到set中的值

返回值：Set对象本身

MDN：add() 方法用来向一个 Set 对象的末尾添加一个指定的值。

let s = new Set();
        s.add(1);
        s.add(2);
        s.add(3);
        s.add(4);
        console.log(s);//Set(4) {1, 2, 3, 4}

2.Set.prototype.clear()

参数：无

返回值：undefined

MDN：clear() 方法用来清空一个 Set 对象中的所有元素。

s.clear();
console.log(s);//Set(0) {}

3.Set.prototype.delete()

参数：要删除的元素

返回值：成功返回true，失败返回false

MDN：delete() 方法可以从一个 Set 对象中删除指定的元素。

const s = new Set([1,2,3,4]);
s.delete(1);//Set(3) {2, 3, 4} true
s.delete('1');//false

4.Set.prototype.has()

MDN：has() 方法返回一个布尔值来指示对应的值value是否存在Set对象中。

参数：测试的元素是否存在Set中

返回值：存在返回true，不存在返回false

const s = new Set();
s.add('foo');
s.has('foo');//true
s.has('bar');//false

遍历方法

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

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

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

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

1.Set.prototype.forEach()

MDN：forEach 方法会根据集合中元素的插入顺序，依次执行提供的回调函数。

参数：回调函数callBack（element, index, thisArg）

返回值：undefined

function logSetElements(value1, value2, set) {
    console.log("s[" + value1 + "] = " + value2);
}

new Set(["foo", "bar", undefined]).forEach(logSetElements);

// logs:
// "s[foo] = foo"
// "s[bar] = bar"
// "s[undefined] = undefined"

2.Set.prototype.values() / keys()

MDN：values() 方法返回一个 Iterator 对象，这个对象以插入 Set 对象的顺序包含了原 Set 对象里的每个元素。

keys() 方法是这个方法的别名 (出于与 Map 对象保持相似的原因); 它的行为与 value 方法完全一致，返回 Set 对象的元素。

大白话就是：set中只有键名，只有值，所以value和keys是一样的

返回值：将返回一个新生成的可迭代对象，以插入 Set 对象的顺序返回其包含的每个元素的值。

3.Set.prototype.entries()

MDN：entries() 方法返回一个新的迭代器对象，这个对象的元素是类似 [value, value] 形式的数组，value 是集合对象中的每个元素，迭代器对象元素的顺序即集合对象中元素插入的顺序。由于集合对象不像 Map 对象那样拥有 key，然而，为了与 Map 对象的 API 形式保持一致，故使得每一个 entry 的 key 和 value 都拥有相同的值，因而最终返回一个 [value, value] 形式的数组。

大白话：为了凑成键值对的形式，键名等于键值

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

遍历的应用

与数组搭配，去掉重复的元素

let set = new Set(['red', 'green', 'blue','blue']);
let array = [...set];
console.log(array);//(3) ["red", "green", "blue"]

实现并集（Union）、交集（Intersect）和差集（Difference）。

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

WeakSet

WeakSet 结构与 Set 类似，也是不重复的值的集合，只有三个方法，没有属性

WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。

WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。

WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。

下面是一个例子。

const ws = new WeakSet();
const obj = {};
const foo = {};

ws.add(window);
ws.add(obj);

ws.has(window); // true
ws.has(foo);    // false

ws.delete(window);
ws.has(window);    // false

WeakSet 的成员只能是对象，而不能是其他类型的值

let weak = new WeakSet();
weak.add(1);//Uncaught TypeError: Invalid value used in weak

作用

正如它的名字weak，它是对象的弱引用，垃圾回收机制不考虑，所以不会造成内存的泄露，同时是无法遍历的，因为你不知道什么时候对象的引用消失了，而且没有size属性，不知道长度，可以试试以下代码在浏览器的输出

let weak = new WeakSet();
       
       weak.add({});
       weak.add([]);
       let timeId = setInterval(() => {
           console.log(weak);
       }, 1000);