ECMAScript 2021 中的 Map 和 WeakMap：如何存储键值对
前言
在前端开发中，存储数据是常见的操作。而 JavaScript 中的 Map 和 WeakMap 是常用的键值对存储方式。这篇文章将着重介绍 ECMAScript 2021 中的 Map 和 WeakMap，探讨其特性、用法以及实际应用场景。
简介
Map 和 WeakMap 都是 ECMAScript 6 中引入的新数据类型，用于存储键值对。其中 Map 是一种强引用类型的集合，而 WeakMap 是一种弱引用类型的集合。两者可以用来存储任何类型的数据，包括基本类型数据。
Map
Map 可以视为对象的一种替代方案，其具有以下特性：
- 保存的键值对可以是任何类型的。
- 键的顺序是插入顺序的。
- 可以使用 for...of 循环遍历 Map。
- Map 支持 size 属性，可以获取 Map 的大小。
使用 Map
创建 Map
创建 Map 可以使用 new Map() 构造函数。当然，也可以直接传入键值对数组。
const map = new Map();
map.set('name', 'Tom');
map.set('age', 18);
console.log(map); // Map(2) {"name" => "Tom", "age" => 18}访问 Map
可以直接使用 get() 方法访问 Map 中的键值对，如果键不存在，则返回 undefined。
console.log(map.get('name')); // "Tom"
console.log(map.get('gender')); // undefined判断键是否存在
可以使用 has() 方法判断 Map 是否存在某个键。
console.log(map.has('name')); // true
console.log(map.has('gender')); // false删除键值对
可以使用 delete() 方法删除 Map 中的某个键值对，也可以使用 clear() 方法删除所有键值对。
map.delete('name');
console.log(map); // Map(1) {"age" => 18}
map.clear();
console.log(map); // Map(0) {}遍历 Map
可以使用 for...of 循环遍历 Map 中的所有键值对。
-- -------------------- ---- ------- ----- --- - --- ----- -------- ------- ------- ---- --- --- ------ ----- ------ -- ---- - -------------------- ----------- - -- ----- --- -- ---- --
WeakMap
WeakMap 是一种弱引用类型的集合，相比于 Map，它具有以下特性：
- 保存的键必须是对象。
- 键值对是弱引用的，这意味着在没有其他强引用的情况下，键会被垃圾回收。
- WeakMap 没有 size 属性，也无法遍历其中的键值对。
使用 WeakMap
创建 WeakMap
创建 WeakMap 可以使用 new WeakMap() 构造函数。和 Map 一样，也可以直接传入键值对数组。
const obj1 = {};
const obj2 = {};
const weakMap = new WeakMap([[obj1, 'foo'], [obj2, 'bar']]);
console.log(weakMap); // WeakMap {{} => "foo", {} => "bar"}访问 WeakMap
可以使用 get() 方法访问 WeakMap 中的键值对，如果键不存在，则返回 undefined。
console.log(weakMap.get(obj1)); // "foo"
console.log(weakMap.get({})); // undefined判断键是否存在
因为键值对是弱引用的，所以无法直接使用 has() 方法判断 WeakMap 是否存在某个键。但是，可以使用 Object.is() 方法比较键值对中的键是否相等。
console.log(Object.is(obj1, {})); // false
console.log(weakMap.get(obj1) !== undefined); // true删除键值对
因为键值对是弱引用的，当键没有其他强引用时，键值对会被自动删除。所以无法直接删除键值对。
应用场景
Map
在实际应用中，Map 通常用于：
- 存储键值对。
- 管理任意类型的数据。
- 记录任意应用程序的状态。
例如，用 Map 存储表单数据，可以避免输入框 ID 的冲突，也不需要显式地将 ID 与值相关联。
const formData = new Map();
formData.set('name', 'Tom');
formData.set('age', 18);WeakMap
在实际应用中，WeakMap 通常用于：
- 避免内存泄漏。
- 添加私有变量。
例如，通过 WeakMap 实现私有变量。
const privateData = new WeakMap();
function Person() {
privateData.set(this, { age: 18 });
}
Person.prototype.getAge = function () {
return privateData.get(this).age;
};总结
本文主要介绍了 ECMAScript 2021 中的 Map 和 WeakMap，探讨了其特性、用法以及实际应用场景。Map 通常用于存储任意类型的键值对，而 WeakMap 通常用于存储对象类型的键值对，避免内存泄漏等问题。在使用前需根据实际场景选择适合的存储方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485891848841e9894455a22