Lodash源码讲解-chunk函数

ISherry 发布于2019-08-21 11:59 / 3354人阅读

摘要：原文首发于源码讲解这是我们阅读源码的第篇博客，在这篇文章里我们来学习一下的方法。好啦，关于函数暂时就先讲到这里啦。与恶龙缠斗过久自身亦成为恶龙凝视深渊过久深渊将回以凝视。

原文首发于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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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