資訊專(zhuān)欄INFORMATION COLUMN
摘要：作為前端不用算法也可以寫(xiě)成項(xiàng)目但是如果明白會(huì)算法的話(huà)你寫(xiě)起代碼來(lái)會(huì)更得心應(yīng)手無(wú)限分類(lèi)遞歸多數(shù)用在樹(shù)形結(jié)構(gòu)數(shù)據(jù)有這樣一組數(shù)據(jù)張三的兒子張三的兒子李四的兒子張三的兒子的兒子張三李四王五想要得到的結(jié)果是這樣子的張三張三的兒子張三的兒子的兒子張三的
作為前端, 不用算法也可以寫(xiě)成項(xiàng)目. 但是如果明白會(huì)算法的話(huà), 你寫(xiě)起代碼來(lái)會(huì)更得心應(yīng)手.
無(wú)限分類(lèi)遞歸 多數(shù)用在樹(shù)形結(jié)構(gòu)數(shù)據(jù). 有這樣一組數(shù)據(jù):
const arr = [
{
id: 4,
name: "張三的兒子",
parentId: 1
},
{
id: 43,
name: "張三的2兒子",
parentId: 1
},
{
id: 5,
name: "李四的兒子",
parentId: 2
},
{
id: 6,
name: "張三的兒子的兒子",
parentId: 4
},
{
id: 1,
name: "張三",
parentId: 0
},
{
id: 2,
name: "李四",
parentId: 0
},
{
id: 3,
name: "王五",
parentId: 0
},
];
想要得到的結(jié)果是這樣子的:
const result = [
{
id: 1,
name: "張三",
parentId: 0,
children: [
{
id: 4,
name: "張三的兒子",
parentId: 1,
children: [
{
id: 6,
name: "張三的兒子的兒子",
parentId: 4
}
]
},
{
id: 43,
name: "張三的2兒子",
parentId: 1
}
]
},
{
id: 2,
name: "李四",
parentId: 0,
children: [
{
id: 5,
name: "李四的兒子",
parentId: 2
}
]
},
{
id: 3,
name: "王五",
parentId: 0
}
];
這里我有兩種做法:
遞歸
充分利用數(shù)據(jù)的引用(堆棧)
第一種:
function rescurve(arr, id) {
let treeData = [];
arr.forEach(i => {
if(i.parentId == id) {
treeData.push(i);
i.children = rescurve(arr, i.id);
}
});
return treeData;
};
console.log(rescurve(arr, 0)); // 輸出正確的值
這種方法沒(méi)什么說(shuō)的 就是執(zhí)行自身遞歸出想要的結(jié)構(gòu).
第二種:
function setTreeData(arr) {
let map = {}; // 構(gòu)建map
arr.forEach(i => {
map[i.id] = i; // 構(gòu)建以id為鍵 當(dāng)前數(shù)據(jù)為值
});
let treeData = [];
arr.forEach(child => {
const mapItem = map[child.parentId]; // 獲取當(dāng)前數(shù)據(jù)的parentId是否存在map中
if (mapItem) { // 存在則表示當(dāng)前數(shù)據(jù)不是最頂層數(shù)據(jù)
// 注意: 這里的map中的數(shù)據(jù)是引用了arr的它的指向還是arr, 當(dāng)mapItem改變時(shí)arr也會(huì)改變
(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(arr)); // 輸出正確的值
這里需要注意的是對(duì)象的引用, 利用對(duì)象的引用改變指向的arr的數(shù)據(jù). 就得到想要的結(jié)構(gòu)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107745.html
摘要：整理一下，形成今天的內(nèi)容算法中的遞歸算法。解決來(lái)看一下，最終形態(tài)的遞歸方法是什么樣子遞歸運(yùn)算創(chuàng)建樹(shù)結(jié)構(gòu)聲明靜態(tài)變量給靜態(tài)變量累加值賦值閉合標(biāo)簽這樣就可以解決了。所以，在之后的遞歸算法中，應(yīng)該小心謹(jǐn)慎，避免出現(xiàn)問(wèn)題。 原文是在我自己博客中，小伙伴也可以點(diǎn)閱讀原文進(jìn)行跳轉(zhuǎn)查看，還有好聽(tīng)的背景音樂(lè)噢~ ????遞歸，在編碼中應(yīng)該算是一種很常見(jiàn)的算法了。之前在學(xué)習(xí)C語(yǔ)言的時(shí)候，也同樣了解過(guò)一些...
遞歸是個(gè)有意思的概念，正如在前面所說(shuō)，遞歸能讓算法的可讀性大大提高，而且通常要比使用循環(huán)結(jié)構(gòu)更能寫(xiě)出準(zhǔn)確的算法。這本書(shū)形象引入了遞歸，并沒(méi)有太深入，所以我進(jìn)行了一點(diǎn)添油加醋。 遞歸 概念 遞歸其實(shí)就是自己調(diào)用自己?？梢詮亩喾N維度對(duì)遞歸分類(lèi)，我見(jiàn)過(guò)的最常見(jiàn)的分類(lèi)： 直接遞歸 自己直接調(diào)用自己。如： --haskell length :: [a] -> Int length [] = 0 length...
摘要：昨天幫同事解決問(wèn)題，于是誕生了超優(yōu)雅兩行代碼搞定無(wú)限級(jí)分類(lèi)獲取頂級(jí)分類(lèi)這篇文章。這次要解決的問(wèn)題是根據(jù)分類(lèi)，獲取所有下級(jí)分類(lèi)的，這里說(shuō)的所有下級(jí)分類(lèi)，是包含下級(jí)下下級(jí)下下下級(jí)另外剛好在學(xué)習(xí)，于是用上了對(duì)象。 昨天幫同事解決問(wèn)題，于是誕生了超優(yōu)雅！兩行代碼搞定 php 無(wú)限級(jí)分類(lèi) 獲取頂級(jí)分類(lèi)ID這篇文章。 晚上回家做自己的node.js項(xiàng)目的時(shí)候，又遇到關(guān)于無(wú)限級(jí)分類(lèi)的問(wèn)題了。其實(shí)也不...
摘要：可以看到，我們首先獲取到了所有的數(shù)據(jù)，然后按照父級(jí)歸類(lèi)。無(wú)限嵌套評(píng)論先來(lái)看下這個(gè)無(wú)限嵌套評(píng)論長(zhǎng)什么樣子。文件掃描使用遞歸進(jìn)行目錄文件的掃描的栗子。 回顧 上一篇文章我們講到實(shí)戰(zhàn)PHP數(shù)據(jù)結(jié)構(gòu)基礎(chǔ)之遞歸。來(lái)回顧下什么是遞歸？ 一般來(lái)說(shuō)，遞歸被稱(chēng)為函數(shù)自身的調(diào)用。 遞歸在開(kāi)發(fā)中的實(shí)際運(yùn)用 N級(jí)分類(lèi) 無(wú)限級(jí)的分類(lèi)在平常的開(kāi)發(fā)中是常見(jiàn)的需求，并且在不少面試題中都會(huì)碰到。不管你做什么項(xiàng)目，應(yīng)該都...
閱讀 1080·2021-11-24 10:27
閱讀 3351·2021-11-18 10:02
閱讀 2408·2021-11-16 11:45
閱讀 3173·2021-11-15 18:10
閱讀 841·2021-09-22 15:23
閱讀 1544·2019-08-30 15:53
閱讀 3030·2019-08-30 13:20
閱讀 1678·2019-08-30 12:53
