企业官网建设流程全解析

ES6-learning：Set和Map集合的完整使用教程

【免费下载链接】ES6-learning《深入理解ES6》教程学习笔记项目地址: https://gitcode.com/gh_mirrors/es6l/ES6-learning

ES6-learning是《深入理解ES6》的教程学习笔记项目，其中详细介绍了Set和Map集合这两种强大的数据结构。本教程将带你全面掌握Set和Map集合的使用方法，从基础概念到实际应用，让你轻松上手ES6新特性。

一、Set集合：高效处理不重复元素

1.1 创建Set集合的简单方法

Set集合是一种无重复元素的有序列表，创建一个Set集合非常简单：

// 创建一个空Set集合 const mySet = new Set(); // 从数组创建Set集合 const numberSet = new Set([1, 2, 3, 4, 5]);

Set集合的特点是没有key，没有下标，只有size属性和一系列原型方法，以及一个可迭代的不重复元素的类数组结构。

1.2 Set集合的核心特性与应用

Set集合最显著的特性是其元素的不可重复性，这使得它非常适合用于：

• 数组去重：js面试中，经常会考的一道数组去重题目，就可以使用Set集合的不可重复性来处理。
• 元素存在性检查：通过has()方法快速检测指定的值是否存在
• forEach遍历：使用forEach处理每个值

// 数组去重示例 const arr = [1, 2, 2, 3, 3, 3]; const uniqueArr = [...new Set(arr)]; // [1, 2, 3]

1.3 Weak Set：处理对象弱引用的特殊集合

Set集合本身是强引用，只要new Set()实例化的引用存在，就不释放内存。这在某些场景下可能导致内存泄漏，比如存储DOM元素引用时。

这时可以使用Weak Set集合，它存放对象的弱引用，当该对象的其他强引用被清除时，集合中的弱引用也会自动被垃圾回收机制回收。追踪成组的对象是该集合最好的使用方式。

// 创建Weak Set集合 const weakSet = new WeakSet(); const obj = { name: "测试对象" }; weakSet.add(obj);

二、Map集合：更强大的键值对存储方案

2.1 Map集合与对象的区别

Map集合可以看作是比Object更加强大的对象，它允许任何类型的键（包括对象），并且能够保持键的插入顺序。

对比Set集合的原型，Map集合的原型多了set()和get()方法。注意set()方法和Set集合不是一个东西：

• Map没有add方法，使用set()添加键值对
• 在Set集合中，使用add()添加value，没有key

2.2 Map集合的基本操作

// 创建一个空Map集合 const myMap = new Map(); // 添加键值对 myMap.set("name", "ES6-learning"); myMap.set(123, "数字键"); myMap.set({ id: 1 }, "对象键"); // 获取值 console.log(myMap.get("name")); // "ES6-learning" // 检查键是否存在 console.log(myMap.has(123)); // true // 获取大小 console.log(myMap.size); // 3

2.3 Weak Map：适合存储对象额外信息

Weak Map集合只支持对象类型的key，所有key都是弱引用，当该对象的其他强引用被清除时，集合中的弱引用也会自动被垃圾回收机制回收。

为那些实际使用与生命周期管理分离的对象添加额外信息是非常适合的使用方式。

三、Set与Map集合的转换与应用

3.1 Set与数组的相互转换

Set集合和数组非常相似，可以轻松实现相互转换：

// Set转数组 const set = new Set([1, 2, 3]); const arr = Array.from(set); // 或者使用扩展运算符 const arr2 = [...set]; // 数组转Set const newSet = new Set(arr);

3.2 实际应用场景总结

• Set集合：过滤数组中重复的元素，检查元素是否存在，存储不重复的元素集合
• Weak Set集合：存储DOM元素引用，临时缓存对象，避免内存泄漏
• Map集合：存储键值对数据，特别是需要非字符串类型键的场景，替代Object存储复杂数据
• Weak Map集合：为对象添加额外属性，存储对象元数据，实现私有属性

四、深入学习资源

要深入学习Set和Map集合的所有方法和特性，可以参考项目中的详细笔记：

7、《深入理解ES6》笔记——Set集合与Map集合.md

通过本教程，你已经掌握了ES6中Set和Map集合的基本使用方法和应用场景。这些强大的数据结构能够帮助你编写更高效、更清晰的JavaScript代码，提升开发效率。开始在你的项目中尝试使用它们吧！

【免费下载链接】ES6-learning《深入理解ES6》教程学习笔记项目地址: https://gitcode.com/gh_mirrors/es6l/ES6-learning