lodash源碼分析之chunk的尺與刀

ZweiZhao 發布于2019-08-21 17:56 / 1960人閱讀

摘要：萬條數據依賴讀源碼之從看稀疏數組與密集數組原理的原理歸結起來就是切割和放置。尺在切割之前，需要用尺確定切割的數量。容器的長度剛好與塊的數量一致。當與塊的數量相等時，表示已經切割完畢，停止切割，最后將結果返回。

以不正義開始的事情，必須用罪惡使它鞏固。

——莎士比亞《麥克白》

最近很多事似乎印證了這句話，一句謊言最后要用一百句謊言來圓謊。

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

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

作用與用法

chunk 函數可以將一個數組，切割成指定大小的塊，返回由這些塊組成的新數組。

chunk 函數在前端可以用來緩解一些性能問題。例如大量的 DOM 操作，可以分塊讓瀏覽器在空閑的時候處理，避免頁面卡死。如下面的代碼，向頁面中插入大量的DOM。

const arr = [] // 1萬條數據
const chunks = _.chunk(arr, 100)

const append = function () {
  if (chunks.length > 0) {
    const current = chunks.pop()
    current.forEach(item => {
      const node = document.createElement("div")
      node.innerText = item
      document.body.appendChild(node)
    })
    setTimeout(append, 0)
  }
}

append()

依賴

import slice from "./slice.js"

讀lodash源碼之從slice看稀疏數組與密集數組

原理

chunk 的原理歸結起來就是切割和放置。

chunk 最后返回的結果如 [[1],[1],[1]] 的形式，放置就是將切割下來的塊放置到數組容器中。

那要怎樣切割呢？

因為指定了大小，因此切割跟切蛋糕很像，參數 size 是尺子，測好每塊的長度，slice 函數是刀，將數組一塊一塊切出來。

例如有 [1,2,3,4,5] 這個數組，size 指定為 2，則第一次切割會得到 [1,2] 的塊，第二次切割得到 [4,5]，剩下的是 [5] 。這個數組最終會被切為三塊。

明白了原理，下面來看看源碼。

源碼總覽

function chunk(array, size) {
  size = Math.max(size, 0)
  const length = array == null ? 0 : array.length
  if (!length || size < 1) {
    return []
  }
  let index = 0
  let resIndex = 0
  const result = new Array(Math.ceil(length / size))

  while (index < length) {
    result[resIndex++] = slice(array, index, (index += size))
  }
  return result
}

參數處理

size = Math.max(size, 0)
const length = array == null ? 0 : array.length
if (!length || size < 1) {
  return []
}

確保 length 存在和 size 比 1 大，如果不滿足條件，返回空數組。

尺

在切割之前，需要用尺確定切割的數量。

從上面的原理分析可以看到，切割是不公平的，除了前面的塊都是等分外，最后一塊可能會比前面的少。

那怎么確定切割的數量呢？學過除法的知道， length/size 即可知道平均分塊的數量，如果有余數，則余數是最后那塊的長度，需要向上取整。

這在 javascript 中可以用 Math.ceil 函數，它返回的是向上取整后的結果。

看下代碼:

const result = new Array(Math.ceil(length / size))

這里創建了一個用來放置所有塊的容器 result 。容器的長度剛好與塊的數量一致。

刀

let index = 0
let resIndex = 0
while (index < length) {
  result[resIndex++] = slice(array, index, (index += size))
}

測量好塊的數量后，就要下刀切割啦。每切割下一塊，就立馬放置到容器 result 中。

resIndex 是放置塊的位置，index 是切割的開始位置。

當 index 與塊的數量 length 相等時，表示已經切割完畢，停止切割，最后將結果返回。

參考

lodash源碼解析——chunk函數

License

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

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

作者：對角另一面

GPU云服務器云服務器源碼中文說明之大數據之數據挖掘分析 chunk lodash

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90247.html

JavaScript 數組分組的實現

摘要：今天回答了的問題生產嵌套數組也就是對數組分組更好的寫法。實現像這種，目標數組長度和原數組長度不一致的情況，函數式寫法很容易想到函數。小結數組分組是一個很簡單的問題，有很多種方法來處理。今天回答了 @_bleach 的問題：JS生產嵌套數組（也就是對數組分組）更好的寫法。回答的過程中對 lodash _.chunk() 產生了好奇，所以分析了一下它的源碼，再加上我自己的解決方案，收集...

Coly 2019-08-20 12:14 評論0 收藏0
Lodash源碼講解-chunk函數

摘要：原文首發于源碼講解這是我們閱讀源碼的第篇博客，在這篇文章里我們來學習一下的方法。好啦，關于函數暫時就先講到這里啦。與惡龍纏斗過久自身亦成為惡龍凝視深淵過久深淵將回以凝視。原文首發于Lodash源碼講解這是我們閱讀Lodash源碼的第2篇博客，在這篇文章里我們來學習一下Lodash的chunk方法。 chunk函數內部依賴其他的函數，依賴的函數如下所示； slice 按照慣例，我們先...

ISherry 2019-08-21 11:59 評論0 收藏0
Lodash學習筆記 - chunk函數

摘要：文檔地址中文文檔英文文檔源碼地址將數組拆分成多個長度的區塊，并將這些區塊組成一個新數組。如果無法被分割成全部等長的區塊，那么最后剩余的元素將組成一個區塊。百忙之中（閑來無事）想抽點時間好好讀一下源碼，于是就選了Lodash來寫一個系列罷。讀源碼順序就按照loadsh文檔順序來。文檔地址：中文文檔?? 英文文檔源碼地址：gayhub _.chunk(array, [size...

DrizzleX 2019-08-22 15:24 評論0 收藏0
lodash數組篇之1 chunk()

摘要：最近打算去研究下的源碼，準備把大部分方法都實現一遍。先自己寫，然后在對照源碼。第一個是將數組拆分成多個長度的區塊，并將這些區塊組成一個新數組。最近打算去研究下lodash的源碼，準備把大部分方法都實現一遍。先自己寫，然后在對照源碼。第一個是 chunk 將數組（array）拆分成多個 size 長度的區塊，并將這些區塊組成一個新數組。如果array 無法被分割成全部等長的區塊，那么...

cangck_X 2019-08-23 18:34 評論0 收藏0
webpack4 系列教程(三): 多頁面解決方案--提取公共代碼

摘要：文件配置如下多頁面應用注意屬性其次打包業務中公共代碼首先打包中的文件著重來看配置。個人網站原文鏈接系列教程三多頁面解決方案提取公共代碼這節課講解webpack4打包多頁面應用過程中的提取公共代碼部分。相比于webpack3，4.0版本用optimization.splitChunks配置替換了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。 >>...

CarterLi 2019-08-23 10:49 評論0 收藏0