ES6躬行记（17）——Map

Posted 2021-11-10 strick

一、Map

　　Map类似于Object（对象），可用来存储键值对，但需要通过SameValueZero算法保持键的唯一性。与Set一样，在使用之前也得要实例化，如下代码所示，构造函数Map()中的参数也是一个可选的可迭代对象，但此对象得是键值对的集合或两列的二维数组。

new Map();                        　　　　　　　　//Map(0) {}
new Map([["name", "strick"], ["age", 28]]);    //Map(2) {"name" => "strick", "age" => 28}

1）属性和方法

　　Map比Set多一个读取方法：get()，并且写入方法改成了set()，其它的属性和方法在功能上基本都一致，只是有些参数在含义上略有不同，例如delete()的参数表示键而不是值。方法的具体使用，可参加下面的代码。

var people = new Map();
//写入和读取
people.set("name", "strick").set("age", 28);　　//Map(2) {"name" => "strick", "age" => 28}
people.get("name");　　　　　　　　　　　　　　　　　//"strick"
people.size;　　　　　　　　　　　　　　　　　　　　　//2
//遍历
[...people.keys()];            //["name", "age"]
[...people.values()];          //["strick", 28]
[...people.entries()];         //[["name", "strick"], ["age", 28]]
/*
  "strick" "name" Map(2) {"name" => "strick", "age" => 28}
  28 "age" Map(2) {"name" => "strick", "age" => 28}
*/
people.forEach(function(value, index, map) {
  console.log(value, index, map);
});
//移除
people.delete("name")
people.has("name");           //false
people.clear();
people.has("age");            //false

2）比较对象

　　本节开篇就提到Map和Object很类似，但其实两者之间还是有一些很重要的区别，具体如表10所列。

表10  Map和Object的对比

不同点	Map	Object
键	所有类型，甚至包括NaN	字符串或Symbol类型
可迭代对象	是	否
尺寸	通过size属性得到	需要手动计算
原型	无	有
写入	set()方法	等号运算符
读取	get()方法	成员访问运算符（点号或方括号）
移除	delete()或clear()方法	delete运算符
枚举顺序	根据键值对的添加顺序	依照ES6的新规则

二、WeakMap

　　WeakMap是Map的变体，也是键值对的集合，但它的键必须是弱引用的对象，并且不可枚举，而值没有限制，还是保持任意类型。当WeakMap的键所指的对象不再被引用时，其键和值将被GC自动回收。

1）创建和方法

　　WeakSet也需要像Map那样实例化（如下代码所示），但没有Map的size属性，并且只包含Map中的四个方法：set()、get()、has()和delete()，诸如清空和遍历相关的方法都是不存在的。

var weak = new WeakMap(),
  arr = [1];
weak.set(arr, 10);    //WeakMap {Array(1) => 10}
weak.get(arr);        //10
weak.has(arr);        //true
weak.delete(arr);
weak.has(arr);        //false

2）用途

　　WeakMap的主要优势在于不干扰垃圾收集，从而能够有效的防止内存泄漏。它适用于隐藏信息、存储DOM节点等场景。下面是一个隐藏信息的示例，privates变量是一个WeakMap，它的键是当前实例化的People对象，存储的私有数据是一个对象，两个原型方法分别用于写入和读取name属性。

var people = (function() {
  var privates = new WeakMap();
  function People() {
    privates.set(this, {});     //初始化私有数据
  }
  People.prototype.setName = function(name) {
    privates.get(this).name = name;        //写入
  };
  People.prototype.getName = function() {
    return privates.get(this).name;        //读取
  };
  return new People();
})();
people.setName("strick");
people.getName();            　　//"strick"

　　这种存储方式不仅能让数据保持私有状态，并且当与之关联的对象实例被销毁后，这些私有数据将被GC一并删除，从而释放内存。

　　下面是另一个存储DOM节点的示例，node变量是一个WeakMap，它的键是文档中的<div>元素（即DOM的一个节点），在该元素的事件处理程序中可更新digit属性。当从文档中移除该元素时，与之关联的数据也会随之被删除。

<div id="container"></div>
<script>
    var container = document.getElementById("container");
    var node = new WeakMap();
    node.set(container, { digit: 0 });
    container.addEventListener("click", function() {
        var current = node.get(this);
        current.digit++;
        node.set(this, current);
      },
      false
    );
</script>