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

今天我们来聊聊 ahooks 中对 Map 和 Set 类型进行状态管理的通过 hook，顺便复习一下 Set 和 Map 这两种数据类型。回顾useMap

管理 Map 类型状态的基础 Hook。

先回顾以下 Map 的知识概念。Map 对象保存键值对，通过并且能够记住键的回顾原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。基础

Object 和 Map 很类似。知识它们都允许你按键存取一个值、通过删除键、回顾检测一个键是基础否绑定了值。因此过去我们一直都把对象当成 Map 使用。知识

但是通过，在一些场景下，回顾使用 Map 是基础更优的选择，以下是一些常见的点：

键值的类型。一个 Map 的键可以是任意值，包括函数、对象或任意基本类型。一个 Object 的键必须是服务器托管一个 String 或是 Symbol。需要保证键值的顺序。Map 中的键是有序的。因此，当迭代的时候，一个 Map 对象以插入的顺序返回键值。虽然 Object 的键目前是有序的，但并不总是这样，而且这个顺序是复杂的。因此，最好不要依赖属性的顺序。Size。Map 的键值对个数可以轻易地通过 size 属性获取。Object 的键值对个数只能手动计算。比如遍历对象属性，计算它的个数。源码库性能。Map 在频繁增删键值对的场景下表现更好。Object 在频繁添加和删除键值对的场景下未作出优化。

更多，可以看 Objects 和 maps 的比较[1]。

我们来看下 ahooks 做了哪些封装，同时回顾以下 Map 的一些基础 API 用法。

首先是默认值的设置，通过 Map 构造函数 new Map() 创建 Map 对象。入参为默认值。

function useMap(

// 传入默认的 Map 参数

initialValue?: Iterable,

) {

const getInitValue = () => {

return initialValue === undefined ? new Map() : new Map(initialValue);

};

const [map, setMap] = useState>(() => getInitValue());

// 省略代码...

}

set 方法。添加 Map 新的 key 和 value 或者更新 key 的值，因为 React 是不可变数据，需要要返回一个全新的值，所以需要创建一个新的 Map 对象。

通过 Map 的 set 方法，在 Map 对象中设置与指定的键 key 关联的值 value，并返回 Map 对象。云南idc服务商

// 添加 map

const set = (key: K, entry: T) => {

setMap((prev) => {

const temp = new Map(prev);

temp.set(key, entry);

return temp;

});

};

remove 方法。通过 Map 的 delete 方法，移除 Map 对象中指定的键值对，如果键值对存在并成功被移除，返回 true，否则返回 false。调用 delete 后再调用 Map.prototype.has(key) 将返回 false。

// 移除

const remove = (key: K) => {

setMap((prev) => {

const temp = new Map(prev);

temp.delete(key);

return temp;

});

};setAll 方法。传入一个全新的 Map 对象，直接覆盖旧的 Map 对象。reset 方法。重置 Map 对象为初始值。在 Map 中有一个 clear 的方法，它移除 Map 对象中所有的键值对，相比 clear，reset 方法更贴近我们的需求。get 方法，通过 Map 的 get 方法，返回与 key 关联的值，若不存在关联的值，则返回 undefined。// 生成一个新的 Map 对象

const setAll = (newMap: Iterable) => {

setMap(new Map(newMap));

};

// 重置

const reset = () => setMap(getInitValue());

// 获取

const get = (key: K) => map.get(key);

对于一些其他没有副作用的方法，ahooks 没有封装，我觉得是合理的，这些在开发者想用的时候，直接调用就可以了。

has(key)。返回一个布尔值，用来表明 Map 对象中是否存在与 key 关联的值。keys()。返回一个新的迭代对象，其中包含 Map 对象中所有的键，并以插入 Map 对象的顺序排列。values()。返回一个新的迭代对象，其中包含 Map 对象中所有的值，并以插入 Map 对象的顺序排列。entries()。返回一个新的迭代对象，其为一个包含 Map 对象中所有键值对的 [key, value] 数组，并以插入 Map 对象的顺序排列。useSet

管理 Set 类型状态的 Hook。

直接看代码。

默认值的设置，通过 new Set() 构造函数，创建一个新的 Set 对象。

function useSet(initialValue?: Iterable) {

const getInitValue = () => {

return initialValue === undefined ? new Set() : new Set(initialValue);

};

const [set, setSet] = useState>(() => getInitValue());

// 省略一些代码

}

add 方法添加一个元素。调用 Set 的 add 方法，在 Set 对象尾部添加一个元素。返回该 Set 对象。

const add = (key: K) => {

if (set.has(key)) {

return;

}

setSet((prevSet) => {

const temp = new Set(prevSet);

temp.add(key);

return temp;

});

};

remove 方法移除一个元素。调用 Set 的 delete(value) 方法，移除 Set 中与这个值相等的元素，返回 Set.prototype.has(value) 在这个操作前会返回的值（即如果该元素存在，返回 true，否则返回false）。Set.prototype.has(value) 在此后会返回 false。

// 移除

const remove = (key: K) => {

if (!set.has(key)) {

return;

}

setSet((prevSet) => {

const temp = new Set(prevSet);

temp.delete(key);

return temp;

});

};

reset 方法，重置 Set 回默认值。其对应的 Set 的 clear 方法，会移除Set对象内的所有元素。

// 重置

const reset = () => setSet(getInitValue());

其他 Set 方法：

entries()。返回一个新的迭代器对象，该对象包含 Set 对象中的按插入顺序排列的所有元素的值的 [value, value] 数组。为了使这个方法和 Map 对象保持相似， 每个值的键和值相等。has(value)。返回一个布尔值，表示该值在 Set 中存在与否。keys() 和 values()。都返回一个新的迭代器对象，该对象包含 Set 对象中的按插入顺序排列的所有元素的值。forEach(callbackFn[, thisArg])。按照插入顺序，为 Set 对象中的每一个值调用一次 callBackFn。如果提供了thisArg参数，回调中的 this 会是这个参数。思考与总结

ES6 中的 Map 和 Set 两种数据结构，弥补了 JavaScript 之前的一些不足，比如 Object 对象只能是 string 或者 Symbol 类型。另外，提供了某些情况下更便捷的操作方式，比如数组去重，我们可以直接 new Set([...arr])。

现在越来越多的场景使用了 Map 和 Set，ahooks 对这两者的封装都比较简单，更多的是一些有副作用（修改到原 Map 和 Set）操作的封装。看这部分的源码，就当做小小复习基础知识吧。