Lodash源碼講解-chunk函數

ISherry 發布于2019-08-21 11:59 / 3356人閱讀

摘要：原文首發于源碼講解這是我們閱讀源碼的第篇博客，在這篇文章里我們來學習一下的方法。好啦，關于函數暫時就先講到這里啦。與惡龍纏斗過久自身亦成為惡龍凝視深淵過久深淵將回以凝視。

原文首發于Lodash源碼講解

這是我們閱讀Lodash源碼的第2篇博客，在這篇文章里我們來學習一下Lodash的chunk方法。

chunk函數內部依賴其他的函數，依賴的函數如下所示；

slice

按照慣例，我們先來看一下關于chunk方法的源碼chunk.js：

import slice from "./slice.js"

/**
 * Creates an array of elements split into groups the length of `size`.
 * If `array` can"t be split evenly, the final chunk will be the remaining
 * elements.
 *
 * @since 3.0.0
 * @category Array
 * @param {Array} array The array to process.
 * @param {number} [size=1] The length of each chunk
 * @returns {Array} Returns the new array of chunks.
 * @example
 *
 * chunk(["a", "b", "c", "d"], 2)
 * // => [["a", "b"], ["c", "d"]]
 *
 * chunk(["a", "b", "c", "d"], 3)
 * // => [["a", "b", "c"], ["d"]]
 */
function chunk(array, size) {
  // #1  
  size = Math.max(size, 0)
  const length = array == null ? 0 : array.length
  if (!length || size < 1) {
    return []
  }
  
  // #2
  let index = 0
  let resIndex = 0
  const result = new Array(Math.ceil(length / size))
  
  // #3  
  while (index < length) {
    result[resIndex++] = slice(array, index, (index += size))
  }
  return result
}

export default chunk

首先來說一下這個函數的作用；這個函數是用在數組上的一個方法，它將原來數組中的元素，按照給定的長度進行均分，均分后每一部分都是一個新的(小)數組，然后將這些均分的每一部分再次組成一個新的(大)數組；如果不能夠均分的話，新的(大)數組的最后一個元素則包含這些剩下的元素。

代碼演示如下：

  chunk(["a", "b", "c", "d"], 2)
  // => [["a", "b"], ["c", "d"]]
 
  chunk(["a", "b", "c", "d"], 3)
  // => [["a", "b", "c"], ["d"]]

接下來，我們還是按照標記的順序來逐步講解一下這個代碼：

#1：這一部分首先對傳遞的參數做一個處理，先判斷傳遞的size的大小，如果不大于0，那么就取0作為size的值；然后判斷傳遞的array的值是否為空，如果為空就把數組的長度設置為零，否則就獲取數組的長度；最后判斷size和length的值，如果length為0或者size小于0的話，直接返回一個空的數組。

#2：這部分定義了兩個變量，index用來作為原數組的索引，resIndex用來作為新生成的數組的索引；然后根據size的大小生成了一個新的數組result，我們這里使用Math.ceil(length / size)是向上取整，因為有可能出現剩余元素的情況。

#3：通過一個while循環不斷地從原數組里取出指定長度的片段，這里使用到了slice函數，這個函數我們之前已經講解過了，這里就不在詳細的解釋了；然后當循環完成之后，我們就把這個新的數組作為結果返回。

這個函數的內部實現因為依賴了slice，所以整體還是比較簡單的；我寫了一個例子_.chunk，大家也都自己親手實踐一下；畢竟實踐出真知呀。好啦，關于函數chunk暫時就先講到這里啦。

與惡龍纏斗過久,自身亦成為惡龍；凝視深淵過久,深淵將回以凝視。

云服務器 GPU云服務器 php函數講解 webrtc源碼講解 chunk lodash

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

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

webpack4 系列教程(四): 單頁面解決方案--代碼分割和懶加載

摘要：本節課講解打包單頁應用過程中的代碼分割和代碼懶加載。不同于多頁面應用的提取公共代碼，單頁面的代碼分割和懶加載不是通過配置來實現的，而是通過的寫法和內置函數實現的。個人網站原文鏈接系列教程四單頁面解決方案代碼分割和懶加載本節課講解webpack4打包單頁應用過程中的代碼分割和代碼懶加載。不同于多頁面應用的提取公共代碼，單頁面的代碼分割和懶加載不是通過webpack配置來實現的，而是通過...

jackwang 2019-08-26 12:14 評論0 收藏0
lodash源碼分析之chunk的尺與刀

摘要：萬條數據依賴讀源碼之從看稀疏數組與密集數組原理的原理歸結起來就是切割和放置。尺在切割之前，需要用尺確定切割的數量。容器的長度剛好與塊的數量一致。當與塊的數量相等時，表示已經切割完畢，停止切割，最后將結果返回。以不正義開始的事情，必須用罪惡使它鞏固。——莎士比亞《麥克白》最近很多事似乎印證了這句話，一句謊言最后要用一百句謊言來圓謊。本文為讀 lodash 源碼的第二篇，后續文章會...

ZweiZhao 2019-08-21 17:56 評論0 收藏0
webpack4 系列教程(三): 多頁面解決方案--提取公共代碼

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

CarterLi 2019-08-23 10:49 評論0 收藏0
Lodash學習筆記 - chunk函數

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

DrizzleX 2019-08-22 15:24 評論0 收藏0
JavaScript 數組分組的實現

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

Coly 2019-08-20 12:14 評論0 收藏0