实现数组扁平化的6种方法

---

扁平化的实现

数组的扁平化其实就是将一个嵌套多层的数组 array（嵌套可以是任何层数）转换为只有一层的数组。举个简单的例子，假设有个名为 flatten的函数可以做到数组扁平化，效果如下面这段代码所示。

var arr = [1, [2, [3, 4，5]]];
console.log(flatten(arr)); // [1, 2, 3, 4，5]

其实就是把多维的数组“拍平”，输出最后的一维数组。

方法一：普通的递归实现

普通的递归思路很容易理解，就是通过循环递归的方式，一项一项地去遍历，如果每一项还是一个数组，那么就继续往下遍历，利用递归程序的方法，来实现数组的每一项的连接。我们来看下这个方法是如何实现的，如下所示。

  const a = [1, [2, [3, [4, 5]]]];
  const flatten = (arr) => {
    let result = [];
    for (let i = 0; i < arr.length; i++) {
      if (Array.isArray(arr[i])) {
        result = result.concat(flatten(arr[i]));
      } else {
        result.push(arr[i]);
      }
    }
    return result;
  };
  console.log(flatten(a));

从上面这段代码可以看出，最后返回的结果是扁平化的结果，这段代码核心就是循环遍历过程中的递归操作，就是在遍历过程中发现数组元素还是数组的时候进行递归操作，把数组的结果通过数组的 concat方法拼接到最后要返回的 result数组上，那么最后输出的结果就是扁平化后的数组。

方法二：利用 reduce 函数迭代

从上面普通的递归函数中可以看出，其实就是对数组的每一项进行处理，那么我们其实也可以用帮你梳理眼花缭乱的数组 API中说的 reduce来实现数组的拼接，从而简化第一种方法的代码，改造后的代码如下所示。

  const flatten = (arr) => {
    return arr.reduce((prev,next)=>{
      return prev.concat(Array.isArray(next)?flatten(next):next)
    },[]);
  };
  console.log(flatten(a));

方法三：扩展运算符实现

这个方法的实现，采用了扩展运算符和 some的方法，两者共同使用，达到数组扁平化的目的，还是来看一下代码。

  const flatten = (arr) => {
    while(arr.some(item=>Array.isArray(item))){
      arr = [].concat(...arr);
    }
    return arr;
  };
  console.log(flatten(a));

从执行的结果中可以发现，我们先用数组的 some方法把数组中仍然是组数的项过滤出来，然后执行 concat操作，利用 ES6的展开运算符，将其拼接到原数组中，最后返回原数组，达到了预期的效果。

前三种实现数组扁平化的方式其实是最基本的思路，都是通过最普通递归思路衍生的方法，尤其是前两种实现方法比较类似。值得注意的是 reduce方法，它可以在很多应用场景中实现，由于 reduce这个方法提供的几个参数比较灵活，能解决很多问题，所以是值得熟练使用并且精通的。

方法四：split 和 toString 共同处理

  const flatten = (arr) => {
    return arr.toString().split(',')
  };
  console.log(flatten(a));

通过这两个方法可以将多维数组直接转换成逗号连接的字符串，然后再重新分隔成数组

方法五：调用 ES6 中的 flat

我们还可以直接调用 ES6 中的 flat方法，可以直接实现数组扁平化。先来看下 flat 方法的语法：

arr.flat([depth])

其中 depth是 flat的参数，depth是可以传递数组的展开深度（默认不填、数值是 1），即展开一层数组。那么如果多层的该怎么处理呢？参数也可以传进 Infinity，代表不论多少层都要展开。那么我们来看下，用 flat方法怎么实现，请看下面的代码。

  const a = [1, [2, [3, [4, 5]]]];
  const flatten = (arr) => {
    return arr.flat(Infinity)
  };
  console.log(flatten(a));

可以看出，一个嵌套了两层的数组，通过将 flat方法的参数设置为 Infinity，达到了我们预期的效果。其实同样也可以设置成 3，也能实现这样的效果。

因此，在编程过程中，发现对数组的嵌套层数不确定的时候，最好直接使用 Infinity，可以达到扁平化.

方法六：正则和 JSON 方法共同处理

在第四种方法中已经尝试了用 toString方法，其中仍然采用了将 JSON.stringify 的方法先转换为字符串，然后通过正则表达式过滤掉字符串中的数组的方括号，最后再利用 JSON.parse 把它转换成数组。请看下面的代码。

  const flatten = (arr) => {
    let str = JSON.stringify(arr);
    str = str.replace(/(\[|\])/g,'');
    str = `[${str}]`;
    return JSON.parse(str);
  };
  console.log(flatten(a));

可以看到，其中先把传入的数组转换成字符串，然后通过正则表达式的方式把括号过滤掉

总结

数组扁平化这节课的知识点结合了数组 API、ES6，以及 JSON方法的相关知识。可以通过下面的表格再来看一下这六种方式的代码思路。

方法/问题	实现难度	编码思路
递归实现	易	递归实现，返回新数组
reduce实现	中	reduce进行累加操作
扩展运算符实现	中	筛选出数组项进行连接
split和toString	易	转成字符串再转数组
flat方法	易	特定功能方法直接操作
正则和JSON方法	易	JSON方法转成字符串转回过程中正则处理

文章转载于：http://t.csdn.cn/nrI2y