ES6 Map的介绍与API-ES6入门指南

当前位置:　首页>> 技术小册>> ES6入门指南

Map是ES6中新增的一种数据结构，它允许开发者通过键值对的方式存储和获取数据。Map的设计目的是用来更好地管理数据，并解决原有JavaScript数据结构的一些不足之处。

1、创建Map
在ES6中，创建一个空的Map可以使用new Map()的方式。下面的代码示例创建了一个名为map的Map对象：

const map = new Map();

我们也可以在创建时添加键值对：

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

2、添加和获取数据
在Map中添加数据可以使用set()方法。set()方法接受两个参数，第一个参数为键，第二个参数为值。下面的代码示例向map中添加了两个键值对：

map.set('key1', 'value1');
map.set('key2', 'value2');

获取Map中的值可以使用get()方法。get()方法接受一个参数，即键名。下面的代码示例从map中获取了key1的值：

const value = map.get('key1');
console.log(value); // 输出'value1'

3、删除数据
在Map中删除数据可以使用delete()方法。delete()方法接受一个参数，即键名。下面的代码示例从map中删除了key1：

map.delete('key1');

4、检查键是否存在
在Map中检查某个键是否存在可以使用has()方法。has()方法接受一个参数，即键名。下面的代码示例检查了key1是否存在于map中：

const hasKey1 = map.has('key1');
console.log(hasKey1); // 输出'false'

5、获取Map的大小
在Map中获取键值对的数量可以使用size属性。下面的代码示例获取了map的大小：

const size = map.size;
console.log(size); // 输出'1'

6、遍历Map
在Map中遍历键值对可以使用forEach()方法。forEach()方法接受一个回调函数，该回调函数接受三个参数：值、键、以及Map对象本身。下面的代码示例遍历了map中的所有键值对：

map.forEach((value, key, map) => {
  console.log(`${key}: ${value}`);
});

除了使用forEach()方法，我们还可以使用for…of循环遍历Map中的所有键值对。下面的代码示例使用for…of循环遍历了map中的所有键值对：

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

7、Map的特点
Map与传统的JavaScript对象相比有一些独特的特点：

键可以是任意类型：在JavaScript对象中，键必须是字符串或Symbol类型。而在Map中，键可以是任意类型，包括基本类型和引用类型。
Map是有序的：在JavaScript对象中，属性的顺序是不确定的。而在Map中，键值对的顺序是按照添加的顺序确定的。
Map的大小可以轻松获取：在JavaScript对象中，获取属性的数量需要手动计数。而在Map中，我们可以使用size属性轻松获取键值对的数量。
Map的性能更好：在对大量数据进行操作时，Map的性能通常比JavaScript对象更好。因为在Map中，查找、添加、删除数据的时间复杂度通常是O(log n)或O(1)，而在JavaScript对象中，这些操作的时间复杂度通常是O(n)。

示例
下面是一个完整的使用Map的示例，我们将使用Map来记录一些学生的信息：

const students = new Map();
// 添加学生信息
students.set('1001', { name: 'Tom', age: 18 });
students.set('1002', { name: 'Jack', age: 20 });
students.set('1003', { name: 'Lucy', age: 19 });
// 获取学生信息
const student1001 = students.get('1001');
console.log(student1001); // 输出'{ name: 'Tom', age: 18 }'
// 检查学生是否存在
const has1004 = students.has('1004');
console.log(has1004); // 输出'false'
// 删除学生信息
students.delete('1003');
// 遍历学生信息
students.forEach((value, key) => {
  console.log(`${key}: ${value.name} (${value.age})`);
});
// 获取学生数量
const size = students.size;
console.log(size); // 输出'2'

在上面的示例中，我们使用了Map来管理学生信息，每个学生对应一个唯一的学号。我们通过set()方法向Map中添加了学生信息，通过get()方法获取学生信息，通过has()方法检查学生是否存在，通过delete()方法删除学生信息，通过forEach()方法遍历学生信息，通过size属性获取学生数量。

8、Map的方法
除了上面示例中用到的set()、get()、has()、delete()、forEach()、size方法外，Map还提供了其他常用方法，下面我们逐一介绍：

clear()：清空Map中的所有键值对。

const myMap = new Map();
myMap.set(1, 'one');
myMap.set(2, 'two');
myMap.clear();
console.log(myMap.size); // 输出'0'

entries()：返回一个包含Map中所有键值对的迭代器。

const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
const entries = myMap.entries();
console.log(entries.next().value); // 输出'['key1', 'value1']'
console.log(entries.next().value); // 输出'['key2', 'value2']'

keys()：返回一个包含Map中所有键的迭代器。

const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
const keys = myMap.keys();
console.log(keys.next().value); // 输出'key1'
console.log(keys.next().value); // 输出'key2'

values()：返回一个包含Map中所有值的迭代器。

const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
const values = myMap.values();
console.log(values.next().value); // 输出'value1'
console.log(values.next().value); // 输出'value2'

forEach(callbackFn, thisArg?)：遍历Map中的每个键值对，执行回调函数callbackFn。如果提供了thisArg参数，回调函数中的this将指向该参数。

const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
myMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 输出：
// 'key1: value1'
// 'key2: value2'