資訊專欄INFORMATION COLUMN
摘要：萬條數(shù)據(jù)依賴讀源碼之從看稀疏數(shù)組與密集數(shù)組原理的原理歸結(jié)起來就是切割和放置。尺在切割之前，需要用尺確定切割的數(shù)量。容器的長度剛好與塊的數(shù)量一致。當與塊的數(shù)量相等時，表示已經(jīng)切割完畢，停止切割，最后將結(jié)果返回。
以不正義開始的事情，必須用罪惡使它鞏固。——莎士比亞《麥克白》
最近很多事似乎印證了這句話，一句謊言最后要用一百句謊言來圓謊。
本文為讀 lodash 源碼的第二篇，后續(xù)文章會更新到這個倉庫中，歡迎 star：pocket-lodash
gitbook也會同步倉庫的更新，gitbook地址：pocket-lodash
作用與用法chunk 函數(shù)可以將一個數(shù)組，切割成指定大小的塊，返回由這些塊組成的新數(shù)組。
chunk 函數(shù)在前端可以用來緩解一些性能問題。例如大量的 DOM 操作，可以分塊讓瀏覽器在空閑的時候處理，避免頁面卡死。如下面的代碼，向頁面中插入大量的DOM。
const arr = [] // 1萬條數(shù)據(jù)
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看稀疏數(shù)組與密集數(shù)組
原理chunk 的原理歸結(jié)起來就是切割和放置。
chunk 最后返回的結(jié)果如 [[1],[1],[1]] 的形式，放置就是將切割下來的塊放置到數(shù)組容器中。
那要怎樣切割呢？
因為指定了大小，因此切割跟切蛋糕很像，參數(shù) size 是尺子，測好每塊的長度，slice 函數(shù)是刀， 將數(shù)組一塊一塊切出來。
例如有 [1,2,3,4,5] 這個數(shù)組，size 指定為 2，則第一次切割會得到 [1,2] 的塊，第二次切割得到 [4,5]，剩下的是 [5] 。這個數(shù)組最終會被切為三塊。
明白了原理，下面來看看源碼。
源碼總覽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
}
參數(shù)處理
size = Math.max(size, 0)
const length = array == null ? 0 : array.length
if (!length || size < 1) {
return []
}
確保 length 存在和 size 比 1 大，如果不滿足條件，返回空數(shù)組。
尺在切割之前，需要用尺確定切割的數(shù)量。
從上面的原理分析可以看到，切割是不公平的，除了前面的塊都是等分外，最后一塊可能會比前面的少。
那怎么確定切割的數(shù)量呢？學(xué)過除法的知道， length/size 即可知道平均分塊的數(shù)量，如果有余數(shù)，則余數(shù)是最后那塊的長度，需要向上取整。
這在 javascript 中可以用 Math.ceil 函數(shù)，它返回的是向上取整后的結(jié)果。
看下代碼:
const result = new Array(Math.ceil(length / size))
這里創(chuàng)建了一個用來放置所有塊的容器 result 。容器的長度剛好與塊的數(shù)量一致。
刀let index = 0
let resIndex = 0
while (index < length) {
result[resIndex++] = slice(array, index, (index += size))
}
測量好塊的數(shù)量后，就要下刀切割啦。每切割下一塊，就立馬放置到容器 result 中。
resIndex 是放置塊的位置，index 是切割的開始位置。
當 index 與塊的數(shù)量 length 相等時，表示已經(jīng)切割完畢，停止切割，最后將結(jié)果返回。
參考lodash源碼解析——chunk函數(shù)
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/90247.html
摘要：今天回答了的問題生產(chǎn)嵌套數(shù)組也就是對數(shù)組分組更好的寫法。實現(xiàn)像這種，目標數(shù)組長度和原數(shù)組長度不一致的情況，函數(shù)式寫法很容易想到函數(shù)。小結(jié)數(shù)組分組是一個很簡單的問題，有很多種方法來處理。 今天回答了 @_bleach 的問題：JS生產(chǎn)嵌套數(shù)組（也就是對數(shù)組分組）更好的寫法?；卮鸬倪^程中對 lodash _.chunk() 產(chǎn)生了好奇，所以分析了一下它的源碼，再加上我自己的解決方案，收集...
摘要：原文首發(fā)于源碼講解這是我們閱讀源碼的第篇博客，在這篇文章里我們來學(xué)習(xí)一下的方法。好啦，關(guān)于函數(shù)暫時就先講到這里啦。與惡龍纏斗過久自身亦成為惡龍凝視深淵過久深淵將回以凝視。 原文首發(fā)于Lodash源碼講解 這是我們閱讀Lodash源碼的第2篇博客，在這篇文章里我們來學(xué)習(xí)一下Lodash的chunk方法。 chunk函數(shù)內(nèi)部依賴其他的函數(shù)，依賴的函數(shù)如下所示； slice 按照慣例，我們先...
摘要：文檔地址中文文檔英文文檔源碼地址將數(shù)組拆分成多個長度的區(qū)塊，并將這些區(qū)塊組成一個新數(shù)組。如果無法被分割成全部等長的區(qū)塊，那么最后剩余的元素將組成一個區(qū)塊。 百忙之中（閑來無事）想抽點時間好好讀一下源碼，于是就選了Lodash來寫一個系列罷。讀源碼順序就按照loadsh文檔順序來。 文檔地址：中文文檔?? 英文文檔源碼地址：gayhub _.chunk(array, [size...
摘要：最近打算去研究下的源碼，準備把大部分方法都實現(xiàn)一遍。先自己寫，然后在對照源碼。第一個是將數(shù)組拆分成多個長度的區(qū)塊，并將這些區(qū)塊組成一個新數(shù)組。 最近打算去研究下lodash的源碼，準備把大部分方法都實現(xiàn)一遍。先自己寫，然后在對照源碼。第一個是 chunk 將數(shù)組（array）拆分成多個 size 長度的區(qū)塊，并將這些區(qū)塊組成一個新數(shù)組。 如果array 無法被分割成全部等長的區(qū)塊，那么...
摘要：文件配置如下多頁面應(yīng)用注意屬性其次打包業(yè)務(wù)中公共代碼首先打包中的文件著重來看配置。個人網(wǎng)站原文鏈接系列教程三多頁面解決方案提取公共代碼 這節(jié)課講解webpack4打包多頁面應(yīng)用過程中的提取公共代碼部分。相比于webpack3，4.0版本用optimization.splitChunks配置替換了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。 >>...
閱讀 3735·2021-11-24 10:46
閱讀 1706·2021-11-15 11:38
閱讀 3761·2021-11-15 11:37
閱讀 3481·2021-10-27 14:19
閱讀 1939·2021-09-03 10:36
閱讀 1991·2021-08-16 11:02
閱讀 2998·2019-08-30 15:55
閱讀 2251·2019-08-30 15:44
