Map 和 WeakMap 的使用

作者: 菜鸡前端 | 来源:发表于2021-09-09 21:02 被阅读0次

Map 和 WeakMap 的使用
24.WeakMap
Set WeakSet Map WeakMap
Map 和 WeakMap
Map和WeakMap
Map和WeakMap
WeakMap的学习与应用场景
Set Map WeakSet WeakMap
ES6学习笔记（四）
JS 预编译执行顺序

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>