通过这两个 Hook 回顾 Set/Map 基础知识

今天我们来聊聊 ahooks 中对 Map 和 Set 类型进行状态管理的 hook，顺便复习一下 Set 和 Map 这两种数据类型。,管理 Map 类型状态的 Hook。,先回顾以下 Map 的概念。Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。,Object 和 Map 很类似。它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。因此过去我们一直都把对象当成 Map 使用。,但是，在一些场景下，使用 Map 是更优的选择，以下是一些常见的点：,更多，可以看 Objects 和 maps 的比较[1]。,我们来看下 ahooks 做了哪些封装，同时回顾以下 Map 的一些基础 API 用法。,首先是默认值的设置，通过 Map 构造函数 new Map() 创建 Map 对象。入参为默认值。,set 方法。添加 Map 新的 key 和 value 或者更新 key 的值，因为 React 是不可变数据，需要要返回一个全新的值，所以需要创建一个新的 Map 对象。,通过 Map 的 set 方法，在 Map 对象中设置与指定的键 key 关联的值 value，并返回 Map 对象。,remove 方法。通过 Map 的 delete 方法，移除 Map 对象中指定的键值对，如果键值对存在并成功被移除，返回 true，否则返回 false。调用 delete 后再调用 Map.prototype.has(key) 将返回 false。,对于一些其他没有副作用的方法，ahooks 没有封装，我觉得是合理的，这些在开发者想用的时候，直接调用就可以了。,管理 Set 类型状态的 Hook。,直接看代码。,默认值的设置，通过 new Set() 构造函数，创建一个新的 Set 对象。,add 方法添加一个元素。调用 Set 的 add 方法，在 Set 对象尾部添加一个元素。返回该 Set 对象。,remove 方法移除一个元素。调用 Set 的 delete(value) 方法，移除 Set 中与这个值相等的元素，返回 Set.prototype.has(value) 在这个操作前会返回的值（即如果该元素存在，返回 true，否则返回false）。Set.prototype.has(value) 在此后会返回 false。,reset 方法，重置 Set 回默认值。其对应的 Set 的 clear 方法，会移除Set对象内的所有元素。,其他 Set 方法：,ES6 中的 Map 和 Set 两种数据结构，弥补了 JavaScript 之前的一些不足，比如 Object 对象只能是 string 或者 Symbol 类型。另外，提供了某些情况下更便捷的操作方式，比如数组去重，我们可以直接 new Set([…arr])。,现在越来越多的场景使用了 Map 和 Set，ahooks 对这两者的封装都比较简单，更多的是一些有副作用（修改到原 Map 和 Set）操作的封装。看这部分的源码，就当做小小复习基础知识吧。