数组的扁平化其实就是将一个嵌套多层的数组 array（嵌套可以是任何层数）转换为只有一层的数组。举个简单的例子，假设有个名为 flatten 的函数可以做到数组扁平化，效果如下面这段代码所示。其实就是把多维的数组“拍平”，输出最后的一维数组。那么你知道了效果是什么样的了，下面就尝试着写一个 flatten 函数吧。实现方式有下述几种。

image.png

普通的递归实现

Tasking

  • 通过循环遍历，一项一项的遍历
  • 如果每一项仍然是数组，则继续调用自身遍历
  • 最后返回一个扁平化数组的结果

    coding

    ```javascript const arr = [1, 2, 3, 5, [2, 4, 5], [[2, 3], 3]]; function _flat(array) { let result = []; if (Array.isArray(array)) {
    1.   for (const key in array) {
    2.       // concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
    3.       Array.isArray(array[key]) ? result = result.concat(_flat(array[key])) : result.push(array[key])
    4.   }
    } return result; }

console.log(_flat(arr)); // [1, 2, 3, 5, 2, 4, 5, 2, 3, 3]

  1. 从上面这段代码可以看出，最后返回的结果是扁平化的结果，这段代码核心就是循环遍历过程中的递归操作，就是在遍历过程中发现数组元素还是数组的时候进行递归操作，把数组的结果通过数组的 concat 方法拼接到最后要返回的 result 数组上，那么最后输出的结果就是扁平化后的数组。
  3. <a name="BuGzq"></a>
  4. ### 利用 reduce 函数迭代
  5. 从上面普通的递归函数中可以看出，其实就是对数组的每一项进行处理，那么我们其实也可以用第 7 讲中说的 reduce 来实现数组的拼接，从而简化第一种方法的代码，改造后的代码如下所示。
  6. <a name="5fCKe"></a>
  7. ##### [reduce](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)参数：
  8. > 首先是 callback（一个在数组的每一项中调用的函数，接受四个参数）：
  10. > previousValue（上一次调用回调函数时的返回值，或者初始值）
  12. > currentValue（当前正在处理的数组元素）
  14. > currentIndex（当前正在处理的数组元素下标）
  16. > array（调用 reduce() 方法的数组）
  18. > 然后是 initialValue（可选的初始值，作为第一次调用回调函数时传给 previousValue 的值）。
  20. <a name="iCnzv"></a>
  21. #### coding：
  22. ```javascript
  23. const arr = [1, 2, 3, 5, [2, 4, 5], [[2, 3], 3]];
  24. function flatten(arr) {
  25.       // 
  26.     return arr.reduce((prev, next) => {
  27.           return prev.concat(Array.isArray(next) ? flatten(next) : next)
  28.     }, [])
  29. }
  30. console.log('flatten:', flatten(arr)); // [1, 2, 3, 5, 2, 4, 5, 2, 3, 3]

这段代码在控制台执行之后，也可以得到想要的结果。这里你可以回忆一下之前说的 reduce 的参数问题，我们可以看到 reduce 的第一个参数用来返回最后累加的结果，思路和第一种递归方法是一样的，但是通过使用 reduce 之后代码变得更简洁了，也同样解决了扁平化的问题。

扩展运算符实现

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

Tasking:

  • 遍历
  • 使用some遍历数组，查看遍历元素是否还有数组，若有就遍历，没有就返回

    coding:

    1. let arr = [1, 2, 3, 5, [2, 4, 5], [[2, 3], 3]];
    2. function flatten(arr) {
    3.   while (arr.some(item => Array.isArray(item))) {
    4.       arr = [].concat(...arr);
    5.   }
    6.   return arr;
    7. }
    8. console.log(flatten(arr)); // [1, 2, 3, 5, 2, 4, 5, 2, 3, 3]
    从执行的结果中可以发现，我们先用数组的 some 方法把数组中仍然是组数的项过滤出来，然后执行 concat 操作，利用 ES6 的展开运算符，将其拼接到原数组中，最后返回原数组，达到了预期的效果。

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

那么除此之外，是否还有其他实现方式呢？请你接着往下看。

split 和 toString 共同处理

我们也可以通过 split 和 toString 两个方法，来共同实现数组扁平化，由于数组会默认带一个 toString 的方法，所以可以把数组直接转换成逗号分隔的字符串，然后再用 split 方法把字符串重新转换为数组，如下面的代码所示。

coding:

  1. let arr = [1, 2, 3, 5, [2, 4, 5], [[2, 3], 3]];
  2. function flatten(arr) {
  3.     return arr.toString().split(',');
  4. }
  5. console.log(faltten(arr)); // ["1", "2", "3", "5", "2", "4", "5", "2", "3", "3"];

通过这两个方法可以将多维数组直接转换成逗号连接的字符串，然后再重新分隔成数组，你可以在控制台执行一下查看结果。

下面我们看看 ES6 有什么方式可以直接实现数组的扁平化。

调用 ES6 中的 flat

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

coding

  1. arr.flat(depth)

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

coding

  1. let arr = [1, [2, [3, 4]]];
  2. function flatten(array) {
  3.         return array.flat(Infinity);
  4. }
  5. console.log(flatten(arr)); //  [1, 2, 3, 4，5]

可以看出，一个嵌套了两层的数组，通过将 flat 方法的参数设置为 Infinity，达到了我们预期的效果。其实同样也可以设置成 2，也能实现这样的效果。如果对数组的嵌套层数不确定的时候，最好直接使用 Infinity，可以达到扁平化。下面我们再来看最后一种场景。

正则和 JSON 方法共同处理

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

Tasking:

  • 先将传入的数据转为字符串
  • 通过正则表达式把括号过滤掉
  • 然后将字符串转为数组
  • 返回处理后的结果

    coding

    1. let arr = [1, [2, [3, [4, 5]]], 6];
    2. function flatten(arr) {
    3.   let str = JSON.stringify(arr);
    4.   str = str.replace(/([|])/g, '');
    5.   str = '[' + str + ']';
    6.   return JSON.parse(str);
    7. }
    8. console.log(flatten(arr)); // [1, 2, 3, 4, 5, 6]
    通过这个在线网站 https://regexper.com/ 可以把正则分析成容易理解的可视化的逻辑脑图。其中我们可以看到，匹配规则是：全局匹配（g）左括号或者右括号，将它们替换成空格，最后返回处理后的结果。之后拿着正则处理好的结果重新在外层包裹括号，最后通过 JSON.parse 转换成数组返回。