資訊專欄INFORMATION COLUMN
摘要：需求最近遇到一個(gè)需求，平時(shí)被后臺(tái)慣著直接返回了樹形結(jié)構(gòu)給到前端，前端對(duì)這種嵌套類型的數(shù)據(jù)如地區(qū)的級(jí)聯(lián)或菜單的樹形結(jié)構(gòu)省掉了一層處理。當(dāng)然，沒用好就相當(dāng)于一堆廢鐵，甚至將導(dǎo)致一些不可預(yù)料的結(jié)果。相比起遞歸，我更喜歡這種方法。
需求
最近遇到一個(gè)需求，平時(shí)被后臺(tái)慣著直接返回了樹形結(jié)構(gòu)給到前端，前端對(duì)這種嵌套類型的數(shù)據(jù)（如地區(qū)的級(jí)聯(lián)或菜單的樹形結(jié)構(gòu)）省掉了一層處理。換了個(gè)后臺(tái)小哥哥返回了扁平化的數(shù)組數(shù)據(jù)給到前端自己去處理如下data。突然有點(diǎn)慌......
const data = [
{
"area_id": 5,
"name": "廣東省",
"parent_id": 0,
},
{
"area_id": 6,
"name": "廣州市",
"parent_id": 5,
},
{
"area_id": 7,
"name": "深圳市",
"parent_id": 5,
},
{
"area_id": 4,
"name": "北京市",
"parent_id": 3,
},
{
"area_id": 3,
"name": "北京",
"parent_id": 0,
},
{
"area_id": 2,
"name": "測(cè)試子地區(qū)",
"parent_id": 1,
},
{
"area_id": 1,
"name": "測(cè)試地區(qū)",
"parent_id": 0,
}
]
emmm，換個(gè)念頭想想也剛好鍛煉鍛煉，擼起袖子干吧，然后就總結(jié)了以下兩種整理方法~
方法一——遞歸在這種那么適合遞歸的場(chǎng)景，怎么能少了遞歸這個(gè)角色呢？第一種方法，遞歸出場(chǎng)！獻(xiàn)上遞歸寶器~
function toTreeData(data,pid){
function tree(id) {
let arr = []
data.filter(item => {
return item.parent_id === id;
}).forEach(item => {
arr.push({
area_id: item.area_id,
label: item.name,
children: tree(item.area_id)
})
})
return arr
}
return tree(pid) // 第一級(jí)節(jié)點(diǎn)的父id，是null或者0，視情況傳入
}
恩，姿勢(shì)擺好，在控制臺(tái)里執(zhí)行一下
哎喲，不錯(cuò)哦~后臺(tái)小哥哥再也不擔(dān)心需要返回什么數(shù)據(jù)給我了。不過，該方法有個(gè)缺點(diǎn)，在我使用組件的時(shí)候需要的數(shù)據(jù)結(jié)構(gòu)中，如果子級(jí)沒有數(shù)據(jù)children返回[]。恩，有點(diǎn)問題，但是還是可以優(yōu)化的，優(yōu)化的代碼我會(huì)那么容易給出來嗎？你已經(jīng)是個(gè)成熟的程序猿了，需要學(xué)會(huì)自己優(yōu)化代碼了！??！
方法二——對(duì)象對(duì)象在我眼里一直是倚天屠龍寶刀的存在，了解到其中的奧妙便形同有一武林秘籍傍身。當(dāng)然，沒用好就相當(dāng)于一堆廢鐵，甚至將導(dǎo)致一些不可預(yù)料的結(jié)果。
function setTreeData(arr) {
// 刪除所有 children,以防止多次調(diào)用
arr.forEach(function (item) {
delete item.children;
});
let map = {}; // 構(gòu)建map
arr.forEach(i => {
map[i.area_id] = i; // 構(gòu)建以area_id為鍵 當(dāng)前數(shù)據(jù)為值
});
let treeData = [];
arr.forEach(child => {
const mapItem = map[child.parent_id]; // 判斷當(dāng)前數(shù)據(jù)的parent_id是否存在map中
if (mapItem) { // 存在則表示當(dāng)前數(shù)據(jù)不是最頂層數(shù)據(jù)
// 注意: 這里的map中的數(shù)據(jù)是引用了arr的它的指向還是arr，當(dāng)mapItem改變時(shí)arr也會(huì)改變,踩坑點(diǎn)
(mapItem.children || ( mapItem.children = [] )).push(child); // 這里判斷mapItem中是否存在children, 存在則插入當(dāng)前數(shù)據(jù), 不存在則賦值children為[]然后再插入當(dāng)前數(shù)據(jù)
} else { // 不存在則是組頂層數(shù)據(jù)
treeData.push(child);
}
});
return treeData;
};
console.log(setTreeData(data)); // 輸出整理后的數(shù)據(jù)
結(jié)果我就不執(zhí)行了，跟遞歸的結(jié)果相似。相比起遞歸，我更喜歡這種方法。不過這種方法有一種容易犯錯(cuò)的地方，就是它會(huì)改變?cè)瓟?shù)據(jù)，我就在這里踩了好久的坑，所以一開始采用了刪除children的初始化了一遍。 記住了嗎，沒記住自行重復(fù)說三遍?。。?/p> 總結(jié)
以上簡(jiǎn)單介紹了兩種將扁平化數(shù)據(jù)轉(zhuǎn)化為遞歸樹的方法，學(xué)會(huì)了嗎，沒學(xué)會(huì)再回去好好擼擼碼!！目前我遇到需要將數(shù)據(jù)整理樹形結(jié)構(gòu)的主要在菜單欄或分類的樹形結(jié)構(gòu)上，當(dāng)然還有像省市這種有從屬關(guān)系的結(jié)構(gòu)。不過就算以后遇到了都唔駛驚啦~恩，繼續(xù)更新總結(jié)中....
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103094.html
摘要：第三條同樣需要遞歸，因?yàn)橥ㄟ^一個(gè)分類，數(shù)據(jù)庫(kù)中只存儲(chǔ)了其直屬父類，需要通過遞歸到頂級(jí)分類才能獲取到它們之間的所有分類信息。 原文發(fā)表于我的博客： https://blog.kaciras.net/article/36 在一些系統(tǒng)中，對(duì)內(nèi)容進(jìn)行分類是必需的功能。比如電商就需要對(duì)商品做分類處理，以便于客戶搜索；論壇也會(huì)分為很多板塊；門戶網(wǎng)站、也得對(duì)網(wǎng)站的內(nèi)容做各種分類。 分類對(duì)于一個(gè)內(nèi)容展...
摘要：分層數(shù)據(jù)探索例如無限級(jí)分類多級(jí)菜單省份城市引言什么是分層數(shù)據(jù)類似于樹形結(jié)構(gòu)，除了根節(jié)點(diǎn)和葉子節(jié)點(diǎn)外，所有節(jié)點(diǎn)都有一個(gè)父節(jié)點(diǎn)和一個(gè)或多個(gè)子節(jié)點(diǎn)。接下來我會(huì)先通過一般方法和遞歸方法來實(shí)現(xiàn)無限極分類，然后再通過兩種數(shù)據(jù)模型來談一談分層數(shù)據(jù)的處理。 分層數(shù)據(jù)Hierarchical Data探索（例如：無限級(jí)分類、多級(jí)菜單、省份城市） 引言 什么是分層數(shù)據(jù)？ 類似于樹形結(jié)構(gòu)，除了根節(jié)點(diǎn)和葉子節(jié)...
摘要：大家想想一想這個(gè)組件最終效果形成一個(gè)樹形結(jié)構(gòu)里面有相同的模塊這個(gè)是手風(fēng)琴組件中最小的組件單元。再次點(diǎn)擊節(jié)點(diǎn)就會(huì)開啟子樹。 show 效果 showImg(https://segmentfault.com/img/bV90qc?w=500&h=300); 說說我的思路 數(shù)據(jù)結(jié)構(gòu) {flag:1,data:[{id:1,name:書法類型,child:[{id:2,name:硬筆},{id...
摘要：通過自定義的查詢加載和大多數(shù)情況下，你需要按層級(jí)排序祖先集合可以被預(yù)加載視圖模板中面包屑將祖先的全部取出后轉(zhuǎn)換為數(shù)組，在用拼接為字符串輸出。 原文鏈接：http://www.pilishen.com/posts...; 歡迎作客我們的php&Laravel學(xué)習(xí)群：109256050 laravel-nestedset是一個(gè)關(guān)系型數(shù)據(jù)庫(kù)遍歷樹的larvel4-5的插件包 目錄： Nes...
閱讀 940·2023-04-26 00:11
閱讀 2735·2021-11-04 16:13
閱讀 2186·2021-09-09 09:33
閱讀 1551·2021-08-20 09:35
閱讀 3934·2021-08-09 13:42
閱讀 3674·2019-08-30 15:55
閱讀 1194·2019-08-30 15:55
閱讀 2281·2019-08-30 13:55
