请求解析JavaScript中嵌套.reduce()生成向量全排列的作用

嘿，我来帮你把这段代码里两个嵌套reduce()的作用掰扯清楚，其实它们就是配合着帮你生成多组元素的所有可能排列组合，咱们一步步拆解：

先看你的原代码：

var arr = [['red','blue','pink'],['dog','cat','bird'],['loud', 'quiet']],
    res = arr.reduce((p,c) => p.reduce((r,x) => r.concat(c.map(y => x + " " + y)),[]));
console.log(res);

1. 外层的reduce()：负责“累积组合的基础” #

外层reduce()的核心是按顺序遍历原数组的每一组子元素，把前一次生成的组合结果，作为下一次组合的“基础集合”。

因为你没给外层reduce()指定初始值，所以它的第一次迭代会默认把原数组的第一个子数组['red','blue','pink']作为初始的p（累积值），然后依次处理后面的子数组：

• 第一次迭代：p = 第一组['red','blue','pink']，c = 第二组['dog','cat','bird']
• 第二次迭代：p = 第一组和第二组的所有组合（比如['red dog', 'red cat', ..., 'pink bird']），c = 第三组['loud', 'quiet']

简单说，外层reduce()就是帮你把组合的范围一步步扩大，从“单一组元素”→“两组元素的组合”→“三组元素的组合”。

2. 内层的reduce()：负责“生成新的组合并收集” #

内层reduce()的作用是把当前的基础集合（p）里的每一个元素，和当前组（c）的每一个元素进行拼接，然后把所有新组合收集到一个数组里。

拿第一次外层迭代的内层reduce()举例：

• 内层reduce()的初始值是[]（也就是r的初始值）
• 遍历p里的每一个x（依次是'red'、'blue'、'pink'）：
  • 对每个x，用c.map(y => x + " " + y)生成x和c中每个元素的拼接结果，比如x='red'时会得到['red dog', 'red cat', 'red bird']
  • 用r.concat(...)把这个新数组合并到r里，r就会一步步从[]变成包含所有两组组合的数组

第二次外层迭代时，内层reduce()会用同样的逻辑：把9个两组组合的元素，分别和第三组的'loud'、'quiet'拼接，最终生成18个三组组合的结果，也就是你最终看到的res。

一句话总结 #

• 外层reduce()：像是“总管”，负责把每一轮的组合结果传递下去，逐步累积组合的层级
• 内层reduce()：像是“操作工”，负责把当前层级的所有元素和新组元素一一配对，生成更完整的组合

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