lodash源碼分析之?dāng)?shù)組的差集

Noodles 發(fā)布于2019-08-22 15:23 / 2696人閱讀

摘要：依賴源碼分析之緩存使用方式的進(jìn)一步封裝源碼分析之源碼分析之源碼分析之的實(shí)現(xiàn)源碼分析之源碼分析的調(diào)用如果有傳遞，則先調(diào)用，使用生成要比較數(shù)組的映射數(shù)組。循環(huán)完畢，沒(méi)有在第二個(gè)數(shù)組中發(fā)現(xiàn)相同的項(xiàng)時(shí)，將該項(xiàng)存入數(shù)組中。

外部世界那些破舊與貧困的樣子，可以使我內(nèi)心世界得到平衡。

——卡爾維諾《煙云》

本文為讀 lodash 源碼的第十七篇，后續(xù)文章會(huì)更新到這個(gè)倉(cāng)庫(kù)中，歡迎 star：pocket-lodash

gitbook也會(huì)同步倉(cāng)庫(kù)的更新，gitbook地址：pocket-lodash

作用與用法

baseDifference 可以用來(lái)獲取指定數(shù)組與另一個(gè)數(shù)組的差集。

這個(gè)函數(shù)是內(nèi)部函數(shù)，是后面實(shí)現(xiàn)其它比較函數(shù)的核心函數(shù)。

baseDifference 的方法簽名如下：

baseDifference(array, values, iteratee, comparator)

第一和第二個(gè)參數(shù)是需要比較的兩個(gè)數(shù)組；iteratee 可以返回一值映射值，比較時(shí)，可以使用映射的值來(lái)進(jìn)行比較； comparator 是自定義比較函數(shù)，如果有傳遞，則調(diào)用自定義的比較函數(shù)來(lái)進(jìn)行交集的比較。

依賴

import SetCache from "./SetCache.js"
import arrayIncludes from "./arrayIncludes.js"
import arrayIncludesWith from "./arrayIncludesWith.js"
import map from "../map.js"
import cacheHas from "./cacheHas.js"

lodash源碼分析之緩存使用方式的進(jìn)一步封裝

lodash源碼分析之a(chǎn)rrayIncludes

lodash源碼分析之a(chǎn)rrayIncludesWith

lodash源碼分析之map的實(shí)現(xiàn)

lodash源碼分析之cacheHas

源碼分析

const LARGE_ARRAY_SIZE = 200
function baseDifference(array, values, iteratee, comparator) {
  let includes = arrayIncludes
  let isCommon = true
  const result = []
  const valuesLength = values.length

  if (!array.length) {
    return result
  }
  if (iteratee) {
    values = map(values, (value) => iteratee(value))
  }
  if (comparator) {
    includes = arrayIncludesWith
    isCommon = false
  }
  else if (values.length >= LARGE_ARRAY_SIZE) {
    includes = cacheHas
    isCommon = false
    values = new SetCache(values)
  }
  outer:
  for (let value of array) {
    const computed = iteratee == null ? value : iteratee(value)

    value = (comparator || value !== 0) ? value : 0
    if (isCommon && computed === computed) {
      let valuesIndex = valuesLength
      while (valuesIndex--) {
        if (values[valuesIndex] === computed) {
          continue outer
        }
      }
      result.push(value)
    }
    else if (!includes(values, computed, comparator)) {
      result.push(value)
    }
  }
  return result
}

iteratee的調(diào)用

if (iteratee) {
  values = map(values, (value) => iteratee(value))
}

如果有傳遞 iteratee ，則先調(diào)用 map ，使用 iteratee 生成要比較數(shù)組的映射數(shù)組 values。

因?yàn)楹竺鏁?huì)有嵌套循環(huán)，避免重復(fù)調(diào)用 iteratee ，影響性能，所以一開(kāi)始就需要生成 values 的映射數(shù)組。

性能優(yōu)化

這里使用了 isCommon 來(lái)標(biāo)志是否使用普通方式來(lái)處理。

if (comparator) {
  includes = arrayIncludesWith
  isCommon = false
}

如果有傳遞比較函數(shù)，則將 isCommon 標(biāo)記為 false，表示不用普通的方式來(lái)處理，后面可以看到，最后會(huì)使用 includes 方法來(lái)處理，也即 arrayIncludesWith 方法。

else if (values.length >= LARGE_ARRAY_SIZE) {
  includes = cacheHas
  isCommon = false
  values = new SetCache(values)
}

如果不需要使用自定義的比較方式，并且數(shù)組較大時(shí)（這里限定了200），則使用 SetCache 類(lèi)來(lái)緩存數(shù)組。

SetChche 其實(shí)使用的是 Map/Set 或者對(duì)象的方式來(lái)存儲(chǔ)，避免大數(shù)組嵌套循環(huán)時(shí)造成的性能損耗。

### 循環(huán)比較

接下來(lái)就遍歷第一個(gè)數(shù)組 array，將數(shù)組中的每一項(xiàng)和第二個(gè)數(shù)組的每一項(xiàng)比較。

if (isCommon && computed === computed) {
  let valuesIndex = valuesLength
  while (valuesIndex--) {
    if (values[valuesIndex] === computed) {
      continue outer
    }
  }
  result.push(value)
}
else if (!includes(values, computed, comparator)) {
  result.push(value)
}

可以看到，如果 isCommon 沒(méi)有標(biāo)記為 false，或者需要比較的值 computed 不為 NaN 時(shí)，都采用嵌套循環(huán)的方式來(lái)比較。循環(huán)完畢，沒(méi)有在第二個(gè)數(shù)組中發(fā)現(xiàn)相同的項(xiàng)時(shí)，將該項(xiàng)存入數(shù)組 result 中。

如果 isCommon 為 false 或者需要比較的值為 NaN 時(shí)，則調(diào)用 includes 方法來(lái)比較。

由之前的分析得知：

如果指定 comparator ，則 includes 為 arrayIncludesWith

如果被比較的數(shù)組 values 的長(zhǎng)度超過(guò) 200 ，則 includes 為 cacheHas

否則，includes 為 arrayIncludes

+0與-0的處理

在看代碼的時(shí)候，有一段十分奇怪：

value = (comparator || value !== 0) ? value : 0

這段代碼的意思是，在沒(méi)有提供 comparator 的情況下，如果 value === 0 ，則將 value 賦值為 0 。

value === 0 時(shí)，可能為 +0 、-0 和 0 ，lodash 為什么要將它們都轉(zhuǎn)為 0 呢？

后來(lái)看到 lodash 作者在 issue 中說(shuō)，因?yàn)楸容^會(huì)用到 Set ，而 Set 是不能區(qū)分 +0 和 -0 的。

參考

Lodash系列——difference函數(shù)源碼解析

value = (comparator || value !== 0) ? value : 0; does it work?

License

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

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

作者：對(duì)角另一面

GPU云服務(wù)器云服務(wù)器源碼中文說(shuō)明之大數(shù)據(jù)之?dāng)?shù)據(jù)挖掘分析 lodash cdn lodash

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93421.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Noodles

男|高級(jí)講師

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

TA的文章

SSL證書(shū)是什么？SSL證書(shū)一般要多少錢(qián)？

閱讀 1083·2021-11-22 15:35
Arasaka：圣何塞高防VPS月付100元起,AS9929線路

閱讀 1723·2021-10-26 09:49
強(qiáng)強(qiáng)聯(lián)手：Pyston團(tuán)隊(duì)宣布加入Anaconda！

閱讀 3266·2021-09-02 15:11
2018面試題總結(jié)（一）

閱讀 2105·2019-08-30 15:53
成長(zhǎng)小筆記

閱讀 2659·2019-08-30 15:53
（實(shí)戰(zhàn)）多邊形，梯形盒陰影css實(shí)現(xiàn)技巧

閱讀 2955·2019-08-30 14:11
關(guān)于浮動(dòng)float

閱讀 3550·2019-08-30 12:59
深入學(xué)習(xí)CSS布局系列（一）布局常用屬性

閱讀 3268·2019-08-30 12:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

lodash源碼分析之?dāng)?shù)組的差集

相關(guān)文章

lodash源碼分析之緩存使用方式的進(jìn)一步封裝

lodash源碼分析之緩存使用方式的進(jìn)一步封裝

lodash源碼分析之chunk的尺與刀

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

lodash源碼分析之List緩存

發(fā)表評(píng)論

0條評(píng)論

Noodles

男|高級(jí)講師

TA的文章

SSL證書(shū)是什么？SSL證書(shū)一般要多少錢(qián)？

Arasaka：圣何塞高防VPS月付100元起,AS9929線路

強(qiáng)強(qiáng)聯(lián)手：Pyston團(tuán)隊(duì)宣布加入Anaconda！

2018面試題總結(jié)（一）

成長(zhǎng)小筆記

（實(shí)戰(zhàn)）多邊形，梯形盒陰影css實(shí)現(xiàn)技巧

關(guān)于浮動(dòng)float

深入學(xué)習(xí)CSS布局系列（一）布局常用屬性

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

lodash源碼分析之?dāng)?shù)組的差集

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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