Set
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set本身是一个构造函数，用来生成 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 结构不会添加重复的值。
向Set中加入值不会发生类型转换，所以5和"5"是两个不同的值。
前面说到set结构不会添加重复的值意味着set内部会对值进行判断，使用的判断算法叫“Same-value-zero equality”，类似于精确相等符（===），但主要的区别是向Set加入值时认为NaN等于自身，而精确相等符认为NaN不等于自身
Object.is(NaN, NaN)返回true表明使用Object.is或者说Set内部使用的 “same-value-zero” 算法时，NaN是等于自身的。
所以下面例子中Set里面只有一个NaN
let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}
另外两个对象总是不相等的
Array.from()方法可以将Set结构转为数组
所以去重（数组或者字符串）成员可以使用set
[...new Set(array)] [...new Set('ababbc')].join('') Array.from(new Set(array));
Set的方法
| Set方法 | 说明 |
|---|---|
| add | 添加某个值，但会Set结构本身 |
| delete | 删除某个值，返回一个布尔值，表示是否成功 |
| has | 返回一个布尔值，表示该值是否为Set的成员。 |
| clear | 清除所有成员，没有返回值。 |
WeakSet
虽然也是不重复值的集合，但是跟Set有两个区别
- WeakSet的成员只能是对象和symbol值，而不能是其他类型的值
- WeakSet中的对象都是弱引用，也就是说垃圾回收机制不考虑WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。
- 因此WeakSet适合临时存放一组对象，以及存放跟对象绑定的信息。只要这些对象在外部消失，它在WeakSet里面的引用就会自动消失
- 不能获取
WeakSet的大小（即包含多少个元素）。
由于 WeakSet 内部有多少个成员，取决于垃圾回收机制有没有运行，运行前后很可能成员个数是不一样的，而垃圾回收机制何时运行是不可预测的，因此 ES6 规定 WeakSet 不可遍历。
WeakSet结构的方法
- add()
- delete()
- has()
WeakSet 的一个用处，是储存 DOM 节点，而不用担心这些节点从文档移除时，会引发内存泄漏。
如果不使用 WeakSet 来存储 DOM 节点，而使用普通的集合（如 Array 或 Set）或者其他对象来保存对这些节点的引用，可能会在比如以下几种情况下引发内存泄漏：
- 未移除的事件监听器
当为一个 DOM 节点添加了事件监听器，并且该节点从文档中移除后，如果你没有显式地移除这些事件监听器，那么即使该节点已经不在文档中，浏览器仍然会保持对该节点及其事件监听器的引用。这会导致该节点无法被垃圾回收，从而占用不必要的内存。
示例：
const elements = [];
const button = document.createElement('button');
// 添加事件监听器
button.addEventListener('click', () => {
console.log('Button clicked');
});
// 将节点存储在一个普通数组中
elements.push(button);
// 从文档中移除节点
document.body.removeChild(button);
// 如果不移除事件监听器，按钮不会被垃圾回收
- 长时间存在的缓存
如果你在应用中使用了某种形式的缓存来存储 DOM 节点或与它们相关联的数据，并且这些缓存没有适当的清理机制，那么当 DOM 节点从文档中移除时，这些缓存仍然会持有对节点的引用，导致它们无法被垃圾回收。
示例：
const cache = new Map();
function cacheElement(element) {
cache.set(element, { data: 'some data' });
}
const div = document.createElement('div');
cacheElement(div);
// 从文档中移除节点
document.body.removeChild(div);
// 缓存仍然持有对 div 的引用
console.log(cache.has(div)); // true
- 全局变量或闭包中的引用
如果你将 DOM 节点存储在全局变量中，或者通过闭包等方式间接持有对节点的引用，那么即使这些节点已经从文档中移除，它们也不会被垃圾回收，因为它们仍然可以通过这些全局变量或闭包访问到。
示例：
javascript深色版本
let globalNode;
function createAndCacheNode() {
const node = document.createElement('div');
globalNode = node; // 全局变量持有对节点的引用
return node;
}
const node = createAndCacheNode();
document.body.appendChild(node);
// 从文档中移除节点
document.body.removeChild(node);
// 全局变量仍然持有对节点的引用
console.log(globalNode === node); // true
Map
JS的数据对象（Obejct），本质上是键值对的集合（Hash结构），但是传统上只能用字符串当作键（一定程度上对其的使用有限制）
比如下面代码
const data = {}
const element = document.getElementById('myDiv')
data[element] = 'metaData'
data['[object HTMLDivElement]'] // "metadata"
上面代码原意是将一个 DOM 节点作为对象data的键，但是由于对象只接受字符串作为键名，所以element被自动转为字符串[object HTMLDivElement]。
“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。（Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。）
如果需要“键值对”的数据结构，Map 构造函数比 Object 更合适。
具有极快的查找速度
在n中有很长的数据，但是利用Map则查找十分迅速：
const m=new map(['Kris',21],['Bob',19],['Lily',25],['Jack',27]);
m.get('Kris'); // 21
m.get('Lily'); // 25
初始化Map需要一个二维数组，或者直接初始化一个空Map，
let m=new Map();
//-----------------------
const m=new map(['Kris',21],['Bob',19],['Lily',25],['Jack',27]);
m.get('Kris'); // 21
m.get('Lily'); // 25
Map构造函数接受数组作为参数，实际执行的是以下算法
const items = [['name', '张三'], ['title', 'Author']]
const map = new Map()
items.forEach(
([key, value]) => map.set(key, value)
)
在ES6中有使用map对象和set对象，当作Map构造函数的参数，结果都生成了新的Map对象
任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构（详见《Iterator》一章）都可以当作Map构造函数的参数。这就是说，Set和Map都可以用来生成新的 Map。
例如
const set = Set([['foo', 1], ['bar', 2]])
const m1 = new Map(set)
m1.get('foo') // 1
const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz') // 3
这里或许有疑问就是Map不是只接受值吗，为什么这里使用了键值对形式却能接受并生成set
原因：
- 虽然Set通常用于存储唯一的值，但是也可以存储任何类型的数据结构，包括键值对（即每个成员是一个双元素数组）
Map构造函数会遍历传入的可迭代对象，并假设每个成员是一个[key, value]形式的数组。- 如果将一个
Set传递给Map构造函数，并且Set中的每个成员都是一个双元素数组，那么Map会将这些数组解释为键值对，并创建相应的Map。- 如果
Set中的每个成员都是一个双元素数组，那么Map构造函数会将这些数组解释为键值对，并创建相应的Map。
Map易错点
const map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined
上面代码的set和get方法，表面是针对同一个键，但实际上这是两个不同的数组实例，内存地址是不一样的，因此get方法无法读取该键，返回undefined。
注意这里的[‘a’]是两个不同的数组实例，内存地址不一样
，Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。这就解决了同名属性碰撞（clash）的问题，我们扩展别人的库的时候，如果使用对象作为键名，就不用担心自己的属性与原作者的属性同名。
如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键。
Map的方法
| Map方法 | 说明 |
|---|---|
| set(key, val): | 向Map中添加新元素 |
| get(key): | 通过键值查找特定的数值并返回 |
| has(key): | 判断Map对象中是否有Key所对应的值，有返回true,否则返回false |
| delete(key): | 通过键值从Map中移除对应的数据 |
| clear(): | 将这个Map中的所有元素删除 |
一个key只能对应一个value，所以多次对一个key放入value，后面的值会把前面的值冲掉
Map的使用场景
- 需要动态键的数据存储
当需要存储的数据键不是静态的字符串或符号时，Map 是一个更好的选择。Map 允许任何类型的值作为键，包括对象、函数、甚至其他 Map 或 Set。
示例：
const map = new Map();
const keyObj = { id: 1 };
const keyFunc = () => "hello";
map.set(keyObj, "value associated with keyObj");
map.set(keyFunc, "value associated with keyFunc");
console.log(map.get(keyObj)); // "value associated with keyObj"
console.log(map.get(keyFunc)); // "value associated with keyFunc"
- 频繁的增删操作
Map 在增删操作上的性能通常优于普通对象。对于频繁的插入和删除操作，Map 提供了更高效的方法，如 .set(), .delete(), 和 .clear()。
示例：
const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
// 删除一个键值对
map.delete('key1');
// 清空整个 Map
map.clear();
- 保持插入顺序
Map 会按照插入的顺序迭代其元素，这对于需要维护键值对顺序的场景非常有用。相比之下，普通对象的属性顺序在某些情况下是不确定的。
示例：
const map = new Map([
['first', 'value1'],
['second', 'value2'],
['third', 'value3']
]);
for (let [key, value] of map) {
console.log(`${key}: ${value}`);
}
// 输出:
// first: value1
// second: value2
// third: value3
- 计数器或频率统计
Map 可以用于统计某个值出现的次数，特别适合处理数组中的重复项或其他形式的频率统计。
示例：
const words = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const wordCounts = new Map();
for (const word of words) {
wordCounts.set(word, (wordCounts.get(word) || 0) + 1);
}
console.log(wordCounts); // Map(3) { 'apple' => 3, 'banana' => 2, 'orange' => 1 }
- 缓存机制
Map 可以用于实现简单的缓存机制，特别是在需要根据键来快速查找和更新数据的情况下。你可以使用 Map 来存储计算结果，避免重复计算。
示例：
const cache = new Map();
function fibonacci(n) {
if (cache.has(n)) {
return cache.get(n);
}
let result;
if (n <= 1) {
result = n;
} else {
result = fibonacci(n - 1) + fibonacci(n - 2);
}
cache.set(n, result);
return result;
}
console.log(fibonacci(10)); // 55
console.log(cache); // Map(11) { 0 => 0, 1 => 1, 2 => 1, 3 => 2, 4 => 3, 5 => 5, 6 => 8, 7 => 13, 8 => 21, 9 => 34, 10 => 55 }
- 关联复杂对象
Map 可以用于将复杂对象（如 DOM 节点、函数等）与元数据关联起来，而不会修改这些对象本身。这在处理事件监听器、组件状态等场景中非常有用。
示例：
const elements = document.querySelectorAll('button');
const elementData = new Map();
elements.forEach(element => {
elementData.set(element, { clicks: 0 });
element.addEventListener('click', () => {
const data = elementData.get(element);
data.clicks++;
console.log(`Button clicked ${data.clicks} times`);
});
});
- 替代普通对象
在某些情况下，Map 可以替代普通对象，尤其是在你需要动态添加或删除属性，或者需要更高效的性能时。Map 提供了更多的内置方法和更好的性能特性。
示例：
const userPreferences = new Map([
['theme', 'dark'],
['language', 'en']
]);
userPreferences.set('timezone', 'UTC+8');
console.log(userPreferences.get('theme')); // 'dark'
console.log(userPreferences.size); // 3
- 处理大型数据集
Map 在处理大型数据集时表现出色，特别是当数据集包含大量键值对时。Map 的迭代、查找和更新操作都比普通对象更高效。
示例：
const largeDataSet = new Map();
for (let i = 0; i < 1000000; i++) {
largeDataSet.set(i, `value${i}`);
}
console.log(largeDataSet.get(500000)); // 'value500000'
- 多线程环境下的共享数据
在 Web Workers 或 Node.js 的多线程环境中，Map 可以用于在不同线程之间共享数据，因为它提供了更安全和高效的并发访问方式。
示例：
// 主线程
const worker = new Worker('worker.js');
const sharedData = new Map();
worker.postMessage(sharedData);
// worker.js
self.onmessage = function(e) {
const map = e.data;
console.log(map.get('key'));
};
- 避免原型链污染
普通对象的属性查找会沿着原型链进行，这可能导致意外的行为或冲突。Map 不依赖于原型链，因此可以避免这些问题，特别是在你不确定对象的来源或结构时。
示例：
const obj = {};
obj.__proto__.foo = 'bar'; // 污染了原型链
console.log(obj.foo); // 'bar'
const map = new Map();
map.set('foo', 'baz');
console.log(map.get('foo')); // 'baz'
WeakMap
与Map的却别
weakMap只接受对象（NULL除外）和Symbol值作为键名，不接受其它类型的值作为键名
const map = new WeakMap(); map.set(1, 2) // 报错 map.set(null, 2) // 报错 map.set(Symbol(), 2) // 不报错
WeakMap的键名所指向的对象，不计入垃圾回收机制。键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内(也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。)，注意是键名，而不是键值，键值依然是正常引用没有遍历操作，没有size属性，无法清空
设计目的是：有时想在某个对象上面存放一些数据，但是这会形成对于这个对象的引用，所以设计出WeakMap解决这个问题
第2条例子说明解释
const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
[e1, 'foo 元素'],
[e2, 'bar 元素'],
];
// 对这两个对象添加一些文字说明，这就形成了对e1和e2的引用
//如果不再需要这两个对象，就必须手动删除这个引用，否则垃圾回收机制就不会释放e1和e2占用的内存
arr[0] = null
arr[1] = null
// 这样的手动删除的方法很容易忘记写然后造成内存泄漏
键值是正常应用，所以WeakMap外部消除了obj的引用，WeakMap内部的引用依然存在
const wm = new WeakMap();
let key = {};
let obj = {foo: 1};
wm.set(key, obj);
obj = null;
wm.get(key)
// Object {foo: 1}
一个典型应用场景是，在网页的 DOM 元素上添加数据，就可以使用WeakMap结构。
WeakMap结构的方法
- get()
- set()
- has()
- delete()
用途
WeakMap 应用的典型场合就是 DOM 节点作为键名。下面是一个例子。
let myWeakmap = new WeakMap();
myWeakmap.set(
document.getElementById('logo'),
{timesClicked: 0})
;
document.getElementById('logo').addEventListener('click', function() {
let logoData = myWeakmap.get(document.getElementById('logo'));
logoData.timesClicked++;
}, false);
上面代码中，document.getElementById('logo')是一个 DOM 节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在 WeakMap 里，对应的键名就是这个节点对象。一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险。
WeakMap 的另一个用处是部署私有属性。
const _counter = new WeakMap();
const _action = new WeakMap();
class Countdown {
constructor(counter, action) {
_counter.set(this, counter);
_action.set(this, action);
}
dec() {
let counter = _counter.get(this);
if (counter < 1) return;
counter--;
_counter.set(this, counter);
if (counter === 0) {
_action.get(this)();
}
}
}
const c = new Countdown(2, () => console.log('DONE'));
c.dec()
c.dec()
// DONE
上面代码中，Countdown类的两个内部属性_counter和_action，是实例的弱引用，所以如果删除实例，它们也就随之消失，不会造成内存泄漏。
WeakRef
是基于弱引用的数据结构
ES2021提供了WeakRef对象用于直接创建对象的弱引用
let target = {}
let wr = new WeakRef(target)
// wr属于对target的弱引用。垃圾回收机制不会计入这个引用，wr的引用不会妨碍原始对象target被垃圾回收机制清除