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

ISherry 發(fā)布于2019-08-21 11:59 / 3364人閱讀

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

原文首發(fā)于Lodash源碼講解

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

chunk函數(shù)內(nèi)部依賴其他的函數(shù)，依賴的函數(shù)如下所示；

slice

按照慣例，我們先來看一下關(guān)于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

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

代碼演示如下：

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

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

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

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

#3：通過一個while循環(huán)不斷地從原數(shù)組里取出指定長度的片段，這里使用到了slice函數(shù)，這個函數(shù)我們之前已經(jīng)講解過了，這里就不在詳細(xì)的解釋了；然后當(dāng)循環(huán)完成之后，我們就把這個新的數(shù)組作為結(jié)果返回。

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

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