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暂时就先讲到这里啦。

与恶龙缠斗太久,自身亦成为恶龙；凝视深渊太久,深渊将回以凝视。