javascript - JavaScript 中多个数组的笛卡尔积

Question

如何在 JavaScript 中实现多个数组的笛卡尔积？

举个例子，

cartesian([1, 2], [10, 20], [100, 200, 300]) 

应该返回

[
  [1, 10, 100],
  [1, 10, 200],
  [1, 10, 300],
  [2, 10, 100],
  [2, 10, 200]
  ...
]

Answer 1

2020 年更新:使用 vanilla JS 的 1 行 (!) 答案

2017 年原始答案:使用 vanilla JS 的两行答案: (请参阅下面的更新)

这里的所有答案都过于复杂，其中大部分需要 20 行代码甚至更多。

此示例仅使用两行原始 JavaScript，没有 lodash、下划线或其他库:

let f = (a, b) => [].concat(...a.map(a => b.map(b => [].concat(a, b))));
let cartesian = (a, b, ...c) => b ? cartesian(f(a, b), ...c) : a;

更新:

这与上面相同，但改进为严格遵循 Airbnb JavaScript Style Guide - 使用 ESLint 验证与 eslint-config-airbnb-base :

const f = (a, b) => [].concat(...a.map(d => b.map(e => [].concat(d, e))));
const cartesian = (a, b, ...c) => (b ? cartesian(f(a, b), ...c) : a);

特别感谢 ZuBB 让我知道原始代码的 linter 问题。

2020 年更新:

自从我写了这个答案后，我们得到了更好的内置函数，它最终可以让我们将代码减少(没有双关语意)到只有 1 行!

const cartesian =
  (...a) => a.reduce((a, b) => a.flatMap(d => b.map(e => [d, e].flat())));

特别感谢 inker 建议使用 reduce。

特别感谢 Bergi 建议使用新添加的 flatMap。

特别感谢 ECMAScript 2019 用于向语言添加平面和平面 map !

例子

这是您问题中的确切示例:

let output = cartesian([1,2],[10,20],[100,200,300]);

输出

这是该命令的输出:

[ [ 1, 10, 100 ],
  [ 1, 10, 200 ],
  [ 1, 10, 300 ],
  [ 1, 20, 100 ],
  [ 1, 20, 200 ],
  [ 1, 20, 300 ],
  [ 2, 10, 100 ],
  [ 2, 10, 200 ],
  [ 2, 10, 300 ],
  [ 2, 20, 100 ],
  [ 2, 20, 200 ],
  [ 2, 20, 300 ] ]

演示

查看演示:

• > JS Bin with Babel (对于旧浏览器)
• > JS Bin without Babel (对于现代浏览器)

语法

我在这里使用的语法并不新鲜。 我的示例使用扩展运算符和其余参数 - JavaScript 的功能在 2015 年 6 月发布的第 6 版 ECMA-262 标准中定义并且开发得更早，更广为人知的名称是 ES6 或 ES2015。见:

• > http://www.ecma-international.org/ecma-262/6.0/
• > https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/rest_parameters
• > https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator

ES2019 中添加了 Update 2020 示例中的新方法:

• > http://www.ecma-international.org/ecma-262/10.0/
• > https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
• > https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

它使这样的代码变得如此简单以至于不使用它是一种罪过。对于 native 不支持它的旧平台，您始终可以使用 Babel 或其他工具将其转换为旧语法——事实上，我用 Babel 转换的示例仍然比这里的大多数示例更短、更简单，但它不是真的很重要，因为转译的输出不是您需要理解或维护的东西，它只是我觉得有趣的事实。

结论

无需编写数百行难以维护的代码，也无需为如此简单的事情使用整个库，只要两行原生 JavaScript 即可轻松完成工作。如您所见，使用该语言的现代功能确实值得 或其他工具将新语法转换为旧语法。

不要像 1995 年那样编写代码

JavaScript 的发展是有原因的。 TC39 通过添加新功能在语言设计方面做得非常出色，而浏览器 vendor 在实现这些功能方面做得非常出色。

要查看浏览器中任何给定功能的 native 支持的当前状态，请参阅:

• > http://caniuse.com/
• > https://kangax.github.io/compat-table/

要查看 Node 版本的支持，请参阅:

• > http://node.green/

要在 native 不支持它的平台上使用现代语法，请使用 Babel 或 TypeScript:

• > https://babeljs.io/
• > https://www.typescriptlang.org/