利用遞歸的方法循環(huán)樹形數(shù)組，當遇到有children的對象再次調(diào)用遞歸函數(shù)循環(huán)children數(shù)組，每次循環(huán)的數(shù)據(jù)放入一個提前聲明好的數(shù)組里，等所有遞歸函數(shù)執(zhí)行完，這個數(shù)組即是想要得到的扁平數(shù)據(jù)數(shù)組。

let res = []const fn = (source)=>{ source.forEach(el=>{ res.push(el) el.children && el.children.length>0 ? fn(el.children) : '' })}

示例1

let res = [] // 用于存儲遞歸結(jié)果（扁平數(shù)據(jù)）// 遞歸函數(shù)const fn = (source)=>{ source.forEach(el=>{ res.push(el) el.children && el.children.length>0 ? fn(el.children) : '' // 子級遞歸 })} // 樹形數(shù)據(jù)const arr = [ { id: '1', rank: 1 }, { id: '2', rank: 1, children:[ { id: '2.1', rank: 2 }, { id: '2.2', rank: 2 } ] }, { id: '3', rank:1, children:[ { id: '3.1', rank:2, children: [ { id:’3.1.1’, rank:3, children:[{ id: '3.1.1.1', rank: 4, children:[ { id: '3.1.1.1.1', rank: 5 }]} ] } ] } ] }] fn(arr) // 執(zhí)行遞歸函數(shù)console.log(res) // 查看結(jié)果

結(jié)果：

查看源碼

扁平數(shù)據(jù)轉(zhuǎn)成樹形數(shù)據(jù)，請參考這篇文章：js實現(xiàn)無限層級樹形數(shù)據(jù)結(jié)構(gòu)（創(chuàng)新算法）

js將扁平結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)換為樹形結(jié)構(gòu)

遞歸實現(xiàn)

function transformTree (list) { const tree = [] for (let i = 0, len = list.length; i < len; i++) { if (!list[i].pid) { const item = queryChildren(list[i], list) tree.push(item) } } return tree}function queryChildren (parent, list) { const children = [] for (let i = 0, len = list.length; i < len; i++) { if (list[i].pid === parent.id) { const item = queryChildren(list[i], list) children.push(item) } } if (children.length) { parent.children = children } return parent}

盡管后續(xù)對上面的算法進行了很多優(yōu)化，但是仍未離開遞歸，遞歸可能遇到的問題還是會有可能遇到

循環(huán)實現(xiàn)

隨著進化，循環(huán)代替遞歸是必然的結(jié)果~

兩次循環(huán)

開始使用循環(huán)實現(xiàn)時，使用了兩次循環(huán)完成轉(zhuǎn)換，先進行一次循環(huán)將數(shù)據(jù)轉(zhuǎn)換成 map 結(jié)構(gòu)，使其能通過 id 快速查詢

function transformTree (list) { const tree = [] const record = {} const length = list.length for (let i = 0; i < length; i++) { const item = list[i] item.children = [] // 重置 children record[item.id] = item } for (let i = 0; i < length; i++) { const item = list[i] if (item.pid) { if (record[item.pid]) { record[item.pid].children.push(item) } } else { tree.push(item) } } return tree}

上面的算法相較于遞歸的實現(xiàn)，不存在棧溢出的問題，而且是線性復雜度，效率已經(jīng)提高了許多

一次循環(huán)

再進行一定的優(yōu)化，最后變成一次循環(huán)完成樹形構(gòu)建

function transformTree (list) { const tree = [] const record = {} for (let i = 0, len = list.length; i < len; i++) { const item = list[i] const id = item.id if (record[id]) { item.children = record[id] } else { item.children = record[id] = [] } if (item.pid) { if (!record[item.pid]) { record[item.pid] = [] } record[item.pid].push(item) } else { tree.push(item) } }}

使用對象變量的特性，使用 map 結(jié)構(gòu)直接指向 children 數(shù)組，在循環(huán)中初始化的同時還能快速查找插入相應(yīng)的 children 里，使其在一次循環(huán)內(nèi)完成構(gòu)建，最后附上完整版~

function transformTree (list, options = {}) { const { keyField = ’id’, childField = ’children’, parentField = ’parent’ } = options const tree = [] const record = {} for (let i = 0, len = list.length; i < len; i++) { const item = list[i] const id = item[keyField] if (!id) { continue } if (record[id]) { item[childField] = record[id] } else { item[childField] = record[id] = [] } if (item[parentField]) { const parentId = item[parentField] if (!record[parentId]) { record[parentId] = [] } record[parentId].push(item) } else { tree.push(item) } } return tree}

到此這篇關(guān)于js實現(xiàn)樹形數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)的方法示例的文章就介紹到這了,更多相關(guān)js 樹形數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！