lodash源码之chunk

作者: hahalang | 来源:发表于2020-02-29 13:38 被阅读0次

1、使用场景

_.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']]

2、自己实现一个简单的chunk方法

看到 chunk 方法的使用示例之后,自己实现了一个简单 chunk 函数,不过没有对参数的类型做太多的处理。

function chunk(arr, size = 1) {
  if(size >= arr.length) {
    return arr;
  } else if(size < 1) {
    return [];
  };
  const newArr = [];
  const loop = Math.ceil(arr.length / size);
  for(let i = 0; i < loop; i++) {
    newArr.push(arr.slice(i * size, (i + 1) * size));
  };
  return newArr;
};

3、源码分析

chunk.js

import slice from './slice.js'
import toInteger from './toInteger.js'

function chunk(array, size = 1) {
  size = Math.max(toInteger(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

分析 chunk 这个函数,从函数传入的参数开始:
1. 参数

function chunk(array, size = 1)

如果 chunk() 这个方法只传一个参数,那么 size 默认取 1,传入的数组 array 就会被分割成长度是 1 的数组。即:chunk([1,2,3]) => [[1],[2],[3]]
2、对参数size的处理

size = Math.max(toInteger(size), 0)

首先解释 toInteger(size) 这个方法,这个方法可以把 size 转换成整数,如果 size 不能转换成 Number 类型,该方法就返回 0。Math.max 方法是取最大值。总结下来就是:

  • size 是负数和0、以及转换成 Number 类型后不是正数的,size = 0;
  • 别的情况 size = Math.floor(Number(size));

3、如果传入的array和size不符合,就直接返回[]

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

这里总结了返回 [] 的几种情况:

  • size < 1;
  • array 是空数组;
  • array 类型是:Boolean、undefined、null、Number;
如果参数类型都符合条件,就到了正式处理的环节了:
  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
const result = new Array(Math.ceil(length / size))

这里先使用new Array让result成为一个固定长度的空数组,可能会比直接让它成为一个空数组性能更高一些;

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

slice(array, index, (index += size)) 实际上就类似数组的 slice 方法,即:array.slice(index, index += size) 。
最后 把 result 这个数组 return 出去即可。

相关文章

  • lodash源码之chunk

    1、使用场景 _.chunk(array, [size=1])将数组(array)拆分成多个 size 长度的区块...

  • Lodash 源码阅读 —— chunk

    Lodash 源码阅读 —— chunk 这里我先给出源码: 下面是分片段来解读: 这一段代码的意思是说,如果传入...

  • Lodash源码解析-_.chunk

    将数组(array)拆分成多个 size 长度的区块,并将这些区块组成一个新数组。 如果array 无法被分割成全...

  • lodash源码分析-- chunk函数实现

    _.chunk函数 我的实现 别人的实现 对比 1.我觉得这一次我的耗时应该比较少吧。哈哈哈哈哈,因为只循环了一遍...

  • Lodash

    Lodash-Array Array _.chunk按照一定的长度将数组均匀切割成 chunk,将切割后的 chu...

  • 2022-04-06 lodash源码学习 - chunk

    function chunk(array, size, guard)创建一个元素数组,按照“size”的长度分组。...

  • lodash源码之add

    1、使用场景 add方法用于计算两个数的和 2、源码分析 add.js 可以看到,add方法的源码很短。首先引入一...

  • Lodash源码解析 Part1:Array、Collectio

    Lodash源码解析 Part1:Array、Collection lodash究竟做了什么?封装封装可能会用到但...

  • lodash-array-chunk函数实现

    简介 lodas包作为npm应用量最多的一个package,本人很好奇它有什么魅力,自己抽空用自己的逻辑写它的方法...

  • loadsh防抖节流源码解读

    debounce 源码解析 lodash debounce 用法 _.debounce(func, [wait=0...

网友评论

    本文标题:lodash源码之chunk

    本文链接:https://www.haomeiwen.com/subject/xtldhhtx.html