在前端领域中，我们经常需要使用对象来存储和处理数据。然而，对象的实现方式并不是最优的，特别是在处理大量数据和需要进行垃圾回收时。这时候，使用 ES6 中的 Map 和 WeakMap 可以提高性能，减少内存占用。本文将详细介绍 Map 和 WeakMap 的用法及其优劣势，并提供示例代码以便读者更好的理解和实践。
Map
Map 是 ES6 提供的一种新的数据结构，它可以存储键值对，并且键和值可以是任意类型。与对象不同，Map 的键和值是完全独立的，因此可以非常灵活地处理数据。以下是一个简单的示例：
const myMap = new Map();
myMap.set('name', 'Tom');
myMap.set('age', 18);
myMap.set('gender', 'male');
console.log(myMap.get('name')); // 输出：Tom
console.log(myMap.size); // 输出：3上面的代码中，我们定义了一个 Map 对象，并且向其中添加了三个键值对，其中键是字符串类型，值可以是任意类型。使用 set 方法添加键值对，使用 get 方法获取键对应的值，使用 size 属性获取 Map 的大小。
Map 相较于对象的优势在于：
- 键可以是任意类型，包括原始类型和对象，甚至是 NaN。
- 支持迭代器，可以方便地遍历键值对。
- 自动处理键的重复，当添加重复的键时，后面的值会覆盖前面的值。
- 垃圾回收更加高效，不会因为被引用而占用内存。
我们可以通过以下代码来比较 Map 和对象的性能差异：
// javascriptcn.com 代码示例
const myMap = new Map();
const myObj = {};
console.time('map');
for (let i = 0; i < 1000000; i++) {
myMap.set(i, i);
}
console.timeEnd('map');
console.time('object');
for (let i = 0; i < 1000000; i++) {
myObj[i] = i;
}
console.timeEnd('object');在我的电脑上，上面的代码在 Chrome 浏览器中输出的结果如下：
map: 23.360107421875ms object: 15.5810546875ms
可以看到，对象略微快一些。然而，当数据量增大时，Map 的优势就可以体现出来。
WeakMap
WeakMap 与 Map 类似，也是存储键值对的集合。但是，WeakMap 有一些不同寻常的行为。首先，它只能使用对象作为键，而且键必须是对象的弱引用。这意味着当对象被垃圾回收时，WeakMap 中相应的键值对也会自动删除，而不需要手动处理。
以下是一个简单的示例：
// javascriptcn.com 代码示例
const myWeakMap = new WeakMap();
const obj1 = {}, obj2 = {}, obj3 = {};
myWeakMap.set(obj1, 1);
myWeakMap.set(obj2, 2);
console.log(myWeakMap.get(obj1)); // 输出：1
obj1 = null;
console.log(myWeakMap.get(obj1)); // 输出：undefined上面的代码中，我们创建了一个 WeakMap 对象，并向其中添加了两个键值对，键都是对象。当我们将 obj1 设为 null 时，它指向的对象就没有强引用了，因此在下次垃圾回收时，这个对象将被删除，并且 WeakMap 中相应的键值对也会自动删除。
与 Map 相比，WeakMap 有以下优势：
- 自动处理键的重复，当添加重复的键时，后面的值会覆盖前面的值。
- 更加高效的垃圾回收，不会因为被引用而占用内存。
- 只能使用对象作为键，确保键的唯一性，避免命名冲突和代码混淆。
需要注意的是，由于使用弱引用作为键，WeakMap 有以下限制：
- 不能迭代，不存在 keys 和 values 方法或者 size 属性。
- 不能用于序列化（即不能将 WeakMap 转换为 JSON）。
使用 Map 和 WeakMap 优化代码
Map 和 WeakMap 的优势在于可以减少代码中的命名冲突和垃圾回收，同时也可以使代码更加简洁和易于维护。
以下是一些常见的使用场景：
避免命名冲突
在 JavaScript 中，全局变量、对象属性和函数名都是公共空间，如果不小心使用了相同的名称，就会造成命名冲突。使用 Map 可以有效避免这种情况。
const myMap = new Map();
myMap.set('func1', () => console.log('function one'));
myMap.set('func2', () => console.log('function two'));
function test() {
const fun = myMap.get('func1');
fun();
}上面的代码中，我们将两个函数分别存储在了 Map 中，这样它们的名称可以不同，避免了命名冲突。在 test 函数中，我们通过 get 方法获取了 Map 中的值，并且调用了这个函数。
缓存数据
有些操作需要花费一定的时间和计算资源才能完成，例如加载远程数据、解析 XML 等。使用 Map 可以缓存这些操作的结果，避免重复计算和网络请求，提高性能和减少延迟。
// javascriptcn.com 代码示例
const myMap = new Map();
function fetchData(url) {
if (myMap.has(url)) {
return Promise.resolve(myMap.get(url));
}
return fetch(url)
.then(response => response.json())
.then(data => {
myMap.set(url, data);
return data;
});
}上面的代码中，我们定义了一个 fetchData 函数，它接受一个远程 URL 地址并返回 Promise 对象。在函数中，我们首先检查 Map 中是否已经有了这个 URL 对应的数据，如果有就直接返回，否则就发起网络请求，获取数据并存储到 Map 中，然后返回数据。
页面控制
在一些场景下，我们需要创建多个页面，并且每个页面之间需要共享一些状态信息，例如用户登录状态、应用设置等。使用 WeakMap 可以使页面之间的状态信息不会因为引用而占用内存，同时也避免了命名冲突和垃圾回收。
// javascriptcn.com 代码示例
const myWeakMap = new WeakMap();
class Page {
constructor(id) {
this.id = id;
this.data = {};
myWeakMap.set(this, {});
}
setData(key, value) {
const data = myWeakMap.get(this);
data[key] = value;
}
getData(key) {
const data = myWeakMap.get(this);
return data[key];
}
}
const page1 = new Page('id1');
const page2 = new Page('id2');
page1.setData('name', 'Tom');
page2.setData('name', 'Jerry');
console.log(page1.getData('name')); // 输出：Tom
console.log(page2.getData('name')); // 输出：Jerry上面的代码中，我们定义了一个 Page 类，用来表示页面。在类的构造函数中，我们使用 WeakMap 存储了一个空对象，用来存储页面的状态信息。在 setData 和 getData 方法中，我们通过 this 来获取 WeakMap 中存储的状态信息，实现了页面状态共享的功能。
总结
Map 和 WeakMap 是 ES6 中新增的数据结构，可以用来存储和处理数据，并且具有很多优势，例如支持任意类型的键、键值对的完全独立、自动处理键的重复、垃圾回收效率高等。
我们可以使用 Map 和 WeakMap 来优化前端代码，例如避免命名冲突、缓存数据、页面控制等等。同时，使用它们也要考虑到它们各自的优缺点，并选择合适的场景来使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6538a2c67d4982a6eb192364