如何使用现代数组方法将含空元素的一维数组转为二维数组

需求：将一维数组中的空元素作为分隔符，把非空元素分组为子数组，最终得到二维数组。

示例输入数组：

const list = ["1", "2", "3", "", "4", "5", "6", "", "7", "8", "9", ""];

原Vanilla JavaScript实现（for循环版本）：

let tmp_list = [];
const result_array = [];
for(let i=0; i<list.length; i++) {
    if(list[i].length > 0) {
      tmp_list.push(list[i]);
    } else {
      result_array.push(tmp_list);
      tmp_list = [];
    }
}
// 注：原实现会在末尾空元素时推入空数组，需额外处理

预期输出：

const result_array = [["1", "2", "3"], ["4", "5", "6"], ["7", "8", "9"]];

方案1：使用Array.prototype.reduce()（推荐，通用性强） #

reduce是处理数组累积操作的现代方法，能直接构建目标二维数组，同时处理末尾空元素的问题：

const list = ["1", "2", "3", "", "4", "5", "6", "", "7", "8", "9", ""];

const finalResult = list.reduce((acc, current) => {
  // 非空元素添加到当前最后一个子数组
  if (current) {
    acc[acc.length - 1].push(current);
  } else {
    // 遇到空元素时，仅当当前最后一个子数组不为空，才新增空数组准备接收下一组
    if (acc[acc.length - 1].length > 0) {
      acc.push([]);
    }
  }
  return acc;
}, [[]]) // 初始值设为包含一个空数组的数组，确保第一个元素有地方存放
// 过滤掉可能存在的空数组（比如原数组末尾空元素导致的）
.filter(subArr => subArr.length > 0);

console.log(finalResult); // 输出符合预期的二维数组

逻辑说明： #

• 累积器acc初始为[[]]，保证第一个非空元素能直接加入子数组
• 遍历每个元素：非空则追加到acc的最后一个子数组；空元素则检查当前子数组是否有内容，有则新增空数组
• 最后用filter移除可能的空数组，避免原数组末尾空元素带来的无效子数组

方案2：使用join+split（适合元素无特殊字符的场景） #

如果确定数组元素不会包含特定分隔符（比如|），可以用字符串转换的方式快速实现：

const list = ["1", "2", "3", "", "4", "5", "6", "", "7", "8", "9", ""];

const finalResult = list.join('|')
  .split('||') // 两个连续的|对应原数组中的空元素分隔符
  .filter(str => str) // 过滤末尾空字符串
  .map(str => str.split('|')); // 将每个分组字符串转回数组

console.log(finalResult); // 输出符合预期的二维数组

注意事项： #

• 必须选择一个不会出现在数组元素中的字符作为临时分隔符，否则会导致分组错误
• 此方法本质是通过字符串中转实现，性能略低于reduce，但代码更简洁

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