JavaScript數(shù)組實現(xiàn)扁平化四種方法詳解
數(shù)組的扁平化就是將一個嵌套多層的數(shù)組 array（嵌套可以是任何層數(shù)）轉(zhuǎn)換為只有一層的數(shù)組。
var arr = [1, [2, [3, 4, 5]]]; console.log(flatten(arr)); // [1, 2, 3, 4，5]
本文就是要用多種方法實現(xiàn)這個 flatten 函數(shù)
1. 常規(guī)遞歸法
var a = [1, [2, [3, 4, 5]]];
function flatten(arr) {
let newArray = []
for (let i of arr) {
if (i.constructor === Array) {
newArray = newArray.concat(flatten(i))
} else {
newArray.push(i)
}
}
return newArray
}
console.log(flatten(a)); // [1, 2, 3, 4，5]這段代碼核心就是循環(huán)遍歷過程中的遞歸操作，就是在遍歷過程中發(fā)現(xiàn)數(shù)組元素還是數(shù)組的時候進行遞歸操作，把數(shù)組的結(jié)果通過數(shù)組的 concat 方法拼接到最后要返回的 result 數(shù)組上，那么最后輸出的結(jié)果就是扁平化后的數(shù)組。
2. reduce方法
var a = [1, [2, [3, 4, 5]]];
function flatten(arr) {
return arr.reduce((pre,next) => {
return pre.concat(next instanceof Array ? flatten(next) : next)
},[])
}
console.log(flatten(a)); //[ 1, 2, 3, 4, 5 ]我們可以看到 reduce 的第一個參數(shù)用來返回最后累加的結(jié)果，思路和第一種遞歸方法是一樣的，但是通過使用 reduce 之后代碼變得更簡潔了，也同樣解決了扁平化的問題。
3. 擴展運算符實現(xiàn)
// 方法3
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
console.log(flatten(arr)); // [1, 2, 3, 4，5]我們先用數(shù)組的 some 方法把數(shù)組中仍然是組數(shù)的項過濾出來，然后執(zhí)行 concat 操作，利用 ES6 的展開運算符，將其拼接到原數(shù)組中，最后返回原數(shù)組，達(dá)到了預(yù)期的效果。
4. split和toString共同處理
// 方法4
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
return arr.toString().split(',');
}
console.log(flatten(arr)); // [1, 2, 3, 4]數(shù)組會默認(rèn)帶一個 toString 的方法，可以把數(shù)組直接轉(zhuǎn)換成逗號分隔的字符串，然后再用 split 方法把字符串重新轉(zhuǎn)換為數(shù)組
到此這篇關(guān)于JavaScript數(shù)組實現(xiàn)扁平化四種方法詳解的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組扁平化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ES6（ECMAScript 6,也稱為ES2015）是JavaScript的一個重要更新版本,引入了許多新的語言特性和改進,使得JavaScript變得更加現(xiàn)代化、易讀、易維護和更適合大型應(yīng)用程序的開發(fā),ES6的主要變化歸納為：語法糖、新機制、更好的語義、更多的內(nèi)置對象和方法2023-11-11
這篇文章主要介紹了js判斷在哪個瀏覽器打開項目的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了解決JS表單驗證只有第一個IF起作用的問題，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-12-12
推薦一個封裝好的getElementsByClassName方法
這篇文章主要推薦一個封裝好的getElementsByClassName方法,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了微信小程序swiper組件用法,結(jié)合實例形式分析了微信小程序中swiper組件的功能、使用方法,并附帶完整源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了Emberjs 通過 axios 下載文件的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
實現(xiàn)div滾動條默認(rèn)最底部以及默認(rèn)最右邊的示例代碼
下面小編就為大家分享一篇實現(xiàn)div滾動條默認(rèn)最底部以及默認(rèn)最右邊的示例代碼，代碼非常簡潔，具有很好的參考價值，希望對大家有所幫助2017-11-11
基于JavaScript或jQuery實現(xiàn)網(wǎng)站夜間/高亮模式
這篇文章主要介紹了基于JavaScript或jQuery實現(xiàn)網(wǎng)站夜間/高亮模式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了javascript中類的定義方式,結(jié)合實例形式較為詳細(xì)的分析了JavaScript中類的四種定義方式,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
layerui代碼控制tab選項卡,添加,關(guān)閉的實例
今天小編就為大家分享一篇layerui代碼控制tab選項卡,添加,關(guān)閉的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09