使用lodash _.chunk分割数组时如何给长度不足的最后子块补空字符串

基于lodash _.chunk的实现 #

你可以在调用_.chunk完成分块后，单独给最后一块补位空字符串即可，代码如下：

import _ from 'lodash';

/**
 * 数组分块+末尾补位
 * @param {Array} arr 待分块的原始数组
 * @param {Number} chunkSize 每块的长度，默认3
 * @param {Any} padVal 补位值，默认空字符串
 * @returns {Array} 分块完成的数组
 */
const chunkWithPad = (arr, chunkSize = 3, padVal = '') => {
  const chunks = _.chunk(arr, chunkSize);
  const lastChunk = chunks[chunks.length - 1];
  const needPadLength = chunkSize - lastChunk.length;
  if (needPadLength > 0) {
    lastChunk.push(...new Array(needPadLength).fill(padVal));
  }
  return chunks;
}

// 测试用例
const arr1 = [{elem1: 1}, {elem2: 2}, {elem3: 3}, {elem4: 4}];
console.log(chunkWithPad(arr1));
// 输出：[[{elem1:1}, {elem2:2}, {elem3:3}], [{elem4:4}, '', '']]

原生JS实现（无需依赖lodash） #

如果你不想引入外部依赖，也可以先给原数组补位到长度为3的整数倍，再统一分块：

const chunkWithPadNative = (arr, chunkSize = 3, padVal = '') => {
  // 计算总补位长度，模chunkSize处理刚好整除的情况
  const totalPadLength = (chunkSize - arr.length % chunkSize) % chunkSize;
  const paddedArr = [...arr, ...new Array(totalPadLength).fill(padVal)];
  const result = [];
  for (let i = 0; i < paddedArr.length; i += chunkSize) {
    result.push(paddedArr.slice(i, i + chunkSize));
  }
  return result;
}

// 测试用例
const arr1 = [{elem1: 1}, {elem2: 2}, {elem3: 3}, {elem4: 4}];
console.log(chunkWithPadNative(arr1));
// 输出：[[{elem1:1}, {elem2:2}, {elem3:3}], [{elem4:4}, '', '']]

两种方案都支持自定义分块长度和补位值，你可以根据自己的技术栈选择使用。

内容的提问来源于stack exchange，提问作者Eternal Sunshine