ES6 中新增的 Map 和 WeakMap 容器的应用实例-JavaScript中文网-JavaScript教程资源分享门户

1. 概述

ES6 中新增了两种容器类型：Map 和 WeakMap。它们都可以用来存储键值对，但是两者之间有一些区别。Map 可以用任何类型的值作为键，而 WeakMap 只能用对象作为键。另外，WeakMap 中的键是弱引用，不会阻止垃圾回收器回收对象。

在前端开发中，我们经常需要使用键值对来存储数据。Map 和 WeakMap 提供了一种非常方便的方式来实现这一功能。本文将介绍 Map 和 WeakMap 的应用实例，并且详细讲解它们的使用方法和指导意义。

2. Map 的应用实例

Map 可以用来存储任何类型的值作为键，用法和 Object 类似，但是它的功能更加强大。下面是一些 Map 的应用实例：

2.1 存储对象

const map = new Map();
const obj1 = { name: 'Alice' };
const obj2 = { name: 'Bob' };
map.set(obj1, 1);
map.set(obj2, 2);
console.log(map.get(obj1)); // 1
console.log(map.get(obj2)); // 2

2.2 存储函数

const map = new Map();
const func1 = () => console.log('Hello');
const func2 = () => console.log('World');
map.set(func1, 'Hello');
map.set(func2, 'World');
console.log(map.get(func1)); // 'Hello'
console.log(map.get(func2)); // 'World'

2.3 存储 DOM 元素

const map = new Map();
const div1 = document.createElement('div');
const div2 = document.createElement('div');
map.set(div1, 'div1');
map.set(div2, 'div2');
console.log(map.get(div1)); // 'div1'
console.log(map.get(div2)); // 'div2'

2.4 存储数据

const map = new Map();
map.set('name', 'Alice');
map.set('age', 18);
console.log(map.get('name')); // 'Alice'
console.log(map.get('age')); // 18

2.5 遍历 Map

const map = new Map();
map.set('name', 'Alice');
map.set('age', 18);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}
// 'name: Alice'
// 'age: 18'

2.6 使用 Map 替代对象

在一些情况下，我们可以使用 Map 替代对象。Map 可以更好地处理键值对的操作，而且它的性能也更好。

const obj = { name: 'Alice', age: 18 };
const map = new Map(Object.entries(obj));
console.log(map.get('name')); // 'Alice'
console.log(map.get('age')); // 18

3. WeakMap 的应用实例

WeakMap 只能用对象作为键，而且键是弱引用，不会阻止垃圾回收器回收对象。下面是一些 WeakMap 的应用实例：

3.1 存储私有变量

在 JavaScript 中，没有私有变量的概念。但是我们可以使用 WeakMap 来存储私有变量，这样就可以避免变量被外部访问。

// javascriptcn.com 代码示例
const privateData = new WeakMap();
class Person {
  constructor(name) {
    privateData.set(this, { name });
  }
  getName() {
    return privateData.get(this).name;
  }
}
const alice = new Person('Alice');
console.log(alice.getName()); // 'Alice'
console.log(privateData.get(alice)); // undefined

3.2 存储 DOM 元素的数据

在一些情况下，我们需要在 DOM 元素上存储一些数据。但是如果我们使用普通的对象来存储数据，可能会造成内存泄漏。这时候，我们可以使用 WeakMap 来存储数据，这样可以避免内存泄漏的问题。

const data = new WeakMap();
const div = document.createElement('div');
data.set(div, { name: 'Alice' });
console.log(data.get(div)); // { name: 'Alice' }

4. 总结

Map 和 WeakMap 是 ES6 中新增的容器类型，它们都可以用来存储键值对。Map 可以用任何类型的值作为键，而 WeakMap 只能用对象作为键。另外，WeakMap 中的键是弱引用，不会阻止垃圾回收器回收对象。

在前端开发中，我们经常需要使用键值对来存储数据。Map 和 WeakMap 提供了一种非常方便的方式来实现这一功能。使用 Map 和 WeakMap 可以提高代码的可读性和性能，同时还可以避免一些常见的问题，比如内存泄漏和变量被外部访问等问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650a80e395b1f8cacd4db814