JavaScript 多维数组拍平为一维数组的两种实现方法

引言与问题背景

在开发过程中，我们时常会遇到一些共性需求，例如将二维或多维数组转换为单一的一维数组。面对这类问题，如果每次都重新思考解决方案，效率较低。因此，将这些场景提炼出来进行总结，有助于提升开发效率。

接下来，本文将演示两种将多维数组拍平为一维数组的方法，旨在抛砖引玉。读者若有更优的实现方案，欢迎在评论区分享交流。

方法一：递归实现

首先介绍第一种方法：通过递归处理数组，具体代码实现如下。

var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]],
 [333, 4444]
];
function product() {
 // 1、创建一个空数组,
 var newarr = [];
 ///2、并且返回一个函数,函数参数为要拍平的数组
 return function flatten(arr) {
  // 3、循环数组，判断每一项,不为输的话将其塞入newarr
  // 若为数组,递归调用 faltten,并将结果与newarr合并
  for (var t of arr) {
   if (!Array.isArray(t)) {
    newarr.push(t);
   } else {
    newarr.concat(flatten(t))
   }
  }
  return newarr
 }
}
var flatten = product();
console.log(flatten(arr))

运行上述代码后的结果如下。

上述方法逻辑较为常规，代码细节已添加注释说明。下面介绍另一种利用 JavaScript 新特性的实现方式，代码如下。

var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]],
 [333, 4444]
];
function flatten(arr){
 return arr.reduce(function(pre,cur){
  if(!Array.isArray(cur)){
   return [...pre,cur];
  }else{
   return [...pre,...flatten(cur)]
  }
 },[])
}
console.log(flatten(arr))

该代码示例中使用了 ES6 的扩展运算符“...”。例如 “[...abc,...fff]”的作用等同于 abc.concat(fff)，这种写法更加直观清晰。此外，该方法还结合了 reduce 函数，这是 JavaScript 数组对象提供的一个内置方法。

调用数组的 reduce 方法时，可传递两个参数：第一个是回调函数，第二个是可选的初始值。回调函数接收两个参数：第一个是每次执行回调后的返回值，第二个是当前遍历到的数组元素。若省略初始值，回调函数首次执行时，前两个参数分别为数组的第一项和第二项；若提供初始值，则第一次执行时第一个参数为初始值。在本文示例中，reduce 的第二个参数被设置为空数组。

总结与参考

关于 reduce 方法的详细文档，可参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

综合来看，第一种方法更易于理解，而第二种方法的难点在于对 reduce 函数及其工作原理的深入掌握与灵活运用。