一 問題
1 數(shù)組的扁平化盖喷？
1）就是將一個(gè)n層數(shù)組惩激、即n維數(shù)組（n>=1）轉(zhuǎn)換為只有一層的數(shù)組。
如數(shù)組 arr = [1, [2, [3, 4]]];
經(jīng)過我們 myFlatten 函數(shù)的處理后祟剔、
即調(diào)用 myFlatten(arr) 應(yīng)該得到 [1, 2, 3, 4] 于宙。
【注：以下內(nèi)容均假定 arr = [1, [2, [3, 4]]] 】扛稽。
二 解法一覽
1 解法一覽（思維導(dǎo)圖版）
2 解法一覽（文字版）
1）數(shù)組自帶的方法 —— flat
2）遞歸
3）結(jié)合 reduce函數(shù)
4）(toString && split) 或 (join && split)
5）擴(kuò)展運(yùn)算符 —— …
6）generator
三 具體解法與代碼
1 數(shù)組自帶的方法 —— flat
1）其可以傳入一個(gè)參數(shù)吁峻，表示要 展開的層數(shù) 。
arr.flat();
// 默認(rèn)展開1層在张，即與 arr.flat(1) 一樣用含，均得到 [1, [2, [3, 4]]]
arr.flat(Infinity);
// “無限層”展開，得到 [1, 2, 3, 4]
2 遞歸
1）這是大部分人比較常用的實(shí)現(xiàn)方法帮匾。
function myFlatten(arr) {
// 先定義一個(gè) 保存結(jié)果的 數(shù)組
var res_arr = [];
// 對(duì)原先的數(shù)組進(jìn)行 map遍歷啄骇，
// 根據(jù)當(dāng)前元素是數(shù)組還是“單個(gè)元素”去走向不同的分支
arr.map(item => {
if(Array.isArray(item)){
// 當(dāng)前元素為數(shù)組，繼續(xù)調(diào)用 myFlatten 瘟斜，
// myFlatten返回的是數(shù)組形式缸夹，所以需要使用 concat
res_arr = res_arr.concat(myFlatten(item));
}else{
// 當(dāng)前元素為“單個(gè)元素”，直接 push 塞到結(jié)果數(shù)組
res_arr.push(item);
}
});
// 返回 “當(dāng)前處理的結(jié)果數(shù)組”
return res_arr;
}
3 結(jié)合 reduce函數(shù)
1）遍歷數(shù)組每一項(xiàng)螺句，若值為數(shù)組則繼續(xù)遞歸遍歷虽惭，否則直接 concat 【這個(gè)和方案2的遞歸基本是類似的！】蛇尚。
function myFlatten(arr) {
return arr.reduce((res_arr, cur_item) => {
return res_arr.concat(
// 核心：若為數(shù)組芽唇、繼續(xù)遍歷
Array.isArray(cur_item)
? myFlatten(cur_item)
: cur_item
);
}, []);
}
4 (toString && split) 或 (join && split)
2種方案
// 1）
// 調(diào)用數(shù)組的toString方法，將數(shù)組變?yōu)樽址?// 然后再用split分割還原為數(shù)組
function flatten(arr) {
// 這里的 arr.toString() 會(huì)直接得到 '1,2,3,4' 這樣的字符串
return arr.toString().split(',').map(function(item) {
// return Number(item);
return item;
})
}
// 2）
// 和上面的toString一樣取劫，join也可以將數(shù)組轉(zhuǎn)換為字符串
function flatten(arr) {
// arr.join(',) 得到的也是 '1,2,3,4' 這樣的字符串
return arr.join(',').split(',').map(function(item) {
// return parseInt(item);
return item;
})
}
5 擴(kuò)展運(yùn)算符
1）es6的擴(kuò)展運(yùn)算符能將二維數(shù)組變?yōu)橐痪S匆笤，如：[].concat(…[1, 2, 3, [4, 5]]); // [1, 2, 3, 4, 5]。利用這個(gè)特性谱邪，我們可以做一個(gè)遍歷炮捧，當(dāng) arr 中含有數(shù)組則使用一次擴(kuò)展運(yùn)算符，直到?jīng)]有為止惦银。
function flatten(arr) {
// 核心：只要 arr數(shù)組中含有非一維的 子項(xiàng)寓盗，就繼續(xù) 擴(kuò)展！璧函！
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]
或者這么調(diào)用【因?yàn)?generator函數(shù)“會(huì)自動(dòng)實(shí)現(xiàn) Iterator傀蚌、遍歷接口”，
使得我們可以使用 for ... of ... 蘸吓，
別寫成了 for ... in ... 善炫。】
let res_arr = [];
for(const item of flatten(arr)) {
res_arr.push(item);
}
四 總結(jié) & tips
1 雖然說寫了5種方法库继，但是核心也只有一個(gè)：遍歷數(shù)組arr箩艺，若arr[i]為數(shù)組則遞歸遍歷窜醉，直至arr[i]不為數(shù)組然后與之前的結(jié)果concat。
2 各個(gè)方法之間的對(duì)比
1）整體的代碼調(diào)用：
整體的代碼調(diào)用.png
2）整體的執(zhí)行結(jié)果：
整體的執(zhí)行結(jié)果.png
3 總結(jié)
1)整體來說這6種的運(yùn)行結(jié)果都基本一樣艺谆，至于性能榨惰、可讀性來說,本文沒有做過多的嘗試，歡迎熱心的小伙伴去嘗試下并留言給 “三少” ～
4 tips
1）若面試中遇到這個(gè)題目了静汤，大家可以先假裝思索【該過程中順便把以上的6種方法在腦子過一遍】琅催，然后將自己記得比較深、較接近最優(yōu)解的 講 或 寫 給面試官即可虫给。若太快回答藤抡，會(huì)給面試官一種你背題等不好的印象，且太快回答肯能也會(huì)因?yàn)樽约罕磉_(dá)的不充分而失分哦～
2）二叉樹的主要遍歷方式無法就2種 —— 深度遍歷（DFS） 和 廣度遍歷（BFS）抹估，我們的學(xué)習(xí)方式也一樣缠黍，若我們對(duì)以上6種方法都有了解過【廣度】且 還能順暢地說、寫出里面的 2-3種方法【深度】药蜻，那么面試官會(huì)對(duì)我們刮目相看的（因?yàn)檫@程度基本可以秒掉其他大部分人了）瓷式。
五 更多
1）本人是20屆本科生，大廠语泽、創(chuàng)業(yè)公司都待過贸典，現(xiàn)在是BAT的1名前端工程師(目前正往“全棧”方向發(fā)展湿弦，已開始寫公司里的部分后端代碼~)瓤漏。
2）以下是個(gè)人整理的一些筆記和書籍（永久有效鏈接: https://pan.baidu.com/s/1SPc3umO6cZlBtoPylSaHzw 密碼: eqee ，若失效的話可以到vx公眾號(hào) “碼農(nóng)三少” 回復(fù) pdf 以進(jìn)行最新資料的獲燃瞻！）：
個(gè)人技術(shù)筆記(350+算法題解蔬充、前端重點(diǎn)面經(jīng)匯總、圖解HTTP等).png
理財(cái)書籍pdf.png
技術(shù)書籍pdf.png
