引言
在前端开发中，经常会遇到需要存储一些键值对的需求，并在代码中进行增删改查等操作。传统上，我们一般会使用 JavaScript 中的对象进行存储和操作，但是对象在操作上存在一些限制和缺陷。因此，ES2021 引入了散列映射表（Map），解决了对象存在的一些问题，并为我们的编码提供了更加便利的方式。
散列映射表（Map）的基本概念
散列映射表是一种存储键值对的数据结构，类似于对象，但是它的键和值可以是任意数据类型。通过它，我们可以快速地进行增删改查操作，并且可以有效地避免对象存在的一些限制和缺陷。
ES2021 中散列映射表（Map）的优势
相比于对象，散列映射表（Map）有以下几个优势：
- 键可以是任意数据类型，不仅限于字符串和符号。
- 散列映射表有内置的迭代器（iterator），可以更加方便地进行遍历。
- 支持通过 .size 属性获取键值对数量。
- 使用 Map.set() 方法时，可以使用链式语法向 Map 中无限添加键值对（用对象时是不行的）。
- Map 中的键值对是有顺序的，这是因为 Map 内部使用了链表，而这对一些需要保持顺序的场景非常有用。
散列映射表（Map）的基本方法
散列映射表的基本方法如下：
Map.set(key, value)
向映射表中添加一个新的键值对，如果键已经存在，则更新键的值。
const myMap = new Map();
myMap.set(0, "zero"); // 键是数字 0，值是 "zero"
myMap.set(1, "one"); // 键是数字 1，值是 "one"
myMap.set("some string", "stringValue"); // 键是字符串 "some string"，值是 "stringValue"
console.log(myMap); // Map {0 => "zero", 1 => "one", "some string" => "stringValue"}Map.get(key)
从映射表中获取对应键的值，如果不存在，则返回 undefined。
console.log(myMap.get("some string")); // "stringValue"
console.log(myMap.get(1)); // "one"
console.log(myMap.get("no such key")); // undefinedMap.has(key)
检查映射表中是否存在对应键的值，如果存在，则返回 true，否则返回 false。
console.log(myMap.has("some string")); // true
console.log(myMap.has(2)); // falseMap.delete(key)
从映射表中删除对应键的值。
myMap.delete("some string");
console.log(myMap.has("some string")); // false
console.log(myMap); // Map {0 => "zero", 1 => "one"}Map.clear()
从映射表中删除所有键值对。
myMap.clear();
console.log(myMap); // Map {}Map.forEach()
遍历映射表中的所有键值对。
const myMap = new Map([["key1", "value1"], ["key2", "value2"], ["key3", "value3"]]);
myMap.forEach((value, key) => {
console.log(`${key} = ${value}`);
});示例代码
下面是一个使用散列映射表存储课程成绩的示例代码：
-- -------------------- ---- ------- -- -------- ----- ------ - --- ------ -- ----- ------------------- ---- ----------------- ---- --------------------- ---- -- ----- --------------------------------- -- -- -- ----- ---------------------- ---- -- - -------------------- ----------- ---
总结
ES2021 引入了散列映射表（Map）这一数据结构，用于存储键值对，并提供了各种便捷操作。Map 的优势在于键可以是任意数据类型，内置了迭代器，支持通过 .size 属性获取键值对数量。同时，Map 中的键值对是有顺序的，并且可以通过 .set() 方法使用链式语法向 Map 中无限添加键值对。在日常前端开发中，散列映射表的使用将更加方便和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64969d2348841e98943d1140