lodash源碼分析之去重--uniq方法

lodash.js包是node開發中常用的js工具包,裏面有許多實用的方法,今天分析常用的一個去重方法---uniq

用法

    _.uniq([2, 1, 2])
    // => [2, 1]

源碼包

    // uniq.js
    import baseUniq from './.internal/baseUniq.js'
    
    function uniq(array) {
          return (array != null && array.length) ? baseUniq(array) : []
    }

    export default uniq

可以看到,uniq函數這邊只做了一個針對baseUniq的封裝,所以繼續看baseUniq源碼😂

    // baseUniq.js
    import SetCache from './SetCache.js'
    import arrayIncludes from './arrayIncludes.js'
    import arrayIncludesWith from './arrayIncludesWith.js'
    import cacheHas from './cacheHas.js'
    import createSet from './createSet.js'
    import setToArray from './setToArray.js'
    
    const LARGE_ARRAY_SIZE = 200 // 作爲數組處理的最大數組長度
    function baseUniq(array, iteratee, comparator) {
      let index = -1
      let includes = arrayIncludes // 向下兼容,內部使用使用while做循環
      let isCommon = true
    
      const { length } = array
      const result = []
      let seen = result
    
      if (comparator) {
        // 如果有comparator,標註爲非普通函數處理
        isCommon = false
        includes = arrayIncludesWith // includes 判重方法更換爲 arrayIncludesWith
      }
      else if (length >= LARGE_ARRAY_SIZE) { // 長度超過200後啓用,大數組優化策略
        // 判斷是否有迭代器,沒有則設爲Set類型(支持Set類型的環境直接調用生成Set實例去重)
        const set = iteratee ? null : createSet(array) 
        if (set) {
          return setToArray(set) //Set類型轉數組(Set類型中不存在重複元素,相當於去重了)直接返回
        }
        isCommon = false // 非普通模式
        includes = cacheHas // includes 判重方法更換爲hash判斷
        seen = new SetCache // 實例化hash緩存容器
      }
      else {
        // 存在迭代器的情況下,新開闢內存空間爲緩存容器,否則直接指向結果數組容器
        seen = iteratee ? [] : result
      }
      outer:
      while (++index < length) { // 循環遍歷每一個元素
        let value = array[index] // 取出當前遍歷值
        // 存在迭代器函數執行迭代器函數後返回結果,否則直接返回自身
        const computed = iteratee ? iteratee(value) : value 
        
        value = (comparator || value !== 0) ? value : 0
        if (isCommon && computed === computed) { // 普通模式執行下面代碼
          let seenIndex = seen.length // 取當前容器的長度爲下一個元素的角標
          while (seenIndex--) { // 循環遍歷每一個容器中每一個元素
            if (seen[seenIndex] === computed) { // 匹配到重複的元素
              continue outer // 直接跳出當前循環直接進入下一輪outer:
            }
          }
          if (iteratee) { // 有迭代器的情況下
            seen.push(computed) // 結果推入緩存容器
          }
          result.push(value) // 追加入結果數組
        }
         // 非正常數組處理模式下,調用includes方法,判斷緩存容器中是否存在重複的值
        else if (!includes(seen, computed, comparator)) {
          if (seen !== result) { // 非普通模式下,result和seen內存空間地址不一樣
            seen.push(computed)
          }
          result.push(value) // 追加入結果數組
        }
      }
      return result // 循環完成,返回去重後的數組
    }
    
    export default baseUniq

大致的流程:

邏輯流程

分析

1.注意下面的代碼:

    else if (length >= LARGE_ARRAY_SIZE) { // 長度超過200後啓用,大數組優化策略
    // 判斷是否有迭代器,沒有則設爲Set類型(支持Set類型的環境直接調用生成Set實例去重)
    const set = iteratee ? null : createSet(array) 
    if (set) {
      return setToArray(set) //Set類型轉數組(Set類型中不存在重複元素,相當於去重了)直接返回
    }
  }

lodash 會去判斷當前數組的長度,如果數組過大會調用ES6的新的Set數據類型,Set類型中不會存在重複的元素。也就是說做到了數組的去重,最後調用setToArray方法返回數組,Set類型是可迭代的類型,可以使用 ...擴展運算符。
在性能方面,因爲js是單線程執行,大數組的循環會長時間佔用CPU時間,導致線程被阻塞。而使用Set類型後將去重的工作交個底層去處理,提高了性能。所以平時在有去重需求時可以考慮Set類型的去重,而不是在js執行層去做循環,也是一種性能優化。

2.接着看不採用Set去重的代碼處理策略:

    outer:
      while (++index < length) { // 循環遍歷每一個元素
        let value = array[index] // 取出當前遍歷值
        
        value = (comparator || value !== 0) ? value : 0
        if (isCommon && computed === computed) { // 普通模式執行下面代碼
          let seenIndex = seen.length // 取當前容器的長度爲下一個元素的角標
          while (seenIndex--) { // 循環遍歷每一個容器中每一個元素
            if (seen[seenIndex] === computed) { // 匹配到重複的元素
              continue outer // 直接跳出當前循環直接進入下一輪outer:
            }
          }
        }
      }

可以看到這裏使用兩個嵌套while去遍歷數組,並判斷是否存在重複元素。這樣的邏輯並沒有問題,也是平時工作中最常見的去重代碼邏輯,代碼的執行時間複雜度爲 O(n^2),執行時間會隨着數組的增大指數級增加,所以也就是爲什麼lodash的uniq函數要規定最大的可迭代數組長度,超過長度採用Set去重法。避免性能浪費

尾巴

ES6的出現真的很大程度上方便代碼的編寫,ES6這麼方便爲什麼我還喜歡lodash這種庫,既臃腫複雜,又需要記憶很多API。我的回答是高效、優雅、省心。工作時使用成熟庫是對代碼質量的保證,並且成熟的庫一般會對性能部分進行優化。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章