Lodash学习笔记 - chunk函数

DrizzleX 发布于2019-08-22 15:24 / 3162人阅读

摘要：文档地址中文文档英文文档源码地址将数组拆分成多个长度的区块，并将这些区块组成一个新数组。如果无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

百忙之中（闲来无事）想抽点时间好好读一下源码，于是就选了Lodash来写一个系列罢。读源码顺序就按照loadsh文档顺序来。

文档地址：中文文档英文文档
源码地址：gayhub

    _.chunk(array, [size=1])

将数组array拆分成多个 size 长度的区块，并将这些区块组成一个新数组。如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

例：

    chunk(["a", "b", "c", "d"], 2)
    // => [["a", "b"], ["c", "d"]]
     
    chunk(["a", "b", "c", "d"], 3)
    // => [["a", "b", "c"], ["d"]]

很实用的一个函数，下面来看下具体实现：

可以看到，chunk依赖了slice.js，具体实现解析已经讲过了：传送门

    import slice from "./slice.js"

首先是参数的验证

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

根据length/size向上取整来确定新的数组长度，循环调用切片函数slice，最后返回结果

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

最后贴个源码：

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) {
  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
}

export default chunk

服务器托管专线服务学习笔记学习笔记一基础学习笔记深度学习笔记

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

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

Lodash学习笔记 - slice函数

摘要：文档地址中文文档英文文档源码地址第一个函数是，不过源码中依赖了，所以第一篇文章就从开始。这个函数的作用就是裁剪数组，从下标开始，到下标结束，但是并不包含，并将结果作为一个数组返回。并且注明了这个方法用于代替来确保数组正确返回。百忙之中（闲来无事）想抽点时间好好读一下源码，于是就选了Lodash来写一个系列罢。读源码顺序就按照loadsh文档顺序来。文档地址：中文文档英文文档源...

lei___ 2019-08-22 15:22 评论0 收藏0
Lodash源码讲解-chunk函数

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

ISherry 2019-08-21 11:59 评论0 收藏0
JavaScript 数组分组的实现

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

Coly 2019-08-20 12:14 评论0 收藏0
关于API 选择的一些思考.

摘要：问题描述我经常需要使用一些基础性的功能性函数比如数据去重对象合并等通常情况下选择方向大致有个自己实现使用原生的使用提供的首先放弃自己实现这样的方式因为工作量大即使实现了没有经过测试不够稳定没有意义因为已经存在现成的别人实现的其次如果原生提供问题描述:我经常需要使用一些基础性的, 功能性函数, 比如数据去重, 对象合并等. 通常情况下,选择方向大致有3个: 自己实现 API 使用原生...

Tychio 2019-08-20 18:52 评论0 收藏0
lodash源码分析之chunk的尺与刀

摘要：万条数据依赖读源码之从看稀疏数组与密集数组原理的原理归结起来就是切割和放置。尺在切割之前，需要用尺确定切割的数量。容器的长度刚好与块的数量一致。当与块的数量相等时，表示已经切割完毕，停止切割，最后将结果返回。以不正义开始的事情，必须用罪恶使它巩固。——莎士比亚《麦克白》最近很多事似乎印证了这句话，一句谎言最后要用一百句谎言来圆谎。本文为读 lodash 源码的第二篇，后续文章会...

ZweiZhao 2019-08-21 17:56 评论0 收藏0