一 问题
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)整体的代码调用:
整体的代码调用.png
2)整体的执行结果:
整体的执行结果.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 以进行最新资料的获取):
个人技术笔记(350+算法题解、前端重点面经汇总、图解HTTP等).png
理财书籍pdf.png
技术书籍pdf.png