lodash源碼分析之List緩存

leon 發(fā)布于2019-08-06 13:28 / 2086人閱讀

摘要：在之前的文章中已經(jīng)介紹過，檢測的是對應(yīng)的數(shù)組在二維數(shù)組中的索引，其行為跟一致，不存在于二維數(shù)組中時，返回，否則返回索引值。最后將緩存數(shù)量減少。

昨日我沿著河岸/漫步到/蘆葦彎腰喝水的地方

順便請煙囪/在天空為我寫一封長長的信

潦是潦草了些/而我的心意/則明亮亦如你窗前的燭光/稍有曖昧之處/勢所難免/因為風(fēng)的緣故

——洛夫《因為風(fēng)的緣故》

本文為讀 lodash 源碼的第七篇，后續(xù)文章會更新到這個倉庫中，歡迎 star：pocket-lodash

gitbook也會同步倉庫的更新，gitbook地址：pocket-lodash

作用與用法

在之前的《lodash源碼分析之Hash緩存》介紹過用 Hash 做緩存的情況，在這篇文章中介紹過，lodash 是想要實現(xiàn)和 Map 一樣的接口。

Hash 其實是用對象來做緩存，但是對象有一個局限，它的 key 只能是字符串或者 Symbol 類型，但是 Map 是支持各種類型的值來作為 key，因此 Hash 緩存無法完全模擬 Map 的行為，當(dāng)遇到 key 為數(shù)組、對象等類型時，Hash 就無能為力了。

因此，在不支持 Map 的環(huán)境下，lodash 實現(xiàn)了 ListCache 來模擬，ListCache 本質(zhì)上是使用一個二維數(shù)組來儲存數(shù)據(jù)。

ListCache 的調(diào)用方式和 Hash 一致：

new ListCache([
  [{key: "An Object Key"}, 1],
  [["An Array Key"],2],
  [function(){console.log("A Function Key")},3]
])

返回的結(jié)果如下：

{
  size: 3,
  __data__: [
    [{key: "An Object Key"}, 1],
    [["An Array Key"],2],
    [function(){console.log("A Function Key")},3]
  ]
}

結(jié)構(gòu)和 Hash 類似，但是 __data__ 變成了數(shù)組。

接口設(shè)計

ListCache 的接口與 Hash 一樣，同樣實現(xiàn)了 Map 的數(shù)據(jù)管理接口。

依賴

import assocIndexOf from "./assocIndexOf.js"

《lodash源碼分析之自減的兩種形式》

源碼分析

class ListCache {

  constructor(entries) {
    let index = -1
    const length = entries == null ? 0 : entries.length

    this.clear()
    while (++index < length) {
      const entry = entries[index]
      this.set(entry[0], entry[1])
    }
  }

  clear() {
    this.__data__ = []
    this.size = 0
  }

  delete(key) {
    const data = this.__data__
    const index = assocIndexOf(data, key)

    if (index < 0) {
      return false
    }
    const lastIndex = data.length - 1
    if (index == lastIndex) {
      data.pop()
    } else {
      data.splice(index, 1)
    }
    --this.size
    return true
  }

  get(key) {
    const data = this.__data__
    const index = assocIndexOf(data, key)
    return index < 0 ? undefined : data[index][1]
  }

  has(key) {
    return assocIndexOf(this.__data__, key) > -1
  }

  set(key, value) {
    const data = this.__data__
    const index = assocIndexOf(data, key)

    if (index < 0) {
      ++this.size
      data.push([key, value])
    } else {
      data[index][1] = value
    }
    return this
  }
}

constructor

構(gòu)造器跟 Hash 一模一樣，都是先調(diào)用 clear 方法，然后調(diào)用 set 方法，往緩存中加入初始數(shù)據(jù)。

這里調(diào)用 clear 方法并不是說為了清除數(shù)據(jù)，還沒開始使用這個類，肯定是沒有數(shù)據(jù)的，而是為了初始化 __data__ 和 size 這兩個屬性。

clear

clear() {
  this.__data__ = []
  this.size = 0
}

clear 是為了清空緩存。

其實就是將容器 __data__ 設(shè)置成空數(shù)組，在 Hash 中是設(shè)置為空對象，將緩存數(shù)量 size 設(shè)置為 0 。

has

has(key) {
  return assocIndexOf(this.__data__, key) > -1
}

has 用來判斷是否已經(jīng)有緩存數(shù)據(jù)，如果緩存數(shù)據(jù)已經(jīng)存在，則返回 true 。

在之前的文章中已經(jīng)介紹過，assocIndexOf 檢測的是對應(yīng) key 的 [key,value] 數(shù)組在二維數(shù)組中的索引，其行為跟 indexOf 一致，不存在于二維數(shù)組中時，返回 -1 ，否則返回索引值。因此可以用是否大于 -1 來判斷指定 key 的數(shù)據(jù)是否已經(jīng)被緩存。

set

set(key, value) {
  const data = this.__data__
  const index = assocIndexOf(data, key)

  if (index < 0) {
    ++this.size
    data.push([key, value])
  } else {
    data[index][1] = value
  }
  return this
}

set 用來增加或者更新需要緩存的值。set 的時候需要同時維護 size 和緩存的值。

跟 has 一樣，調(diào)用 assocIndexOf 找到指定 key 的索引值，如果小于 0 ，則表明指定的 key 尚未緩存，需要將緩存數(shù)量 size 加 1 ，然后將緩存數(shù)據(jù)加入到 this.__data__ 的末尾。

否則更新 value 即可。

強迫癥看到 has 用大于 -1 來判斷，而這里用小于 0 來判斷可能會相當(dāng)難受。

get

get(key) {
  const data = this.__data__
  const index = assocIndexOf(data, key)
  return index < 0 ? undefined : data[index][1]
}

get 方法是從緩存中取值。

如果緩存中存在值，則返回緩存中的值，否則返回 undefined 。

delete

delete(key) {
  const data = this.__data__
  const index = assocIndexOf(data, key)

  if (index < 0) {
    return false
  }
  const lastIndex = data.length - 1
  if (index == lastIndex) {
    data.pop()
  } else {
    data.splice(index, 1)
  }
  --this.size
  return true
}

delete 方法用來刪除指定 key 的緩存。成功刪除返回 true，否則返回 false。刪除操作同樣需要維護 size 屬性。

首先調(diào)用 assocIndexOf 來找到緩存的索引。

如果索引小于 0 ，表明沒有緩存，刪除不成功，直接返回 false 。

如果要刪除的緩存是緩存中的最后一項，則直接調(diào)用 pop 方法，將緩存刪除，否則將調(diào)用 splice 方法將對應(yīng)位置的緩存刪除。

為什么不直接都用 splice 來刪除數(shù)據(jù)呢？因為 pop 的性能比 splice 好，我簡單測了一下，大概快 17% 左右。

有興趣的可以看下 pop 和 splice 的規(guī)范，splice 要比 pop 做的事情要多。

從這里又看出了 lodash 對性能的極致追求。

最后將緩存數(shù)量 size 減少 1 。

參考

Set 和 Map 數(shù)據(jù)結(jié)構(gòu)

MDN: 使用對象

ECMAScript5.1中文版 + ECMAScript3 + ECMAScript（合集）

License

署名-非商業(yè)性使用-禁止演繹 4.0 國際 (CC BY-NC-ND 4.0)

最后，所有文章都會同步發(fā)送到微信公眾號上，歡迎關(guān)注,歡迎提意見：

作者：對角另一面

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/61926.html

發(fā)表評論

登陸后可評論

0條評論

leon

男|高級講師

我要關(guān)注我要私信

TA的文章

?自組織映射（SOM）神經(jīng)網(wǎng)絡(luò)?Python實現(xiàn)

閱讀 1951·2021-09-07 09:59
【css】布局

閱讀 2520·2019-08-29 16:33
自己制作微信小程序使用base64字體圖標

閱讀 3688·2019-08-29 16:18
CSS基礎(chǔ)構(gòu)架及標準

閱讀 2849·2019-08-29 15:30
CSS3 background-clip屬性

閱讀 1678·2019-08-29 13:52
JavaScript設(shè)計模式（八）：組合模式

閱讀 2035·2019-08-26 18:36
Vue基于vuex、axios攔截器實現(xiàn)loading效果及axios的安裝配置

閱讀 530·2019-08-26 12:19
關(guān)于Vuex的action傳入多個參數(shù)的問題

閱讀 694·2019-08-23 15:23

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

lodash源碼分析之List緩存

相關(guān)文章

lodash源碼分析之緩存方式的選擇

lodash源碼分析之緩存方式的選擇