关于前端:大家都能看得懂的源码-ahooks-useSet-和-useMap

本文是深入浅出 ahooks 源码系列文章的第十篇，该系列已整顿成文档-地址。感觉还不错，给个关注反对一下哈，Thanks。

明天咱们来聊聊 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 的比拟。

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

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

function useMap<K, T>(  // 传入默认的 Map 参数  initialValue?: Iterable<readonly [K, T]>,) {  const getInitValue = () => {    return initialValue === undefined ? new Map() : new Map(initialValue);  };  const [map, setMap] = useState<Map<K, T>>(() => getInitValue());  // 省略代码...}

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

通过 Map 的 set 办法，在 Map 对象中设置与指定的键 key 关联的值 value，并返回 Map 对象。

// 增加 mapconst 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<readonly [K, T]>) => {  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<K>(initialValue?: Iterable<K>) {  const getInitValue = () => {    return initialValue === undefined ? new Set<K>() : new Set(initialValue);  };  const [set, setSet] = useState<Set<K>>(() => 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）操作的封装。看这部分的源码，就当做小小温习基础知识吧。

本文已收录到集体博客中，欢送关注~