从多个数组 JavaScript 生成值的组合

在 JavaScript 中生成多个数组的组合通常称为“笛卡尔积”。这种技术常常用于处理所有可能的组合或排列，或者在解决问题时构建思维模型。

使用循环生成笛卡尔积

最简单的方法是使用嵌套循环生成笛卡尔积。它可以处理任意数量的数组，但是代码会随着数组数量的增加而变得越来越难读。

let arrays = [
  ["red", "blue", "green"],
  ["small", "medium", "large"],
  ["circle", "square", "triangle"]
];

let combinations = [];

for (let i = 0; i < arrays[0].length; i++) {
  for (let j = 0; j < arrays[1].length; j++) {
    for (let k = 0; k < arrays[2].length; k++) {
      combinations.push([arrays[0][i], arrays[1][j], arrays[2][k]]);
    }
  }
}

console.log(combinations); // Output: [["red", "small", "circle"], ...]

使用 reduce 及其友好的 API

一种更简洁，优雅的方法是使用 reduce 函数，配合 flatMap 和 map 方法。使用这种方法可轻松处理任意数量的数组。

let arrays = [
  ["red", "blue", "green"],
  ["small", "medium", "large"],
  ["circle", "square", "triangle"]
];

const cartesianReducer = (acc, val) =>
  acc.flatMap((el) => val.map((v) => el.concat(v)));

let combinations = arrays.reduce(cartesianReducer, [[]]);

console.log(combinations); // Output: [["red", "small", "circle"], ...]

这种方法的优点是，在每次迭代中都迭代了所有已知组合，将它们与当前数组的每个值组合起来，生成新的组合。

使用分治的方法

另一种成熟的方法是使用分治（分而治之）方法。在这种方法中，将数组拆分为两个子数组，然后递归地在这两个子数组上应用笛卡尔积函数。然后，将两个结果合并为一个。

const cartesianRecursion = (a, b) =>
  a.flatMap((x) => b.map((y) => [x, y].flat()));

let arrays = [
  ["red", "blue", "green"],
  ["small", "medium", "large"],
  ["circle", "square", "triangle"]
];

let combinations = arrays.reduce(
  (acc, val) => cartesianRecursion(acc, val),
  [[]]
);

console.log(combinations); // Output: [["red", "small", "circle"], ...]

这种方法的优点是，它可以递归地拆分数组，以避免每次迭代都手动编写嵌套循环。这使得代码变得更简洁，而且更容易阅读。

无论您选择哪种方法，这些方法都是生成笛卡尔积的有效方法。但是，使用 reduce 配合 flatMap 和 map 方法构成的方法是最流行的，因为它既简洁又灵活。