数据结构攻略：Set、WeakSet、Map、WeakMap让你的代码更闪耀

2022-12-16 11:13:00

揭开 JavaScript 数据结构的奥秘：Set、WeakSet、Map 和 WeakMap

在 JavaScript 的纷繁复杂的世界中，数据结构扮演着至关重要的角色，它们就像精湛的乐器，演奏着高效、优雅的代码旋律。在这篇文章中，我们将深入探究四种重量级的 JavaScript 数据结构：Set、WeakSet、Map 和 WeakMap，揭开它们的秘密武器，让你在代码创作中游刃有余。

Set 和 WeakSet：集合兄弟的独家秘技

Set 和 WeakSet，就像一对出生入死的兄弟，都是集合结构，能够存储唯一值，防止重复的元素潜入。但它们又各怀绝技，有着微妙的差别。

Set 的包容性极强，可以容纳任何类型的数据，就像一个杂货铺，里面摆满了各种各样的商品。而 WeakSet 则更加挑剔，它只青睐对象，就像一家只卖衣服的精品店，专门为对象量身打造。

更重要的是，WeakSet 具备一个独门绝技，它采用弱引用来指向对象，防止内存泄漏。就像一个松散的握手，WeakSet 不会牢牢抓住对象，一旦对象不再被其他部分引用，它就会被释放，避免内存堆积如山。

Map 和 WeakMap：键值对夫妻的默契配合

Map 和 WeakMap，就像一对默契十足的夫妻，共同演绎着键值对的精彩舞步。它们允许你将键与值关联起来，就像一本精致的字典，用单词作为键，查找对应的解释。

Map 的强大之处在于，它可以存储任何类型的键和值，就像一个万能字典，包罗万象。而 WeakMap 的特长在于，它的键只能是对象，就像一个专门记载人物传记的字典，让对象作为主角闪耀舞台。

同样地，WeakMap 也采用了弱引用来指向键，防止内存泄漏。它就像是字典的轻量化版本，当对象不再被引用时，它会悄然释怀，让内存保持清爽。

应用场景：发挥数据结构的真功夫

Set 和 WeakSet 的应用场景可谓五花八门。它们可以帮你：

去除数组中的重复项，就像一个精明的剔除师，清除重复的杂质。
进行集合运算，就像数学家玩转集合论，求并集、交集、差集，轻松自如。
遍历集合，就像一个探险家，逐一探索集合中的元素，发现其中的奥秘。

Map 和 WeakMap 也毫不逊色，在对象作为键的场景中大显身手。它们能胜任：

缓存数据，就像一个贴心的管家，将经常使用的数据妥善保管，提高访问效率。
创建对象池，就像一个神奇的造物主，批量生产对象，供开发者取用。
实现数据绑定，就像一个无形的纽带，将数据与界面元素紧密相连，让界面随数据而舞。

示例代码：实践出真知

为了让你亲身体验这些数据结构的魅力，我们奉上以下代码示例：

// 使用 Set 去除数组中的重复元素
const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = new Set(numbers);
console.log(uniqueNumbers); // 输出：Set { 1, 2, 3, 4, 5 }

// 使用 WeakSet 存储 DOM 元素，防止内存泄漏
const elements = document.querySelectorAll('div');
const weakElements = new WeakSet(elements);

// 使用 Map 存储键值对
const person = { name: 'John Doe', age: 30 };
const map = new Map();
map.set(person, 'customer');

// 使用 WeakMap 存储对象键，防止内存泄漏
const weakMap = new WeakMap();
weakMap.set(person, 'customer');