每天一个lodash方法-chunk

前言

之前做的足够多,但是不够好。批评自己的话万万千,不如真是做点小事日积月累来的实在。比起vue,react之类的大库,看的头晕,先从小库写起来吧。

17年希望自己能克服不够坚持,不够认真的毛病,踏踏实实积累一点东西,远离浮躁,认真的学习,夯实基础。目标不必太过远大,先从lodash开始。每天看一个lodash方法。

chunk方法源码链接

功能

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

使用方法

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

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

这是在源码里的执行效果。它接收一个数组,传入一个size,会将原数组按照size生成若干个新的数组,并组成一个数组。

看api文档的时候注意,[size=1],大概意思就是在不传size的情况下,size默认为1 做了个测试

var data = [1,2,3,4,5]

console.log(_.chunk(data))
//=> [[1],[2],[3],[4],[5]]

需要注意的是thunk方法是一个纯函数。它不会对传入的data有任何影响,这很不起眼,但很重要。

尝试自己实现一个chunk方法

简单分析,传入的参数有两个,第一个为数组,第二个为size,默认为1


function chunk(arr,size){
  var size = size || 1;
  // 
  var result = [];
  
  // 我这里能想到的是遍历
  var l = arr.length; //数组的长度
  var s = Math.ceil(l/size)//  假如我们有长度为10的数组,size传入的是3,是要分成4个自数组的。
  for(var i =0;i

实现的思路。如果我传入一个长度为10的数组,size为3,那么我按照每三个一组分,应该得到的结果是4个数组。10处以3再向上取整,刚好Math.ceil这个方法能满足我的需要。之后,再用一个for循环处理数组,放入我的result数组里,返回得到的result。

lodash的chunk实现

import slice from './slice.js'

function chunk(array, size) {
  size = Math.max(size, 0)  // 这里我没想明白,如果size为undefined  Math.max(size)岂不是NaN了,如有大佬指出,不胜感激。
  const length = array == null ? 0 : array.length //array如果不是null就取出length,否则length 为0
  if (!length || size < 1) {
    return [] // 不是array,就直接返回一个空数组。
  }
  let index = 0
  let resIndex = 0
  const result = new Array(Math.ceil(length / size))// Math.ceil(10/3) = 4 result应该为4个长度的数组。

  while (index < length) {
    result[resIndex++] = slice(array, index, (index += size)) // while循环生成result的数组。
  }
  return result
}

export default chunk

不同之处

  • Math.max(size,0)
  • 对length进行了判断,如果长度为0,就直接返回空数组。
  • 对result 我使用的是result = [],而lodash使用的是 new Array(),这里我google一圈也没搜索到new Array()的好处。new的性能要低于 字面变量result=[]的,微乎其微。
  • loop的话,while我使用的很少,大多数都是用for实现。这更像是个人倾向的一种选择。但是while循环的话,少了一个i,如果你的逻辑都很好的写在了循环体内,显然更简洁。

下一篇,slice方法吧。

你可能感兴趣的