在前端开发中，JavaScript 是不可或缺的一部分。随着 ES6 和 ES7 的推出，JavaScript 语言得到了很大的提升和改进。其中，Map 和 WeakMap 是 ES6 和 ES7 中新增的两个数据结构，它们能够更好地满足我们在实际开发中的需求。本文将详细介绍 Map 和 WeakMap 的使用方法，并提供示例代码，帮助读者更好地掌握这两个数据结构。
Map
Map 是一种键值对的集合，其中的每个键和值都可以是任意类型的数据。Map 的键和值可以是对象、数组、字符串、数字等类型的数据，而且键和值之间是一一对应的关系。Map 中的元素是按照插入顺序排序的，所以可以通过遍历 Map 来获取它的元素。Map 中的元素也可以通过键来获取，如果键不存在，则返回 undefined。
创建 Map
可以通过以下方式来创建一个 Map：
const map = new Map();
添加元素
可以通过 set() 方法向 Map 中添加元素。set() 方法接收两个参数，第一个参数是键，第二个参数是值。如果键已经存在，则会更新对应的值。
map.set('name', 'John');
map.set('age', 25);
map.set('gender', 'male');获取元素
可以通过 get() 方法来获取 Map 中的元素。get() 方法接收一个参数，即键，返回对应的值。如果键不存在，则返回 undefined。
const name = map.get('name');
console.log(name); // John删除元素
可以通过 delete() 方法来删除 Map 中的元素。delete() 方法接收一个参数，即键。如果键存在，则删除对应的元素，并返回 true；如果键不存在，则返回 false。
const result = map.delete('age');
console.log(result); // true遍历元素
可以通过 for...of 循环来遍历 Map 中的元素。for...of 循环会遍历 Map 中的键值对，每次循环返回一个数组，数组的第一个元素是键，第二个元素是值。
for (const [key, value] of map) {
console.log(key + ' = ' + value);
}示例代码
下面是一个使用 Map 的示例代码，它实现了一个计数器，可以统计字符串中每个字符出现的次数：
-- -------------------- ---- -------
-------- -------------------- -
----- --- - --- ------
--- ------ ---- -- ---- -
-- --------------- -
------------- ------------- - ---
- ---- -
------------- ---
-
-
------ ----
-
----- ------ - ---------------------- --------
--------------------输出结果为：
-- -------------------- ---- ------- ------ - --- -- -- --- -- -- --- -- -- --- -- -- - - -- -- --- -- -- --- -- -- --- -- - -
WeakMap
WeakMap 也是一种键值对的集合，但是它的键必须是对象。WeakMap 中的键是弱引用的，也就是说，如果键所引用的对象被垃圾回收了，那么这个键也会自动从 WeakMap 中被删除。WeakMap 中的值可以是任意类型的数据。
创建 WeakMap
可以通过以下方式来创建一个 WeakMap：
const weakMap = new WeakMap();
添加元素
可以通过 set() 方法向 WeakMap 中添加元素。set() 方法接收两个参数，第一个参数是键，必须是对象，第二个参数是值。
const key = {};
weakMap.set(key, 'value');获取元素
可以通过 get() 方法来获取 WeakMap 中的元素。get() 方法接收一个参数，即键，返回对应的值。如果键不存在，则返回 undefined。
const value = weakMap.get(key); console.log(value); // value
删除元素
由于 WeakMap 中的键是弱引用的，所以不需要手动删除元素。如果键所引用的对象被垃圾回收了，那么这个键也会自动从 WeakMap 中被删除。
示例代码
下面是一个使用 WeakMap 的示例代码，它实现了一个私有变量：
-- -------------------- ---- -------
----- ----------- - --- ----------
----- ------ -
----------------- -
--------------------- - ---- ---
-
--------- -
------ ---------------------------
-
-
----- ------ - --- ---------------
------------------------------ -- ----
------------------------------------- -- ---------在这个示例代码中，我们使用 WeakMap 来存储私有变量。我们创建了一个类 Person，它有一个私有变量 name，我们使用 privateData 来存储这个私有变量。在 getName() 方法中，我们通过 this 来获取私有变量，并返回它的值。在外部，我们无法通过 privateData 来获取私有变量，因为 privateData 中的键是弱引用的，如果键所引用的对象被垃圾回收了，那么这个键也会自动从 WeakMap 中被删除。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d3f9c8a941bf71347874a0