lodash源码分析之chunk的尺与刀

ZweiZhao 发布于2019-08-21 17:56 / 1876人阅读

摘要：万条数据依赖读源码之从看稀疏数组与密集数组原理的原理归结起来就是切割和放置。尺在切割之前，需要用尺确定切割的数量。容器的长度刚好与块的数量一致。当与块的数量相等时，表示已经切割完毕，停止切割，最后将结果返回。

以不正义开始的事情，必须用罪恶使它巩固。

——莎士比亚《麦克白》

最近很多事似乎印证了这句话，一句谎言最后要用一百句谎言来圆谎。

本文为读 lodash 源码的第二篇，后续文章会更新到这个仓库中，欢迎 star：pocket-lodash

gitbook也会同步仓库的更新，gitbook地址：pocket-lodash

作用与用法

chunk 函数可以将一个数组，切割成指定大小的块，返回由这些块组成的新数组。

chunk 函数在前端可以用来缓解一些性能问题。例如大量的 DOM 操作，可以分块让浏览器在空闲的时候处理，避免页面卡死。如下面的代码，向页面中插入大量的DOM。

const arr = [] // 1万条数据
const chunks = _.chunk(arr, 100)

const append = function () {
  if (chunks.length > 0) {
    const current = chunks.pop()
    current.forEach(item => {
      const node = document.createElement("div")
      node.innerText = item
      document.body.appendChild(node)
    })
    setTimeout(append, 0)
  }
}

append()

依赖

import slice from "./slice.js"

读lodash源码之从slice看稀疏数组与密集数组

原理

chunk 的原理归结起来就是切割和放置。

chunk 最后返回的结果如 [[1],[1],[1]] 的形式，放置就是将切割下来的块放置到数组容器中。

那要怎样切割呢？

因为指定了大小，因此切割跟切蛋糕很像，参数 size 是尺子，测好每块的长度，slice 函数是刀，将数组一块一块切出来。

例如有 [1,2,3,4,5] 这个数组，size 指定为 2，则第一次切割会得到 [1,2] 的块，第二次切割得到 [4,5]，剩下的是 [5] 。这个数组最终会被切为三块。

明白了原理，下面来看看源码。

源码总览

function chunk(array, size) {
  size = Math.max(size, 0)
  const length = array == null ? 0 : array.length
  if (!length || size < 1) {
    return []
  }
  let index = 0
  let resIndex = 0
  const result = new Array(Math.ceil(length / size))

  while (index < length) {
    result[resIndex++] = slice(array, index, (index += size))
  }
  return result
}

参数处理

size = Math.max(size, 0)
const length = array == null ? 0 : array.length
if (!length || size < 1) {
  return []
}

确保 length 存在和 size 比 1 大，如果不满足条件，返回空数组。

尺

在切割之前，需要用尺确定切割的数量。

从上面的原理分析可以看到，切割是不公平的，除了前面的块都是等分外，最后一块可能会比前面的少。

那怎么确定切割的数量呢？学过除法的知道， length/size 即可知道平均分块的数量，如果有余数，则余数是最后那块的长度，需要向上取整。

这在 javascript 中可以用 Math.ceil 函数，它返回的是向上取整后的结果。

看下代码:

const result = new Array(Math.ceil(length / size))

这里创建了一个用来放置所有块的容器 result 。容器的长度刚好与块的数量一致。

刀

let index = 0
let resIndex = 0
while (index < length) {
  result[resIndex++] = slice(array, index, (index += size))
}

测量好块的数量后，就要下刀切割啦。每切割下一块，就立马放置到容器 result 中。

resIndex 是放置块的位置，index 是切割的开始位置。

当 index 与块的数量 length 相等时，表示已经切割完毕，停止切割，最后将结果返回。

参考

lodash源码解析——chunk函数

License

署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

作者：对角另一面

云服务器 GPU云服务器源码中文说明之大数据之数据挖掘分析 chunk lodash

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

转载请注明本文地址：https://www.ucloud.cn/yun/90247.html

JavaScript 数组分组的实现

摘要：今天回答了的问题生产嵌套数组也就是对数组分组更好的写法。实现像这种，目标数组长度和原数组长度不一致的情况，函数式写法很容易想到函数。小结数组分组是一个很简单的问题，有很多种方法来处理。今天回答了 @_bleach 的问题：JS生产嵌套数组（也就是对数组分组）更好的写法。回答的过程中对 lodash _.chunk() 产生了好奇，所以分析了一下它的源码，再加上我自己的解决方案，收集...

Coly 2019-08-20 12:14 评论0 收藏0
Lodash源码讲解-chunk函数

摘要：原文首发于源码讲解这是我们阅读源码的第篇博客，在这篇文章里我们来学习一下的方法。好啦，关于函数暂时就先讲到这里啦。与恶龙缠斗过久自身亦成为恶龙凝视深渊过久深渊将回以凝视。原文首发于Lodash源码讲解这是我们阅读Lodash源码的第2篇博客，在这篇文章里我们来学习一下Lodash的chunk方法。 chunk函数内部依赖其他的函数，依赖的函数如下所示； slice 按照惯例，我们先...

ISherry 2019-08-21 11:59 评论0 收藏0
Lodash学习笔记 - chunk函数

摘要：文档地址中文文档英文文档源码地址将数组拆分成多个长度的区块，并将这些区块组成一个新数组。如果无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。百忙之中（闲来无事）想抽点时间好好读一下源码，于是就选了Lodash来写一个系列罢。读源码顺序就按照loadsh文档顺序来。文档地址：中文文档英文文档源码地址：gayhub _.chunk(array, [size...

DrizzleX 2019-08-22 15:24 评论0 收藏0
lodash数组篇之1 chunk()

摘要：最近打算去研究下的源码，准备把大部分方法都实现一遍。先自己写，然后在对照源码。第一个是将数组拆分成多个长度的区块，并将这些区块组成一个新数组。最近打算去研究下lodash的源码，准备把大部分方法都实现一遍。先自己写，然后在对照源码。第一个是 chunk 将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。如果array 无法被分割成全部等长的区块，那么...

cangck_X 2019-08-23 18:34 评论0 收藏0
webpack4 系列教程(三): 多页面解决方案--提取公共代码

摘要：文件配置如下多页面应用注意属性其次打包业务中公共代码首先打包中的文件着重来看配置。个人网站原文链接系列教程三多页面解决方案提取公共代码这节课讲解webpack4打包多页面应用过程中的提取公共代码部分。相比于webpack3，4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。 >>...

CarterLi 2019-08-23 10:49 评论0 收藏0