【JavaScript】数组分组

数组分组

最终期望实现

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

参数

• array (Array) 需要被处理的数组
• [size=0] (number) 每个块的长度

返回值（Array）

返回一个拆分好的新数组

const arr = ['a', 'b', 'c', 'd']

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

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

lodash 中 chunk 用法

_.chunk(['a', 'b', 'c', 'd'], 2)
// => [['a', 'b'], ['c', 'd']]

_.chunk(['a', 'b', 'c', 'd'], 3)
// => [['a', 'b', 'c'], ['d']]

for 循环+ slice()实现

const arr = ['a', 'b', 'c', 'd']

function chunk(arr, size) {
  var result = []
  for (var i = 0, len = arr.length; i < len; i += size) {
    result.push(arr.slice(i, i + size))
  }
  return result
}

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

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

forEach()实现

const arr = ['a', 'b', 'c', 'd']
function chunk(arr, size) {
  const list = []
  let current = []
  arr.forEach(t => {
    current.push(t)
    if (current.length === size) {
      list.push(current)
      current = []
    }
  })
  if (current.length) {
    list.push(current)
  }
  return list
}
chunk(arr, 2)
// => [['a', 'b'], ['c', 'd']]

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

slice() + map() 实现

const arr = ['a', 'b', 'c', 'd']
function chunk(arr, size) {
  const result = Array.apply(null, {
    length: Math.ceil(arr.length / size),
  }).map((item, index) => {
    return arr.slice(index * size, (index + 1) * size)
  })
  return result
}

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

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

Array.apply() 是为了生成一个长度为 Math.ceil(data.length / groupByNum) 的数组作为 map() 的源，map() 不需要这个源的数据，只需要这个源每个数组的 index。

Math.ceil() 用于保证在除法计算有余数的时候对商 +1，即循环次数 +1。

然后在算得的循环次数中，通过 slice 返回每一段结果，通过 map() 映射出来，最终生成需要的结果。