Map

Map 是 JavaScript 中的一种新型数据结构,它存储键值对(key-value pairs),与对象类似,但具有更多的特性和更高的灵活性。Map 是 ES6 引入的,它的键可以是任何数据类型,而对象的键只能是字符串或符号(虽然它们会被自动转换为字符串)。以下是 Map 的详细用法及其相关知识点:

1. 创建 Map

你可以使用 new Map() 来创建一个空的 Map 实例,或者传入一个二维数组来初始化它。

1
2
3
4
5
6
7
8
9
// 创建一个空的 Map
const map1 = new Map();

// 创建并初始化 Map
const map2 = new Map([
['name', 'John'],
['age', 30],
['country', 'USA']
]);

2. Map 常用方法

2.1 set(key, value)

set 方法用于将一个键值对添加到 Map 中。如果键已存在,则更新该键的值。

1
2
3
4
const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);
map.set('city', 'New York');

2.2 get(key)

get 方法用于根据键获取对应的值。如果键不存在,返回 undefined

1
2
3
4
5
6
7
const map = new Map([
['name', 'Alice'],
['age', 25]
]);

console.log(map.get('name')); // 输出 'Alice'
console.log(map.get('city')); // 输出 undefined

2.3 has(key)

has 方法用于判断 Map 中是否存在某个键,返回 truefalse

1
2
console.log(map.has('age')); // true
console.log(map.has('city')); // false

2.4 delete(key)

delete 方法用于删除 Map 中指定的键值对。如果键存在,则返回 true,如果不存在则返回 false

1
2
map.delete('age');
console.log(map.has('age')); // false

2.5 clear()

clear 方法用于清空 Map 中的所有键值对。

1
2
map.clear();
console.log(map.size); // 输出 0

2.6 size

size 属性用于返回 Map 中键值对的数量。

1
2
3
4
5
const map = new Map([
['name', 'Alice'],
['age', 25]
]);
console.log(map.size); // 输出 2

2.7 keys()

keys 方法返回一个包含所有键的 Iterator 对象。可以用 for...of 循环遍历它。

1
2
3
4
for (const key of map.keys()) {
console.log(key);
}
// 输出 'name' 和 'age'

2.8 values()

values 方法返回一个包含所有值的 Iterator 对象。

1
2
3
4
for (const value of map.values()) {
console.log(value);
}
// 输出 'Alice' 和 '25'

2.9 entries()

entries 方法返回一个包含所有键值对的 Iterator 对象,每一项是一个 [key, value] 数组。

1
2
3
4
for (const [key, value] of map.entries()) {
console.log(key, value);
}
// 输出 'name Alice' 和 'age 25'

3. 遍历 Map

你可以使用 for...of 循环结合 keys(), values()entries() 方法来遍历 Map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const map = new Map([
['name', 'Alice'],
['age', 25],
]);

// 遍历键
for (const key of map.keys()) {
console.log(key); // name, age
}

// 遍历值
for (const value of map.values()) {
console.log(value); // Alice, 25
}

// 遍历键值对
for (const [key, value] of map.entries()) {
console.log(key, value); // name Alice, age 25
}

4. Map 的特性

4.1 键的顺序

Map 保持插入键值对的顺序。遍历 Map 时,键值对会按照插入的顺序返回。

1
2
3
4
5
6
7
8
9
10
11
12
const map = new Map();
map.set('first', 1);
map.set('second', 2);
map.set('third', 3);

for (const [key, value] of map) {
console.log(key, value);
}
// 输出:
// first 1
// second 2
// third 3

4.2 键可以是任何类型

与对象不同,Map 的键可以是任意类型的值,不仅仅是字符串或符号。

1
2
3
4
5
6
const map = new Map();
map.set({}, 'Object');
map.set(1, 'Number');
map.set(true, 'Boolean');

console.log(map.size); // 输出 3

4.3 Map 的性能

与对象相比,Map 在插入和查找键值对时通常具有更好的性能,尤其是当键是动态变化的或数量较大的时候。

5. Map 与 Object 的对比

特性MapObject
键的类型可以是任何类型(对象、函数、基本数据类型)只能是字符串或符号(虽然会自动转换为字符串)
插入顺序保持插入顺序不保证插入顺序(但大多数现代浏览器会按顺序)
存取性能通常较好,尤其是大量数据时在键是字符串时较好
是否可迭代是,支持直接迭代键、值或键值对否,需要 for...inObject.keys()

6. 应用场景

  • 键是任意类型的情况:当你需要使用对象以外的类型作为键时,Map 是更好的选择。
  • 频繁更新和查询操作Map 提供了更高效的插入、查找和删除操作,尤其是对于大量数据的场景。
  • 需要保证插入顺序:如果你需要保证插入顺序,Map 可以更方便地满足需求。