js Map用法

尹承泽

2023-12-01

介绍

ECMAScript 6 以前，在 JavaScript 中实现“键/值”式存储可以使用 Object 来方便高效地完成，也就是使用对象属性作为键，再使用属性来引用值。但这种实现并非没有问题，为此 TC39 委员会专门为“键/值”存储定义了一个规范。

作为 ECMAScript 6 的新增特性，Map 是一种新的集合类型，为这门语言带来了真正的键/值存储机制。Map 的大多数特性都可以通过 Object 类型实现，但二者之间还是存在一些细微的差异。具体实践中使用哪一个，还是值得细细甄别。

基本API

1. 创建

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

const m = new Map();

如果想在创建的同时初始化实例，可以给 Map 构造函数传入一个可迭代对象，需要包含键/值对数组。可迭代对象中的每个键/值对都会按照迭代顺序插入到新映射实例中(类似于二维数组)：

const m = new Map([
	["小明", 100],
	["小红", 90],
	["小兰", 99]
]);
Array.from(m); // [["小明", 100],["小红", 90],["小兰", 99]]

2. size属性

size: 获取Map实例的长度:

const m = new Map([
	["小明", 100],
	["小红", 90],
	["小兰", 99]
]);
m.size; // 3

3. set()

set(): 给Map实例添加键/值对:

// set()方法返回映射实例，因此可以把多个操作连缀起来
const m = new Map();
m.set("小明", 100).set("小红", 100);
Array.from(m); // [["小明", 100], ["小红", 100]]

4. get()

get(): 通过键查询值，返回值：

const m = new Map();
m.set("小明", 100).set("小红", 100);
m.get("小红"); // 100
m.get("abc"); // 不存在为undefined

5. has()

has(): 通过键查询是否存在，返回布尔值：

const m = new Map();
m.set("小明", 100).set("小红", 100);
m.has("小明"); // true
m.has("abc"); // false

6. delete()

delete(): 删除对应键的数据，返回布尔值，表示是否删除成功：

const m = new Map();
m.set("小明", 100).set("小红", 100);
m.delete("小红"); // true
Array.from(m); // [["小明", 100]]

7. clear()

clear(): 清空Map实例：

const m = new Map();
m.set("小明", 100).set("小红", 100);
m.clear();
Array.from(m); // []

8. keys()、values()、entries()

keys(): 返回以插入顺序生成键的迭代器；
values(): 返回以插入顺序生成值的迭代器；
entries(): 返回插入顺序生成[key, value]形式的数组。

// keys()
const m = new Map();
m.set("小明", 100).set("小红", 100);
Array.from(m.keys()); // ['小明', '小红']

// values()
Array.from(m.values()); // [100, 100]

// entries()
Array.from(m.entries()); // [["小明", 100],["小红", 100]]

平常的使用：比如通过名字快速查找对应的考试成绩。
有的人这时候就要说了，我用对象一样也可以做到呀。嗯~，没毛病。
but，but，如果比较注重性能的话就有必要使用Map了:

选择 Object 还是 Map

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

内存占用
Object 和 Map 的工程级实现在不同浏览器间存在明显差异，但存储单个键/值对所占用的内存数量都会随键的数量线性增加。批量添加或删除键/值对则取决于各浏览器对该类型内存分配的工程实现。不同浏览器的情况不同，但给定固定大小的内存，Map 大约可以比 Object 多存储 50%的键/值对。
插入性能
向 Object 和 Map 中插入新键/值对的消耗大致相当，不过插入 Map 在所有浏览器中一般会稍微快一点儿。对这两个类型来说，插入速度并不会随着键/值对数量而线性增加。如果代码涉及大量插入操作，那么显然 Map 的性能更佳。
查找速度
与插入不同，从大型 Object 和 Map 中查找键/值对的性能差异极小，但如果只包含少量键/值对，则 Object 有时候速度更快。在把 Object 当成数组使用的情况下（比如使用连续整数作为属性），浏览器引擎可以进行优化，在内存中使用更高效的布局。这对 Map 来说是不可能的。对这两个类型而言，
查找速度不会随着键/值对数量增加而线性增加。如果代码涉及大量查找操作，那么某些情况下可能选择 Object 更好一些。
删除性能
使用 delete 删除 Object 属性的性能一直以来饱受诟病，目前在很多浏览器中仍然如此。为此，出现了一些伪删除对象属性的操作，包括把属性值设置为 undefined 或 null。但很多时候，这都是一种讨厌的或不适宜的折中。而对大多数浏览器引擎来说，Map 的 delete()操作都比插入和查找更快。
如果代码涉及大量删除操作，那么毫无疑问应该选择 Map。

小shy这篇只介绍一下Map的用法，后续会更新WeakMap，Set 和 WeakSet，谢谢各位观看！