每天一个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<s;i++){
    result[i] = arr.slice(size*i,size*(i+1))
  }
  return result
}

console.log(chunk(data,2))

实现的思路。如果我传入一个长度为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方法吧。