ES6方法set()和map()（秒懂set和map的应用）

目录

一、set(集合)介绍

1.概念

2.set用法

创建 Set

添加元素

删除元素

检查元素是否存在

获取 Set 大小

遍历 Set

3.实例

1.基本实例

 2.一键去重

4.应用场景

 二、map（映射）介绍

1.概念

2.用法

创建 Map

添加键值对

获取值

删除键值对

检查键是否存在

获取 Map 大小

遍历 Map

3.实例 

1.基本实例

4.应用场景

三、总结

---

一、set(集合)介绍

1.概念

Set 是一种无序且唯一的集合，它可以存储任何类型的值（原始值或对象引用），但是不允许重复的值。

2.set用法

创建 Set

const mySet = new Set();

添加元素

mySet.add(1);
mySet.add(2);
mySet.add('hello');
mySet.add({ name: 'John' });

删除元素

mySet.delete(1); // 删除值为1的元素

检查元素是否存在

mySet.has(2); // true

获取 Set 大小

mySet.size; // 返回 Set 的元素数量

遍历 Set

mySet.forEach(value => console.log(value));

3.实例

1.基本实例

// 创建一个空的 Set 实例
const mySet = new Set();

// 向 Set 实例中添加元素
mySet.add(1);
mySet.add(2);
mySet.add(3);

// 删除 Set 实例中的元素
mySet.delete(2);

// 检查元素是否存在于 Set 实例中
const hasOne = mySet.has(1); // true

// 获取 Set 实例的大小（元素数量）
const size = mySet.size; // 2

// 使用数组初始化 Set 实例
const anotherSet = new Set([1, 2, 3, 4, 5]);

// 遍历 Set 实例中的元素
anotherSet.forEach(value => console.log(value));

 2.一键去重

const arr = [1, 2, 2, 3, 4, 4, 5];

// 使用 Set 去重
const uniqueSet = new Set(arr);

// 将 Set 转换回数组
const uniqueArr = [...uniqueSet];

console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5]

4.应用场景

1. 数组去重： 当处理包含重复元素的数组时，使用 Set 可以快速有效地去除重复项，而无需手动编写复杂的去重逻辑。

2. 统计唯一值： 在统计数据中，有时需要知道某个数据集合中有多少个不同的值，这时可以使用 Set 来快速获取唯一值的数量。

3. 过滤重复输入： 在输入框或表单中，用户可能会多次输入相同的值。使用 Set 可以轻松地过滤掉重复的输入，确保每个值只出现一次。

4. 处理数据交集和并集： 使用 Set 可以很容易地计算两个数据集合之间的交集、并集等操作，因为 Set 提供了诸如 intersection、union 等方法。

5. 过滤重复事件监听： 在事件监听中，有时可能会多次注册相同的事件处理程序。使用 Set 可以确保每个事件处理程序只注册一次，避免重复注册。

 二、map（映射）介绍

1.概念

Map 是一种键值对的集合，其中的键可以是任意数据类型，包括原始值、对象引用或者函数。与 Object 不同的是，Map 中的键值对是按插入顺序存储的。

2.用法

创建 Map

const myMap = new Map();

添加键值对

myMap.set('name', 'John');
myMap.set(1, 'one');
myMap.set({}, 'an object');

获取值

myMap.get('name'); // 'John'

删除键值对

myMap.delete(1); // 删除键为1的键值对

检查键是否存在

myMap.has('name'); // true

获取 Map 大小

myMap.size; // 返回 Map 的键值对数量

遍历 Map

myMap.forEach((value, key) => console.log(key, value));

3.实例 

1.基本实例

// 创建一个空的 Map 实例
const myMap = new Map();

// 向 Map 实例中添加键值对
myMap.set('name', 'John');
myMap.set('age', 30);

// 删除 Map 实例中的键值对
myMap.delete('age');

// 检查键是否存在于 Map 实例中
const hasName = myMap.has('name'); // true

// 获取 Map 实例的大小（键值对数量）
const size = myMap.size; // 1

// 使用数组初始化 Map 实例，数组中的每个元素都是一个键值对数组
const anotherMap = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);

// 遍历 Map 实例中的键值对
anotherMap.forEach((value, key) => console.log(key, value));

4.应用场景

1. 存储键值对数据： 最基本的用途就是存储键值对数据。例如，可以将用户 ID 映射到用户信息、将商品 ID 映射到商品详情等。

2. 替代对象字面量： 在一些情况下，使用 Map 可以替代对象字面量来存储键值对数据。与对象不同的是，Map 的键可以是任意类型，包括对象、函数等，而对象的键只能是字符串或符号。

3. 迭代和遍历： Map 提供了多种方法来迭代和遍历键值对数据，包括 forEach、keys、values、entries 等方法，使得对数据的处理变得更加灵活和方便。

4. 缓存数据： 在一些场景下，需要缓存一些计算结果或网络请求的数据。使用 Map 可以很方便地存储这些数据，并且可以通过键来快速检索和获取缓存的数据。

5. 实现元数据存储： 在开发中，有时需要存储一些与对象相关的元数据，例如对象的创建时间、最后修改时间等。使用 Map 可以很容易地将对象与元数据关联起来。

6. 事件调度和管理： 在事件驱动的程序中，可以使用 Map 来管理事件监听器，将事件类型映射到对应的处理函数，从而实现事件的调度和管理。

7. 路由和路由参数管理： 在 Web 开发中，可以使用 Map 来管理路由和路由参数，将 URL 路径映射到对应的处理函数或组件，以实现路由的配置和管理。

三、总结

Set：

• 特点： Set 是一种集合，其中的元素是唯一且无序的。
• 存储方式： 它存储一组唯一的值，不允许重复。
• 应用场景： 主要用于去重、存储唯一值的集合。常用于数组去重、统计唯一值、过滤重复输入等场景。

Map：

• 特点： Map 是一种键值对集合，其中的每个元素都由一个键和一个值组成。
• 存储方式： 它存储键值对数据，键是唯一的，值可以重复。
• 应用场景： 主要用于存储和管理键值对数据。常用于存储对象关联的元数据、实现缓存、事件调度等场景。

共同点：

• 灵活性： Set 和 Map 都提供了灵活的数据存储方式，可以存储各种类型的数据。
• 高效性： 由于内部实现的优化，Set 和 Map 都具有高效的查找和检索性能。