溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
利用遞歸的方法循環(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)容請搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼