JavaScript嵌套数组扁平化问题：为何返回数组而非数组值？

嘿，我来帮你排查这个问题！你的递归思路方向是对的，但问题出在递归调用时的数组元素添加方式上。

问题根源 #

当你遇到嵌套数组时，用了res.push(flatten(arr[i]))——这里的flatten(arr[i])确实会返回一个已经扁平的数组，但push方法会把这个返回的数组作为单个元素塞进res里，而不是把数组里的元素逐个拆解添加。举个例子：处理[3, [4,5,[6]]]时，flatten会返回[3,4,5,6]，但push会把这个数组直接当成一个元素加到res，所以最终结果里才会出现Array(2)这类未拆解的嵌套项。

修复方案 #

只需要把“添加整个数组”改成“合并数组元素”，有两种常用的实现方式：

方式1：使用concat合并数组

concat方法会自动把传入的数组元素逐个合并到目标数组中，完美适配需求：

function flatten(arr) {
  var res = [];
  for (var i = 0; i < arr.length; i++) {
    if (toString.call(arr[i]) === "[object Array]") {
      res = res.concat(flatten(arr[i])); // 用concat替代push，合并递归返回的数组
    } else {
      res.push(arr[i]);
    }
  }
  return res;
}

方式2：使用扩展运算符展开数组（ES6+）

如果你的运行环境支持ES6语法，用扩展运算符可以让代码更直观，直接把递归返回的数组展开后再push：

function flatten(arr) {
  var res = [];
  for (var i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) { // 用Array.isArray判断数组更简洁易读
      res.push(...flatten(arr[i])); // 展开数组后逐个push元素
    } else {
      res.push(arr[i]);
    }
  }
  return res;
}

测试验证 #

现在运行修改后的代码：

console.log(flatten([1, 2, [3, [4, 5, [6]]], 7, 8]));

会输出完全扁平的一维数组：[1, 2, 3, 4, 5, 6, 7, 8]，完全符合你的预期。

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