前言

最近有同學(xué)問(wèn)我，有沒(méi)有一些比較簡(jiǎn)單的方法，把多維數(shù)組展開(kāi)成一維數(shù)組，就是扁平化數(shù)組。這也是一道常見(jiàn)的大廠面試題！

如果沒(méi)有遇到這個(gè)問(wèn)題的朋友可能會(huì)問(wèn)什么是數(shù)組扁平化？

其實(shí)數(shù)組扁平化是指將一個(gè)多維數(shù)組變?yōu)橐粋€(gè)一維數(shù)組。

例如：[1,2,[3,4,[5],6,[7]]]?===>?[1,2,3,4,5,6,7,]

今天婧婧就帶大家，手撕它！

一、ES10的flat方法

作為開(kāi)發(fā)人員都喜歡用最簡(jiǎn)單的方法，最好是一句代碼能搞定一個(gè)功能那種。

那就先給大家介紹一個(gè)最簡(jiǎn)單，代碼量最少的flat()方法實(shí)現(xiàn)數(shù)組扁平化。

flat()?方法會(huì)按照一個(gè)可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回。

用好flat()，好像就沒(méi)有解決不了的數(shù)組扁平化。如果有，那就用join或者split方法吧！

二、join+split 方法

join()和?split()兩個(gè)方法大家應(yīng)該都很熟悉吧，p.s.不熟悉的往下閱讀也就熟悉了！

沒(méi)想到兩個(gè)平平無(wú)奇的方法組合起來(lái)，竟然還能實(shí)現(xiàn)這么強(qiáng)大的功能！這簡(jiǎn)直震驚了我的小伙伴~

接下來(lái)看看我是如何組合使用這兩個(gè)方法實(shí)現(xiàn)數(shù)組扁平化吧~

join()?方法把 數(shù)組展開(kāi)為字符串，并且以 , 隔開(kāi)split() 把字符串分割為數(shù)字 ，但是數(shù)組中的每一項(xiàng)數(shù)據(jù)都為字符串的數(shù)字使用map()?映射把字符串轉(zhuǎn)換為number數(shù)據(jù)類型的數(shù)字。

是不是看起來(lái)一目了然？接下來(lái)婧婧就要講一個(gè)多數(shù)小伙伴都頭疼的方法了，準(zhǔn)備好了嗎？

三、遞歸 + 數(shù)組方法

遞歸對(duì)于很多朋友來(lái)講就是噩夢(mèng)般的存在。

很難了解遞歸的執(zhí)行過(guò)程和遞歸性能本身也不怎么好，所以都遵循能不用遞歸就不用它。

隨著ES6+?的發(fā)展，一些新的技術(shù)都能實(shí)現(xiàn)以前只有遞歸才能做的事，就導(dǎo)致使用遞歸的頻率就更低，但多用，你會(huì)發(fā)現(xiàn)遞歸也就那樣，沒(méi)有難點(diǎn)。

接下看看如何使用遞歸實(shí)現(xiàn)數(shù)組扁平化吧~

嗯，這樣來(lái)看，這個(gè)其實(shí)也不是什么噩夢(mèng)嘛。如果不熟悉，就多寫(xiě)多練，總能學(xué)會(huì)的！

但下面這個(gè)對(duì)于多數(shù)人來(lái)說(shuō)，就是個(gè)陌生的存在。跟著婧婧一起來(lái)看看！

四、Generator迭代器

Generator是ES6新增的技術(shù)之一。ES6 新增了?Generator 函數(shù)，可以通過(guò)?yield?關(guān)鍵字，把函數(shù)的執(zhí)行流掛起，從而可以改變執(zhí)行流程，或者可以暫停、延遲執(zhí)行，可以給異步編程提供解決方案。

我們也可以利用這一特性，來(lái)實(shí)現(xiàn)數(shù)組扁平化，但是也會(huì)涉及到遞歸的操作，說(shuō)明在JavaScript中遞歸的是一個(gè)不可忽視的技術(shù)點(diǎn)。

這里調(diào)用方法并不能直接得到結(jié)果，而是在迭代器里，使用next()可以一個(gè)個(gè)取出來(lái)，但是太麻煩，所以可以用擴(kuò)展運(yùn)算符展開(kāi)之后放入一個(gè)新的額數(shù)組從而得到最終結(jié)果。

五、結(jié)語(yǔ)

講到這里，好像數(shù)組扁平化也沒(méi)有那么難了吧?，F(xiàn)在看好像很簡(jiǎn)單，但是太久沒(méi)有使用，偶然碰見(jiàn)還是會(huì)裝作不認(rèn)識(shí)。嗯，可不要讓它成為你最熟悉的陌生人哦~

動(dòng)起手來(lái)手撕它才是正解！