JavaScript 数组拆分块

在 JavaScript 开发中，对于一个数组需要按照一定规则或者数量进行拆分时，我们可以使用 JavaScript 数组拆分块来实现。

实现方式

方法一：for循环实现

代码如下：

/**
* 将一个数组拆分为指定长度的小数组
* @param {Array} arr 需要拆分的数组
* @param {number} size 指定的拆分长度
* @returns {Array} 返回拆分后的数组
*/
function chunk(arr, size) {
  let result = []
  for (let i = 0, len = arr.length; i < len; i += size) {
    result.push(arr.slice(i, i + size))
  }
  return result
}

使用方法：

let arr = [1, 2, 3, 4, 5, 6, 7, 8]
let size = 3
chunk(arr, size) // [[1, 2, 3], [4, 5, 6], [7, 8]]

方法二：reduce实现

代码如下：

/**
* 将一个数组拆分为指定长度的小数组
* @param {Array} arr 需要拆分的数组
* @param {number} size 指定的拆分长度
* @returns {Array} 返回拆分后的数组
*/
function chunk(arr, size) {
  return arr.reduce((prev, cur, index) => {
    (index % size === 0) ? prev.push([cur]) : prev[prev.length - 1].push(cur);
    return prev;
  }, []);
}

使用方法：

let arr = [1, 2, 3, 4, 5, 6, 7, 8]
let size = 3
chunk(arr, size) // [[1, 2, 3], [4, 5, 6], [7, 8]]

性能比较

方法一：for循环实现的性能优于方法二：reduce实现，因为 for 循环的效率更高。

总结

通过 JavaScript 数组拆分块，我们可以简单方便地把一个数组切割成指定长度的小数组，减少了代码量和复杂度。虽然两种实现方式不同，但是目的和效果相同，任选一种根据自己的需求使用即可。