Map 和 WeakMap 的使用
2021-09-09 本文已影响0人
菜鸡前端
1. Set（有序不重复列表）
Set 表示有序不重复的列表，可以遍历，Set 也能用来保存 NaN 和 undefined， 如果有重复的NaN， Set会认为就一个 NaN (实际上 NaN!=NaN)。
<script>
var set = new Set();
// 添加成功
set.add("b");
set.add("a")
set.add("c")
// 删除成员
set.delete("a");
// 是否存在成员
set.has("b")
// 遍历成员
set.forEach(el => {
console.log(el)
})
// 支持迭代器
for (const [key, value] of set.entries()) {
console.log(`${key}: ${value}`);
}
for (const [key, value] of set.keys()) {
// b: undefined
// c: undefined
console.log(`${key}: ${value}`);
}
for (const [key, value] of set.values()) {
// b: undefined
// c: undefined
console.log(`${key}: ${value}`);
}
</script>
image.png
2. Map（有序集合）
Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。它的方式和属性和 Set 大体相同。
image.png
3. WeakMap (弱引用 Map)
- WeakMap 对象是键/值对的集合，其中键被弱引用；
- WeakMap 键必须是对象，值可以是任意值，不能被遍历；
- 由于WeakMap的成员随时可能被垃圾回收机制回收，成员的数量不稳定，所以没有size属性。
- WeakMap 保持了对键名所引用的对象的弱引用，垃圾回收机制不将该引用考虑在内。只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用；
image.png
3.1 DOM 节点作为 key
因为 weakMap 不会影响垃圾回收，所以可以用来关联元数据，键为 dom 元素，值为该 dom 元素的元数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="node1"></div>
<div id="node2"></div>
</body>
<script>
var metadata = new WeakMap();
var node1 = document.querySelector("#node1");
var node2 = document.querySelector("#node2");
metadata.set(node1, {
id: 'node1'
})
metadata.set(node2, {
id: 'node2'
})
console.log(metadata)
</script>
</html>
4. WeakSet (弱引用 Set)
- 成员都是对象；
- 成员都是弱引用，可以被垃圾回收机制回收，可以用来保存 DOM 节点，不容易造成内存泄漏；
- 不能遍历，方法有 add、delete、has；
