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

时间:2021-7-3 作者:qvyue

一 问题

1 数组的扁平化?

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

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

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

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

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

二 解法一览

1 解法一览(思维导图版)

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

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)整体的代码调用:
(前端)面试300问之(1)数组扁平化[6种方法]
整体的代码调用.png
2)整体的执行结果:
(前端)面试300问之(1)数组扁平化[6种方法]
整体的执行结果.png

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 以进行最新资料的获取):
(前端)面试300问之(1)数组扁平化[6种方法]
个人技术笔记(350+算法题解、前端重点面经汇总、图解HTTP等).png
(前端)面试300问之(1)数组扁平化[6种方法]
理财书籍pdf.png
(前端)面试300问之(1)数组扁平化[6种方法]
技术书籍pdf.png
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。