JS中reduce搭配concat与仅用嵌套map的结果为何存在差异

原代码执行流程拆解 #

原代码是典型的求键盘相邻PIN组合的笛卡尔积实现，执行分三步：

• 字符串拆分：observed.split('')把输入的观测PIN拆成单个数字字符组成的数组，比如输入"456"得到['4','5','6']
• 候选集映射：通过写死的键盘相邻映射表，把每个数字替换成「自身+上下左右相邻数字」的候选数组，这一步输出是二维数组，比如输入"456"时这一步结果为[['1','4','5','7'], ['2','4','5','6','8'], ['3','5','6','9']]
• 笛卡尔积计算：通过reduce累计拼接所有位的候选值，最终得到所有可能的PIN组合。

删除concat后结果异常的根本原因 #

问题根源在reduce回调的返回值结构上，你以为删除concat只会让结果多一层嵌套，实际会因为数组隐式类型转换生成完全错乱的内容：

1. 原写法中[].concat.apply([], pre.map(t => cur.map(g => t + g)))的作用，是把每轮拼接生成的二维数组拍平成一维数组，保证下一轮reduce的累计值pre始终是一维字符串数组，每个元素都是已经拼好的前N位PIN字符串。

   举个例子，处理前两位数字时，pre.map(...)会生成[['12','14','15','16','18'], ['42','44',...], ...]这样的二维数组，concat执行后会拍平成['12','14','15',...'42','44',...]的一维数组，供下一轮和第三位候选拼接。

2. 如果删掉concat，直接返回pre.map(t => cur.map(g => t + g))，每轮reduce的输出嵌套深度会比输入多一层：
   • 第一轮处理前两位时，输出是二维数组，和你预期的一致
   • 第二轮处理第三位时，累计值pre已经是二维数组，遍历到的每个元素t本身是一个数组，不是字符串。这时候执行t + g的字符串拼接操作，JS会自动调用数组的toString()方法，把数组转成逗号分隔的字符串，比如t是['12','14','15','16','18']，和g='3'拼接后会得到"12,14,15,16,183"这种完全不符合预期的错乱字符串，根本不会生成你以为的三层嵌套数组结构。

错误写法复现示例 #

删除concat后的核心代码如下：

.reduce((pre, cur)=> pre.map(t => cur.map(g => t + g)))

执行getPINs('456')时，最终输出的元素全是带逗号的错误字符串，和预期的3位PIN组合完全不符，本质是嵌套数组在字符串拼接时的隐式转换导致的。

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