Lodash源碼講解-chunk函數

原文首發於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暫時就先講到這裏啦。

與惡龍纏鬥太久,自身亦成爲惡龍；凝視深淵太久,深淵將回以凝視。