（前端）面试300问之（1）数组扁平化[6种方法]

一 问题

1 数组的扁平化？

1）就是将一个n层数组、即n维数组（n>=1）转换为只有一层的数组。

如数组 arr = [1, [2, [3, 4]]];

经过我们 myFlatten 函数的处理后、

即调用 myFlatten(arr) 应该得到 [1, 2, 3, 4] 。

【注：以下内容均假定 arr = [1, [2, [3, 4]]] 】。

 

二 解法一览

1 解法一览（思维导图版）

 

2 解法一览（文字版）

1）数组自带的方法 —— flat

2）递归

3）结合 reduce函数

4）(toString && split) 或 (join && split)

5）扩展运算符 —— …

6）generator

 

三 具体解法与代码

1 数组自带的方法 —— flat

1）其可以传入一个参数，表示要 展开的层数 。

arr.flat();
// 默认展开1层，即与 arr.flat(1) 一样，均得到 [1, [2, [3, 4]]]
arr.flat(Infinity);
// “无限层”展开，得到 [1, 2, 3, 4]

2 递归

1）这是大部分人比较常用的实现方法。

function myFlatten(arr) {
  // 先定义一个 保存结果的 数组
  var res_arr = [];
  // 对原先的数组进行 map遍历，
  // 根据当前元素是数组还是“单个元素”去走向不同的分支
  arr.map(item => {
    if(Array.isArray(item)){
      // 当前元素为数组，继续调用 myFlatten ，
      // myFlatten返回的是数组形式，所以需要使用 concat
      res_arr = res_arr.concat(myFlatten(item));
    }else{
      // 当前元素为“单个元素”，直接 push 塞到结果数组
      res_arr.push(item);
     }
  });
  // 返回 “当前处理的结果数组”
  return res_arr;
}

3 结合 reduce函数

1）遍历数组每一项，若值为数组则继续递归遍历，否则直接 concat 【这个和方案2的递归基本是类似的！】。

function myFlatten(arr) {
    return arr.reduce((res_arr, cur_item) => {
        return res_arr.concat(
            // 核心：若为数组、继续遍历
            Array.isArray(cur_item)
            ? myFlatten(cur_item)
            : cur_item
        );
    }, []);
}

4 (toString && split) 或 (join && split)

2种方案

// 1）
// 调用数组的toString方法，将数组变为字符串
// 然后再用split分割还原为数组
function flatten(arr) {
  // 这里的 arr.toString() 会直接得到 '1,2,3,4' 这样的字符串
  return arr.toString().split(',').map(function(item) {
    // return Number(item);
    return item;
  })
}

// 2）
// 和上面的toString一样，join也可以将数组转换为字符串
function flatten(arr) {
  // arr.join(',) 得到的也是 '1,2,3,4' 这样的字符串
  return arr.join(',').split(',').map(function(item) {
    // return parseInt(item);
    return item;
  })
}

5 扩展运算符

1）es6的扩展运算符能将二维数组变为一维，如：[].concat(…[1, 2, 3, [4, 5]]); // [1, 2, 3, 4, 5]。利用这个特性，我们可以做一个遍历，当 arr 中含有数组则使用一次扩展运算符，直到没有为止。

function flatten(arr) {
  // 核心：只要 arr数组中含有非一维的 子项，就继续 扩展！！
  while(arr.some(item=>Array.isArray(item))) {
    arr = [].concat(...arr);
  }
  return arr;
}

6 generator

1）如下代码

function* flatten(array) {
  for (const item of array) {
    if (Array.isArray(item)) {
      yield* flatten(item);
    } else {
      yield item;
    }
  }
}
[...flatten(arr)]; // [1, 2, 3, 4]

或者这么调用【因为 generator函数“会自动实现 Iterator、遍历接口”，
使得我们可以使用 for ... of ... ，
别写成了 for ... in ... 。】
let res_arr = [];
for(const item of flatten(arr)) {
  res_arr.push(item);
}

四 总结 & tips

1 虽然说写了5种方法，但是核心也只有一个：遍历数组arr，若arr[i]为数组则递归遍历，直至arr[i]不为数组然后与之前的结果concat。

2 各个方法之间的对比

1）整体的代码调用：

2）整体的执行结果：

3 总结

1)整体来说这6种的运行结果都基本一样，至于性能、可读性来说,本文没有做过多的尝试，欢迎热心的小伙伴去尝试下并留言给 “三少” ～

4 tips

1）若面试中遇到这个题目了，大家可以先假装思索【该过程中顺便把以上的6种方法在脑子过一遍】，然后将自己记得比较深、较接近最优解的 讲 或 写 给面试官即可。若太快回答，会给面试官一种你背题等不好的印象，且太快回答肯能也会因为自己表达的不充分而失分哦～

2）二叉树的主要遍历方式无法就2种 —— 深度遍历（DFS） 和 广度遍历（BFS），我们的学习方式也一样，若我们对以上6种方法都有了解过【广度】且 还能顺畅地说、写出里面的 2-3种方法【深度】，那么面试官会对我们刮目相看的（因为这程度基本可以秒掉其他大部分人了）。

五 更多

1）本人是20届本科生，大厂、创业公司都待过，现在是BAT的1名前端工程师(目前正往“全栈”方向发展，已开始写公司里的部分后端代码~)。

2）以下是个人整理的一些笔记和书籍（永久有效链接: https://pan.baidu.com/s/1SPc3umO6cZlBtoPylSaHzw 密码: eqee ，若失效的话可以到vx公众号 “码农三少” 回复 pdf 以进行最新资料的获取）：