ES6中的Set、WeakSet、Map和WeakMap：你真正了解它们吗？
2023-11-25 17:51:56
ES6 中的 Set、WeakSet、Map 和 WeakMap 都是数据结构，它们可以帮助你更有效地处理和存储数据。这些数据结构提供了许多强大的功能，可以让你轻松地管理和操作数据。
Set：集合数据结构
Set 是一种无序集合数据结构，它可以存储任何类型的元素，包括基本类型（如数字、字符串、布尔值）和引用类型（如对象、数组、函数）。Set 中的元素是唯一的，这意味着它不会存储重复的元素。
WeakSet：弱集合数据结构
WeakSet 是一种弱集合数据结构，它只能存储对象类型的数据。WeakSet 中的元素也是唯一的，但与 Set 不同的是，WeakSet 中的对象元素不会阻止垃圾回收器回收它们。这意味着，如果对象不再被任何其他变量或对象引用，垃圾回收器就会自动将其从 WeakSet 中删除。
Map：字典数据结构
Map 是一种字典数据结构，它可以存储键值对。Map 中的键可以是任何类型的数据，包括基本类型和引用类型。Map 中的值可以是任何类型的数据，包括基本类型、引用类型和函数。
WeakMap：弱字典数据结构
WeakMap 是一种弱字典数据结构，它只能存储对象类型的键和值。WeakMap 中的键和值也是唯一的，但与 Map 不同的是，WeakMap 中的对象元素不会阻止垃圾回收器回收它们。这意味着，如果对象不再被任何其他变量或对象引用，垃圾回收器就会自动将其从 WeakMap 中删除。
这四种数据结构的区别和使用场景
这四种数据结构各有其特点和使用场景。
- Set：Set 适用于需要存储唯一元素的数据集，例如，可以用来存储用户ID、产品ID等。
- WeakSet：WeakSet 适用于需要存储对象类型数据但不需要阻止垃圾回收器回收这些对象的数据集，例如，可以用来存储 DOM 元素、事件监听器等。
- Map：Map 适用于需要存储键值对的数据集，例如，可以用来存储用户信息、产品信息等。
- WeakMap：WeakMap 适用于需要存储对象类型的键和值但不需要阻止垃圾回收器回收这些对象的数据集，例如，可以用来存储私有数据、元数据等。
Set 的用法示例
// 创建一个 Set
const mySet = new Set();
// 向 Set 中添加元素
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(4);
mySet.add(5);
// 检查 Set 中是否存在某个元素
console.log(mySet.has(3)); // true
// 从 Set 中删除某个元素
mySet.delete(3);
// 获取 Set 中元素的数量
console.log(mySet.size); // 4
// 遍历 Set 中的元素
for (const item of mySet) {
console.log(item); // 1, 2, 4, 5
}
WeakSet 的用法示例
// 创建一个 WeakSet
const myWeakSet = new WeakSet();
// 向 WeakSet 中添加元素
const obj1 = {};
const obj2 = {};
myWeakSet.add(obj1);
myWeakSet.add(obj2);
// 检查 WeakSet 中是否存在某个元素
console.log(myWeakSet.has(obj1)); // true
// 从 WeakSet 中删除某个元素
myWeakSet.delete(obj1);
// 获取 WeakSet 中元素的数量
console.log(myWeakSet.size); // 1
// 遍历 WeakSet 中的元素
for (const item of myWeakSet) {
console.log(item); // obj2
}
Map 的用法示例
// 创建一个 Map
const myMap = new Map();
// 向 Map 中添加键值对
myMap.set('name', 'John Doe');
myMap.set('age', 30);
myMap.set('city', 'New York');
// 获取 Map 中某个键对应的值
console.log(myMap.get('name')); // John Doe
// 检查 Map 中是否存在某个键
console.log(myMap.has('age')); // true
// 从 Map 中删除某个键值对
myMap.delete('city');
// 获取 Map 中键值对的数量
console.log(myMap.size); // 2
// 遍历 Map 中的键值对
for (const [key, value] of myMap) {
console.log(`${key}: ${value}`); // name: John Doe, age: 30
}
WeakMap 的用法示例
// 创建一个 WeakMap
const myWeakMap = new WeakMap();
// 向 WeakMap 中添加键值对
const obj1 = {};
const obj2 = {};
myWeakMap.set(obj1, 'John Doe');
myWeakMap.set(obj2, 30);
// 获取 WeakMap 中某个键对应的值
console.log(myWeakMap.get(obj1)); // John Doe
// 检查 WeakMap 中是否存在某个键
console.log(myWeakMap.has(obj1)); // true
// 从 WeakMap 中删除某个键值对
myWeakMap.delete(obj1);
// 获取 WeakMap 中键值对的数量
console.log(myWeakMap.size); // 1
// 遍历 WeakMap 中的键值对
for (const [key, value] of myWeakMap) {
console.log(`${key}: ${value}`); // obj2: 30
}
希望这篇博文能够帮助你更好地了解 ES6 中的 Set、WeakSet、Map 和 WeakMap。这些数据结构非常强大，可以让你轻松地管理和操作数据。
