JavaScript数组按索引合并问题：实际输出与预期不符

需求与输入示例 #

我有一个外层数组，需要将同索引位置的子数组合并，例如索引0处最终应变为['0','0','1','2']。

示例输入数组结构：

0:
    0: (2) ['0', '0']
    1: (2) ['0', '0']
    2: (2) ['0', '2']
1:  
    0: ['1']
    1: ['2']
    2: ['2']
2:  
    0: ['2']
    1: ['2']
    2: ['2']

尝试的代码与错误结果 #

我尝试了以下代码：

var result = outterArray.reduce(function (a, b) {
        return a.map(function (v, i) {
            return [v] + b[i];
        });
      });

得到的错误结果：

0: "0,012"
1: "0,022"
2: "0,222"

期望结果 #

0: ["0","0","1","2"]
1: ["0","0","2","2"]
2: ["0","2","2","2"]

问题分析与解决方法 #

错误原因 #

代码中[v] + b[i]的写法会触发数组的隐式类型转换：数组会被转为字符串后再拼接，比如['0','0'] + ['1']会变成"0,01"，最终得到的是拼接后的字符串而非合并后的数组。

正确实现 #

要合并数组，需使用数组的合并方法，以下两种方式都可以：

方法1：使用concat方法

var result = outterArray.reduce(function(a, b) {
  return a.map(function(v, i) {
    return v.concat(b[i]);
  });
});

方法2：使用ES6扩展运算符（更简洁）

const result = outterArray.reduce((a, b) => 
  a.map((v, i) => [...v, ...b[i]])
);

转为目标字符串格式 #

如果需要将最终数组转为带方括号的字符串格式，可在结果后再处理：

const stringResult = result.map(arr => JSON.stringify(arr));

执行后得到的结果就是：

0: "[0,0,1,2]"
1: "[0,0,2,2]"
2: "[0,2,2,2]"

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