Map

发表于 | 分类于

JavaScript 中的对象（Object），本质上是键值对的集合，但是只能用字符串来做键名。这给它的使用带来了很大的限制。为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

也就是说，Object 结构提供了“字符串 - 值”的对应，Map 结构提供了“值 - 值”的对应，是一种更完善的 JSON 数据结构的实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

基本用法

创建 Map

Map 本身是一个构造函数，调用构造函数用来生成 Map 数据结构。

1
2
let m = new Map();
console.log( m );

数据初始化

Map 函数也可以接受一个数组（或类似数组的对象）作为参数，用来进行初始化。但是跟 Set 不同的是，Map 中该数组中的成员是一对对表示键值对的数组。

1
2
let m = new Map([["name", "zhangsan"], ["age", 20]]);
console.log( m );

Map 实例的属性和方法

Map 结构的实例有以下属性和方法。

属性

  • size：返回 Map 结构的成员总数。
1
2
let m = new Map([["name", "zhangsan"], ["age", 20]]);
console.log( m.size );

方法

Map 实例的方法也分为了两大类：操作方法（用于数据操作）和遍历方法（用于遍历数据）。

操作方法

  • set(key, value)：添加或修改数据。设置key所对应的键值，并返d回 Map 结构本身。
  • get(key)：获取数据。读取key对应的键值，如果找不到key，返回undefined。
  • has(key)：查看是否存在某个数据，返回一个布尔值。
  • delete(key)：删除数据。删除成功返回true。
  • clear()：清除所有数据，没有返回值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let map = new Map([["name", "zhangsan"], ["age", 20]]);
// 设置 name 的值为 lisi
map.set("name", "lisi");
console.log( map );       // Map(2) {"name" => "lisi", "age" => 20}
// 获取 name 对应的值
let getMap = map.get("name");
console.log( getMap );    // lisi
// 查看是否存在 age
let hasMap = map.has("age");
console.log( hasMap );    // true
// 删除 age 键值对
let delMap = map.delete("age");
console.log( delMap );    // true
// 清空所有数据
map.clear();
console.log(map);         // Map(0) {}

遍历方法

Map 提供了三个遍历器生成函数和一个遍历方法。

  • keys()：返回一个键名的遍历器。
  • values()：返回一个键值的遍历器。
  • entries()：返回一个键值对的遍历器。
  • forEach()：使用回调函数遍历每个成员。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
let num = new Map([["one", 1], ["two", 2], ["three", 3]]);
for(let key of num.keys()){
	console.log(key);
}
// one
// two
// three
for(let value of num.values()){
	console.log(value);
}
// 1
// 2
// 3
for(let item of num.entries()){
	console.log(item[0], item[1]);
}
// one 1
// two 2
// three 3
// 将上面代码通过解构改成如下
for(let [key, value] of num.entries()){
	console.log(key, value);
}
// one 1
// two 2
// three 3
num.forEach((value, key) => {
	console.log(value, key)
})
// 1 one
// 2 two
// 3 three

与其他数据结构互换

Map 转为数组

Map 转为数组最方便的方法，就是使用扩展运算符...。

1
2
3
4
5
6
7
let myMap = new Map();
myMap
	.set(true, "真")
	.set(false, "假");
console.log(myMap);   // {true => "真", false => "假"}
let newMap = [...myMap];
console.log(newMap);  // [[true, "真"], [false, "假"]]

数组转为 Map

将数组传入 Map 构造函数中，就可以转为 Map。

1
2
3
let arr = [[true, "真"], [false, "假"]];
let map = new Map(arr);
console.log(map);   // {true => "真", false => "假"}

Map 转为对象

如果 Map 所有的键都是字符串，它就可以转为对象。

1
2
3
4
5
6
7
8
9
10
11
function strMapToObj(strMap){
	let obj = {};
	for(let [k, v] of strMap){
		obj[k] = v;
	}
	return obj;
}
let myMap = new Map().set("green","绿").set("red","红");
console.log(myMap);                  // {"green" => "绿", "red" => "红"}
console.log( strMapToObj(myMap) );   // { green: "绿", red: "红" }

对象转为 Map

1
2
3
4
5
6
7
8
9
10
11
function objToStrMap(obj){
	let strMap = new Map();
	for(let item in obj){
		strMap.set( item, obj[item] )
	}
	return strMap;
}
let obj = { name: "zhangsan", age: 20 };
console.log( objToStrMap(obj) );    
// {"name" => "zhangsan", "age" => 20}

WeakMap

WeakMap 和 WeakSet 的作用是一样的，都是为了解决内存泄漏问题。

WeakMap 的使用也与 WeakSet 类似：

  • 无法在创建时传入一个数组进行数据初始化。
  • 只能用于存储引用数据类型。
  • 可以使用 Map 的set()、get()、has()、delete()四个方法。
  • 不能遍历。
我 秦始皇 打钱