亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

lodash源碼分析之chunk的尺與刀

ZweiZhao / 2007人閱讀

摘要：萬(wàn)條數(shù)據(jù)依賴讀源碼之從看稀疏數(shù)組與密集數(shù)組原理的原理歸結(jié)起來(lái)就是切割和放置。尺在切割之前，需要用尺確定切割的數(shù)量。容器的長(zhǎng)度剛好與塊的數(shù)量一致。當(dāng)與塊的數(shù)量相等時(shí)，表示已經(jīng)切割完畢，停止切割，最后將結(jié)果返回。

以不正義開(kāi)始的事情，必須用罪惡使它鞏固。
——莎士比亞《麥克白》

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

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

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

作用與用法

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

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

const arr = [] // 1萬(wàn)條數(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é)起來(lái)就是切割和放置。

chunk 最后返回的結(jié)果如 [[1],[1],[1]] 的形式，放置就是將切割下來(lái)的塊放置到數(shù)組容器中。

那要怎樣切割呢？

因?yàn)橹付舜笮?，因此切割跟切蛋糕很像，參?shù) size 是尺子，測(cè)好每塊的長(zhǎng)度，slice 函數(shù)是刀， 將數(shù)組一塊一塊切出來(lái)。

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

明白了原理，下面來(lái)看看源碼。

源碼總覽 
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ù)量。

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

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

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

看下代碼:

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

這里創(chuàng)建了一個(gè)用來(lái)放置所有塊的容器 result 。容器的長(zhǎng)度剛好與塊的數(shù)量一致。

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

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

resIndex 是放置塊的位置，index 是切割的開(kāi)始位置。

當(dāng) index 與塊的數(shù)量 length 相等時(shí)，表示已經(jīng)切割完畢，停止切割，最后將結(jié)果返回。

參考

lodash源碼解析——chunk函數(shù)

License

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

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

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

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

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

相關(guān)文章

  • JavaScript 數(shù)組分組的實(shí)現(xiàn)

    摘要：今天回答了的問(wèn)題生產(chǎn)嵌套數(shù)組也就是對(duì)數(shù)組分組更好的寫(xiě)法。實(shí)現(xiàn)像這種，目標(biāo)數(shù)組長(zhǎng)度和原數(shù)組長(zhǎng)度不一致的情況，函數(shù)式寫(xiě)法很容易想到函數(shù)。小結(jié)數(shù)組分組是一個(gè)很簡(jiǎn)單的問(wèn)題，有很多種方法來(lái)處理。 今天回答了 @_bleach 的問(wèn)題：JS生產(chǎn)嵌套數(shù)組（也就是對(duì)數(shù)組分組）更好的寫(xiě)法?；卮鸬倪^(guò)程中對(duì) lodash _.chunk() 產(chǎn)生了好奇，所以分析了一下它的源碼，再加上我自己的解決方案，收集...

    Coly 評(píng)論0 收藏0

  • Lodash源碼講解-chunk函數(shù)

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

    ISherry 評(píng)論0 收藏0

  • Lodash學(xué)習(xí)筆記 - chunk函數(shù)

    摘要：文檔地址中文文檔英文文檔源碼地址將數(shù)組拆分成多個(gè)長(zhǎng)度的區(qū)塊，并將這些區(qū)塊組成一個(gè)新數(shù)組。如果無(wú)法被分割成全部等長(zhǎng)的區(qū)塊，那么最后剩余的元素將組成一個(gè)區(qū)塊。 百忙之中（閑來(lái)無(wú)事）想抽點(diǎn)時(shí)間好好讀一下源碼，于是就選了Lodash來(lái)寫(xiě)一個(gè)系列罷。讀源碼順序就按照l(shuí)oadsh文檔順序來(lái)。 文檔地址：中文文檔?? 英文文檔源碼地址：gayhub _.chunk(array, [size...

    DrizzleX 評(píng)論0 收藏0

  • lodash數(shù)組篇之1 chunk()

    摘要：最近打算去研究下的源碼，準(zhǔn)備把大部分方法都實(shí)現(xiàn)一遍。先自己寫(xiě)，然后在對(duì)照源碼。第一個(gè)是將數(shù)組拆分成多個(gè)長(zhǎng)度的區(qū)塊，并將這些區(qū)塊組成一個(gè)新數(shù)組。 最近打算去研究下lodash的源碼，準(zhǔn)備把大部分方法都實(shí)現(xiàn)一遍。先自己寫(xiě)，然后在對(duì)照源碼。第一個(gè)是 chunk 將數(shù)組（array）拆分成多個(gè) size 長(zhǎng)度的區(qū)塊，并將這些區(qū)塊組成一個(gè)新數(shù)組。 如果array 無(wú)法被分割成全部等長(zhǎng)的區(qū)塊，那么...

    cangck_X 評(píng)論0 收藏0

  • webpack4 系列教程(三): 多頁(yè)面解決方案--提取公共代碼

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

    CarterLi 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<