JavaScript 如何递归拼接数组生成所有元素的组合结果

方案1：双层for循环（性能最优） #

适合数组长度大、对性能要求高的场景，没有额外函数调用开销，是所有实现里执行效率最高的：

var array1 = ['steve', 'mike'];
var array2 = ['2020', '2019', '2018'];
var result = [];
for (let i = 0; i < array1.length; i++) {
  const item1 = array1[i];
  for (let j = 0; j < array2.length; j++) {
    result.push(item1 + array2[j]);
  }
}
// result 即为目标数组

方案2：flatMap 写法（最简洁易读） #

适合日常开发、数组长度不大的场景，代码量少可读性强，性能和for循环的差异在单个数组长度小于1000的场景下几乎可以忽略：

// ES2019+ 支持flatMap，直接一行实现
const result = array1.flatMap(item1 => array2.map(item2 => item1 + item2));

// 兼容旧环境可以换成 map + flat 组合
const result = array1.map(item1 => array2.map(item2 => item1 + item2)).flat(1);

递归实现（仅适用于多数组扩展场景） #

你当前只有两个数组的场景完全不需要用递归，递归仅适合需要支持任意数量数组动态生成笛卡尔积拼接的场景，通用实现如下：

function cartesianConcat(arrays) {
  // 递归终止条件
  if (arrays.length <= 1) return arrays[0] || [];
  const firstArr = arrays[0];
  const restResult = cartesianConcat(arrays.slice(1));
  // 拼接当前层和剩余层的结果
  return firstArr.flatMap(prefix => restResult.map(suffix => prefix + suffix));
}

// 调用示例，支持传入任意数量数组
const result = cartesianConcat([array1, array2]);

选型建议 #

• 固定2个数组场景优先选前两种方案：追求性能用for循环，追求简洁用flatMap
• 只有需要动态支持N个数组拼接时再考虑递归，两个数组用递归属于过度设计，反而会增加额外的递归调用开销和代码理解成本

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