社区编辑申请
注册/登录
通过这两个 Hook 回顾 Set/Map 基础知识
开发 前端
ES6 中的 Map 和 Set 两种数据结构,弥补了 JavaScript 之前的一些不足,比如 Object 对象只能是 string 或者 Symbol 类型。另外,提供了某些情况下更便捷的操作方式,比如数组去重,我们可以直接 new Set([...arr])。

今天我们来聊聊 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<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 对象。

// 添加 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<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)操作的封装。看这部分的源码,就当做小小复习基础知识吧。

责任编辑:武晓燕 来源: 前端杂货
相关推荐

2022-06-20 22:37:25

Linux操作系统命令

2022-06-15 11:02:40

网络安全运营

2022-06-15 08:21:49

Linux运维工程师

2022-06-15 09:01:41

2022-06-22 09:19:55

HDC鸿蒙ADB命令

2022-06-28 09:34:24

可视化Python代码

2022-06-28 08:40:16

LokiPromtail日志报警

2022-06-16 07:32:38

VSCodePython插件

2022-06-27 19:01:04

Python应用程序数据

2022-06-28 12:35:21

DockerPython

2022-06-13 09:45:51

Hook技术移动应用响应速度

2022-06-27 17:46:53

PythonFlask

2022-06-28 09:26:25

Python配置文件

2022-06-28 14:01:42

MITOpenAI预训练模型

2022-06-27 15:25:08

架构模型治理

2022-06-27 23:44:37

云原生云存储云计算

2022-06-28 10:03:56

CentOSLinux

2022-06-28 14:47:43

数据中心服务器科技

2022-06-23 11:42:22

MySQL数据库

2022-06-28 10:58:35

勒索软件攻击事件

同话题下的热门内容

哪个版本的JVM最快?无代码软件发展简史及未来趋势携程基于 GraphQL 的前端 BFF 服务开发实践为什么会存在 1px 问题?怎么解决?一文搞定常考Vue-Router知识点EcmaScript 2022 正式发布,有哪些新特性?一文详解|增长那些事儿远程医疗:优势、前景和现有IT解决方案

编辑推荐

太厉害了,终于有人能把TCP/IP协议讲的明明白白了!牛人5次面试腾讯不成功的经验HBase原理–所有Region切分的细节都在这里了Javascript如何监听页面刷新和关闭事件如何搭建一个HTTPS服务端
我收藏的内容
点赞
收藏

51CTO技术栈公众号