重学 es6 之 map

基本概念

JavaScript 的对象只能用字符串作为键，为了解决这个问题，出现了 map，它可以使用任意值作为键。

<div id="test">test</div>
<script>
  const element = document.getElementById("test");

  const data = {};
  data[element] = "metadata";
  console.log(data);

  const map = new Map();
  map.set(element, "metadata");
  console.log(map); 
</script>

上面的例子中，将同一个 DOM 元素分别放入对象和 map 的键中，从浏览器的运行结果可以看出，保存到对象后 DOM 元素转化成了字符串 [object HTMLDivElement]，而保存到 map 后仍然可以看到 DOM 元素。

创建 map 的时候可以通过向 Map 构造函数传参来提供初始值，它支持传入一个具有 iterator 接口的数据结构且每个成员都是拥有两个元素的数组。

let arr = [
  ["name", "leon"],
  ["foo", "1"],
];

let map1 = new Map(arr);
console.log(map1.get("name")); // 'leon'

let map2 = new Map(new Set(arr));
console.log(map1.get("foo")); // '1'

上面的例子中，数组和 set 都支持创建 map，只要满足其成员是拥有两个元素的数组。

实例的属性和操作方法

Map 结构的属性和操作方法有6个。size 属性用于获取结构的成员个数。Map.prototype.set(key,value) 设置 key 对应的 value，key 值已存在就会更新键值，返回整个 map。Map.prototype.get(key) 读取 key 对应的键值，key 不存在就返回 undefined。Map.prototype.has(key) 判断 key 是否在 map 中，返回一个布尔值。Map.prototype.delee(key) 删除 Map 中的键，返回一个布尔值。Map.prototype.clear(key) 清除所有成员，没有返回值。

let map = new Map();
console.log(map.get("info")); // undefined

map.set("info", "hello");
console.log(map.get("info")); // hello
console.log(map.size); // 1

map.set("info", "hi");
console.log(map.get("info")); // hi

console.log(map.delete("info")); // true
console.log(map.size); // 0

map.set(["a"], true);
console.log(map.has(["a"])); // false
console.log(map.size); // 1
map.clear();
console.log(map.size); // 0

上面的例子中演示了属性 size 和方法 get，set，delete，has，clear 的运用场景。特别的是，Map 中保存的键需要内存地址一致才会认为是同一个键，这也就解释了 set 的键是 ['a']，has 的键是 ['a'] 的话得不到对应的值，因为它们不是指向同一个内存地址。如果 Map 的键是简单类型的值，只要保证键是严格相等的就认为是同一个键（特别的是，NaN 和其本身不是严格相等的，但是 Map 当做同一个键）

小结

本文先是介绍为什么引入 Map，接着介绍了 Map 构造函数如何传参，最后介绍了 Map 的 size 属性以及 set 方法，get 方法，has 方法，clear 方法，delete 方法，需要注意的是，保存到 Map 里面的键需要内存地址相同才会被认为是同一个键。

参考资料：es6.ruanyifeng.com/#docs/set-m…