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ù)組,達到了預(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ù)組會默認帶一個 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)文章
javascript將json格式數(shù)組下載為excel表格的方法
下面小編就為大家分享一篇javascript將json格式數(shù)組下載為excel表格的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12layui實現(xiàn)圖片虛擬路徑上傳,預(yù)覽和刪除的例子
今天小編就為大家分享一篇layui實現(xiàn)圖片虛擬路徑上傳,預(yù)覽和刪除的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript下對于事件、事件流、事件觸發(fā)的順序隨便說說
向同一個標簽 動態(tài)的添加事件是 執(zhí)行的順序在ie和其他非ie內(nèi)核的瀏覽器有所不同 ie是“先進先出 ” 就是最先添加的最先執(zhí)行,其他非ie內(nèi)核的瀏覽器是 “先進后出”,就是 最后添加的事件 先執(zhí)行。2010-07-07