js梳理笔记（四） - ES6新的集合类型之 Map

红宝书学习笔记

第一章： 字符串操作方法
第二章： 数组之创建数组
第三章： 数组之数组方法
第四章： ES6新的集合类型之 Map

---

---

前言

ECMAScript6 之前，在JavaScript中实现“键/值”式存储可以使用Object来方便高效地完成，也就是使用对象属性作为键，再使用属性来引用值。但这种实现方式并非没有问题，为此TC39委员会专门为“键/值”存储定义了一个规范。
作为ECMAScript6 的新增特性，Map 是一种新的集合类型，为这门语言带来了真正的键/值存储机制。Map的大多数特性都可以通过Object类型实现，但二者之间还是存在一些细微的差异。具体实践中使用哪一个，还是值得细细甄别。

---

一、基本API

API简介

• set()：添加键/值对
• get() ：获取键所对应的值
• has() ：查询是否存在对应的键/值对
• size ：获取键/值对的数量
• delete() ：删除键/值对
• clear()：清除这个映射实例中所有的 键/值对

API使用

1、新建

可以使用new 关键字 和 Map 构造函数新建一个空映射

const m = new Map();

也可以直接在创建的同时初始化实例，即传入一个可迭代对象，需要包含键/值对数组。

const m1 = new Map([
	["key1":"value1"],
	["key2":"value2"],
	["key3":"value3"]
])

2、操作

• 新建一个空映射时

const m = new Map();
alert(m.size); // 0
alert(m.get("name")); // undefined
alert(m.has("name")); // false

// 使用set() 新增键/值对
m.set("name","Bob").set("age","18");
alert(m.size); // 2
alert(m.get("name")); // Bob
alert(m.has("name")); // true

// 使用 delete删除键/值对
m.delete("name"); // 删除姓名键/值对
alert(m.size); // 1
alert(m.get("name")); // undefined
alert(m.get("age")); // 18
alert(m.has("name")); // false
alert(m.has("age")); // true

// 使用clear 清空映射
m.clear();
alert(m.size); // 0
alert(m.get("name")); // undefined
alert(m.has("name")); // false

• 创建的同时初始化实例时只传入一个空数组

const m = new Map([[]]);
alert(m.size); // 1
alert(m.get(undefined)); // undefined
alert(m.has(undefined)); // true

合起来写

const m = new Map().set("name","Bob").set("age","18");

3、映射值是没有限制的

与Object只能使用数值、字符串或符号作为键不同，Map可以用任何javascript数据类型作为键。

  const m = new Map();
  const functionKey = function () {};
  const symbolKey = Symbol();
  const objectKey = new Object();

  m.set(functionKey, "functionValue");
  m.set(symbolKey, "symbolValue");
  m.set(objectKey, "objectValue");

  alert(m.get(functionKey)); //functionValue
  alert(m.get(symbolKey)); //symbolValue
  alert(m.get(objectKey)); //objectValue

  alert(m.get(function () {})); // undefined

4、不变性

在映射中用作键和值的对象及其他“集合”类型，在自己的内容或属性被修改时仍然保持不变：

const m = new Map();
const objKey = {},
  objValue = {},
  arrKey = [],
  arrValue = [];
m.set(objKey, objValue).set(arrKey, arrValue);
objKey.foo = "foo";
objValue.bar = "bar";
arrKey.push("foo");
arrValue.push("bar");

console.log(m.get(objKey)); // {bar: "bar"}
console.log(m.get(arrKey)); // ["bar"]

二、顺序与迭代

与Object类型的一个主要差异是，Map实例会维护键值对的插入顺序，因此可以根据插入顺序执行迭代操作。

• entries()

const m = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"],
]);
for (let item of m.entries()) {
  console.log(item);
}
// [key1,value1]
// [key2,value2]
// [key3,value3]

• 扩展操作

const m = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"],
]);
console.log([...m]);
// [[key1,value1],[key2,value2],[key3,value3]]

• forEach()

const m = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"],
]);
m.forEach((key, value) => console.log(`${key},${value}`));
// value1,key1
// value2,key2
// value3,key3

• keys() 返回以插入顺序生成键的迭代器

const m = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"],
]);
for (let key of m.keys()) {
  console.log(key);
}
// key1
// key2
// key3

• values() 返回以插入顺序生成值的迭代器

const m = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"],
]);
for (let value of m.values()) {
  console.log(value);
}
// value1
// value2
// value3

修改键和值

键和值在迭代器遍历时是可以修改的，但映射内部的引用无法修改

作为键的字符串原始值是不能修改的

const m1 = new Map([["key1", "value1"]]);
for (let key of m1.keys()) {
  key = "newKey";
  console.log(key); // newKey
  console.log(m1.get("key1"));  // value1
  console.log(m1.get("newKey")); // undefined  
}

作为键的对象的属性是可以修改的，修改后在映射内部仍然引用相同的值

const keyObj = { id: 1 };
const m2 = new Map([[keyObj, "val1"]]);
for (let key of m2.keys()) {
  key.id = "newKey";
  console.log(key); //{id: 'newKey'}
  console.log(m2.get(keyObj)); //val1
}
console.log(keyObj); //{id: 'newKey'}

三、选择Object还是Map

对于多数web开发任务米说，选择 Object 还是Map 只是个人偏好问题，影响不大。不过，对于在乎内存和性能的开发者来说，对象和映射之间确实存在显著的差別。

1.内存占用

Object和Map 的工程级实现在不同浏览器间存在明显差异，但存储单个键/值对所占用的内存数量都会随键的数量线性增加。批量添加或删除键/值对则取决于各浏览器对该类型内存分配的工程实现。
不同浏览器的情况不同，但给定固定大小的内存，Map 大约可以比Object 多存储 50%的键/值对。

2.插入性能

向 Qbject 和Map 中插人新键/值对的消耗大致相当，不过插入 Map 在所有浏览器中一般会稍微快一点儿。对这两个类型来说，插入速度并不会随着键/值对数量而线性增加。如果代码涉及大量插入操作，那么显然 Map 的性能更佳。

3. 查找速度

与插入不同，从大型Object 和Map 中查找键/值对的性能差异极小，但如果只包含少量键/值对，则 Object 有时候速度更快。在把 Object 当成数组使用的情况下（比如使用连续整数作为属性），浏览器引擎可以进行优化，在内存中使用更高效的布局。这对Map 来说是不可能的。对这两个类型而言，查找速度不会随着键/值对数量增加而线性增加。如果代码涉及大量查找操作，那么某些情况下可能选择Object 更好一些。

4. 删除性能

使用 delete 删除 Object 属性的性能一直以来饱受诟病，目前在很多浏览器中仍然如此。为此，出现了一些伪刪除对象属性的操作，包括把属性值设置为 undefined 或null。但很多时候，这都是种讨厌的或不适宜的折中。而对大多数浏览器引擎来说，Map 的delete()操作都比插入和查找更快。如果代码涉及大量删除操作，那么毫无疑问应该选择 Map。