Lodash源码讲解(2)-chunk函数

2017-08-17

JavaScript

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

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