lodash源码分析之Hash缓存

叁歲伎倆 2022-06-02 03:14 343阅读 0赞

在那小小的梦的暖阁,我为你收藏起整个季节的烟雨。

——洛夫《灵河》

本文为读 lodash 源码的第四篇,后续文章会更新到这个仓库中,欢迎 star:pocket-lodash

gitbook也会同步仓库的更新,gitbook地址:pocket-lodash

作用与用法

Hash 顾名思义,就是要有一个离散的序列,根据 key 来储取数据。而在 javascript 中,最适合的无疑是对象了。

Hash 在 lodash 的 .internal 文件夹中,作为内部文件来使用。lodash 会根据不同的数据类型选择不同的缓存方式,Hash 便是其中的一种方式,这种方式只能缓存 key 的类型符合对象键要求的数据。

Hash 只接收一个二维数组作为参数,调用方式如下:

  1. new Hash([['tes1', 1],['test2', 2],['test3', 3]])

其中子项中的第一项会作为 key ,第二项是需要缓存的值。

Hash 实例化的结果如下:

  1. {
  2. size: 3,
  3. __data__: {
  4. test1: 1,
  5. test2: 2,
  6. test3: 3
  7. }
  8. }

缓存的数量储存在 __data__ 的对象中。

Hash与Map

后面将会讲到,除了使用 Hash 方式缓存数据外,还会用到 Map,lodash 在设计 Hash 的数据管理接口时,也与 Map 的接口一致,但是不会包含 Map 的遍历方法。

先来看看这些接口都有那些:

hash.png_raw_true

源码

  1. const HASH_UNDEFINED = '__lodash_hash_undefined__'
  2. class Hash {
  3. constructor(entries) {
  4. let index = -1
  5. const length = entries == null ? 0 : entries.length
  6. this.clear()
  7. while (++index < length) {
  8. const entry = entries[index]
  9. this.set(entry[0], entry[1])
  10. }
  11. }
  12. clear() {
  13. this.__data__ = Object.create(null)
  14. this.size = 0
  15. }
  16. delete(key) {
  17. const result = this.has(key) && delete this.__data__[key]
  18. this.size -= result ? 1 : 0
  19. return result
  20. }
  21. get(key) {
  22. const data = this.__data__
  23. const result = data[key]
  24. return result === HASH_UNDEFINED ? undefined : result
  25. }
  26. has(key) {
  27. const data = this.__data__
  28. return data[key] !== undefined
  29. }
  30. set(key, value) {
  31. const data = this.__data__
  32. this.size += this.has(key) ? 0 : 1
  33. data[key] = value === undefined ? HASH_UNDEFINED : value
  34. return this
  35. }
  36. }
  37. export default Hash

constructor

  1. constructor(entries) {
  2. let index = -1
  3. const length = entries == null ? 0 : entries.length
  4. this.clear()
  5. while (++index < length) {
  6. const entry = entries[index]
  7. this.set(entry[0], entry[1])
  8. }
  9. }

constructor 中并没有看到初始化 __data__ 属性和 size 属性,这个其实在 clear 方法中初始化了,后面会解释。

接着遍历传入的二维数组,调用 set 方法,初始化缓存的值。将子项的第一项作为 key ,第二项为缓存的值。

clear

  1. clear() {
  2. this.__data__ = Object.create(null)
  3. this.size = 0
  4. }

clear 的作用是清空缓存,因此需要将 size 重置为 0

将缓存的数据 __data__ 设置为空对象。

这里并没有用 this.__data__ = {} 置空,而是调用了 Object.create 方法,并且将 null 作为参数。我们都知道, Object.create 的第一个参数为创建对象的原型对象,传入 null 的时候,返回的就是一个真空对象,即没有原型的对象,因此不会有原型属性的干扰,用来做缓存对象十分适合。

has

  1. has(key) {
  2. const data = this.__data__
  3. return data[key] !== undefined
  4. }

has 用来判断是否已经有缓存数据,如果缓存数据已经存在,则返回 true

判断也十分简单,只需要判断取出来的值是否为 undefined 即可。

这个判断有一个坑,后面会讲到。

set

  1. set(key, value) {
  2. const data = this.__data__
  3. this.size += this.has(key) ? 0 : 1
  4. data[key] = value === undefined ? HASH_UNDEFINED : value
  5. return this
  6. }

set 用来增加或者更新需要缓存的值。set 的时候需要同时维护 size 和在缓存的值。

首先调用 has 方法,判断对应的 key 是否已经被缓存过,如果已经缓存过,则 size 保持不变,否则 size1

缓存值其实就是设置缓存对象 this.__data__ 对应 key 属性的值。

has 中说到用 data[key] !== undefined 有一个坑,因为要缓存的值也可以是 undefined ,如果不做处理,肯定会导致判断错误。

lodash 的处理方式是将 undefined 的值转换成 HASH_UNDEFINED ,也即一开始便定义的 __lodash_hash_undefined__ 字符串来储存。

所以在缓存中,是用字符串 __lodash_hash_undefined__ 来替代 undefined 的。

set 在最后还将实例 this 返回,以支持链式操作。

get

  1. get(key) {
  2. const data = this.__data__
  3. const result = data[key]
  4. return result === HASH_UNDEFINED ? undefined : result
  5. }

get 方法是从缓存中取值。

取值其实就是返回缓存对象中对应 key 的值即可。因为 undefined 在缓存中是以 __lodash_hash_undefined__ 来表示的,因此遇到值为 __lodash_hash_undefined__ 时,返回 undefined

其实这样还是有小小的问题的,如果需要缓存的值刚好是 __lodash_hash_undefined__,那取出来的值跟预设的就不一致了。但是这样情况应该很少出现吧。

delete

  1. delete(key) {
  2. const result = this.has(key) && delete this.__data__[key]
  3. this.size -= result ? 1 : 0
  4. return result
  5. }

delete 方法用来删除指定 key 的缓存。成功删除返回 true, 否则返回 false。 删除操作同样需要维护 size 属性和缓存值。

首先调用 has 方法来判断缓存是否存在,如果存在,用 delete 操作符将 __data__ 中对应的属性删除。

delete 操作符在成功删除属性时会返回 true,如果成功删除,则需要将 size 减少 1

参考

  1. Set 和 Map 数据结构
  2. Object.create()

License

署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)

最后,所有文章都会同步发送到微信公众号上,欢迎关注,欢迎提意见: qrcode_front-end-article.jpg

作者:对角另一面

发表评论

表情:
评论列表 (有 0 条评论,343人围观)

还没有评论,来说两句吧...

相关阅读

    相关 lodash分析NaN不是NaN

    > 暗恋之纯粹,在于不求结果,完全把自己锁闭在一个单向的关系里面。 > > ——梁文道《暗恋到偷窥》 本文为读 lodash 源码的第五篇,后续文章会更新到这个仓库中,欢迎