您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“JavaScript實現(xiàn)樹結(jié)構(gòu)轉(zhuǎn)換的方法有哪些”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“JavaScript實現(xiàn)樹結(jié)構(gòu)轉(zhuǎn)換的方法有哪些”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
在 JavaScript 編程中,將數(shù)組轉(zhuǎn)換為樹結(jié)構(gòu)是一個常見的需求。本篇博客將介紹五種常用的方法來實現(xiàn)數(shù)組轉(zhuǎn)樹結(jié)構(gòu),并討論每種方法的時間復(fù)雜度、空間復(fù)雜度和最優(yōu)解。
假設(shè)有一個由對象組成的數(shù)組,每個對象包含 id
和 parentId
兩個屬性。其中 id
表示節(jié)點的唯一標(biāo)識,parentId
表示該節(jié)點的父節(jié)點的 id
。
const nodes = [ { id: 1, parentId: null }, { id: 2, parentId: 1 }, { id: 3, parentId: 1 }, { id: 4, parentId: 2 }, { id: 5, parentId: 3 }, { id: 6, parentId: 3 }, { id: 7, parentId: 4 }, { id: 8, parentId: 4 }, ];
以上面的數(shù)組為例,我們將介紹以下五種方法來將其轉(zhuǎn)換為樹結(jié)構(gòu)。
function arrayToTreeRec(nodes, parentId = null) { return nodes .filter((node) => node.parentId === parentId) .map((node) => ({ ...node, children: arrayToTreeRec(nodes, node.id) })); } const tree = arrayToTreeRec(nodes, null);
時間復(fù)雜度:O(n^2),其中 n 是節(jié)點的數(shù)量。 空間復(fù)雜度:O(n^2)。 優(yōu)缺點:不適合大規(guī)模數(shù)據(jù)。
function arrayToTreeLoop(nodes) { const map = {}; const tree = []; for (const node of nodes) { map[node.id] = { ...node, children: [] }; } for (const node of Object.values(map)) { if (node.parentId === null) { tree.push(node); } else { map[node.parentId].children.push(node); } } return tree; } const tree = arrayToTreeLoop(nodes);
時間復(fù)雜度:O(n),其中 n 是節(jié)點的數(shù)量。 空間復(fù)雜度:O(n)。 優(yōu)缺點:適合大規(guī)模數(shù)據(jù)。
function arrayToTreeReduce(nodes) { const map = {}; const tree = nodes.reduce((acc, node) => { map[node.id] = { ...node, children: [] }; if (node.parentId === null) { acc.push(map[node.id]); } else { map[node.parentId].children.push(map[node.id]); } return acc; }, []); return tree; } const tree = arrayToTreeReduce(nodes);
時間復(fù)雜度:O(n),其中 n 是節(jié)點的數(shù)量。 空間復(fù)雜度:O(n)。 優(yōu)缺點:代碼簡潔,適合中小規(guī)模數(shù)據(jù)。
function arrayToTreeMap(nodes) { const map = new Map(nodes.map((node) => [node.id, { ...node, children: [] }])); const tree = []; for (const node of map.values()) { if (node.parentId === null) { tree.push(node); } else { map.get(node.parentId).children.push(node); } } return tree; } const tree = arrayToTreeMap(nodes);
時間復(fù)雜度:O(n),其中 n 是節(jié)點的數(shù)量。 空間復(fù)雜度:O(n)。 優(yōu)缺點:適合大規(guī)模數(shù)據(jù),而且由于使用了 Map
,相比于方法二和方法三,能夠更方便地進(jìn)行節(jié)點的查找和刪除。
function arrayToTreeDFS(nodes) { const map = new Map(nodes.map((node) => [node.id, { ...node, children: [] }])); const tree = []; for (const node of map.values()) { if (node.parentId === null) { dfs(node, tree); } } function dfs(node, parent) { if (parent) { parent.children.push(node); } for (const child of node.children) { dfs(map.get(child.id), node); } } return tree; } const tree = arrayToTreeDFS(nodes);
時間復(fù)雜度:O(n),其中 n 是節(jié)點的數(shù)量。 空間復(fù)雜度:O(n)。 優(yōu)缺點:相比于方法二、方法三和方法四,可以更方便地進(jìn)行深度優(yōu)先搜索。
讀到這里,這篇“JavaScript實現(xiàn)樹結(jié)構(gòu)轉(zhuǎn)換的方法有哪些”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。