.jpg)
從樹形數(shù)據(jù)末節(jié)點(diǎn)回溯至根節(jié)點(diǎn)并拼接標(biāo)簽
處理樹形結(jié)構(gòu)數(shù)據(jù)時(shí)，常需根據(jù)末級(jí)節(jié)點(diǎn)信息逆向追溯至根節(jié)點(diǎn)，并拼接路徑上所有節(jié)點(diǎn)標(biāo)簽。例如，給定以下樹形數(shù)據(jù)：
const treeData = [ { label: "節(jié)點(diǎn)1", value: "1", children: [ { label: "節(jié)點(diǎn)1-1", value: "1-1" }, { label: "節(jié)點(diǎn)1-2", value: "1-2" }, ], }, { label: "節(jié)點(diǎn)2", value: "2", children: [{ label: "節(jié)點(diǎn)2-1", value: "2-1" }], }, ];
目標(biāo)是根據(jù)末級(jí)節(jié)點(diǎn)的 value 值（例如 “1-2″），拼接從該節(jié)點(diǎn)到根節(jié)點(diǎn)的所有標(biāo)簽，期望結(jié)果為 “節(jié)點(diǎn)1/節(jié)點(diǎn)1-2″。
直接逆向遍歷不可行，因?yàn)?a href="http://www.babyishan.com/tag/%e6%95%b0%e6%8d%ae%e7%bb%93%e6%9e%84">數(shù)據(jù)結(jié)構(gòu)僅提供從根到葉子的路徑。但我們可以利用 ui 庫(kù)（如 tdesign 或 element-ui）提供的樹形組件及其事件機(jī)制來實(shí)現(xiàn)。
這些庫(kù)的樹形組件通常在節(jié)點(diǎn)點(diǎn)擊時(shí)提供包含節(jié)點(diǎn)及其父節(jié)點(diǎn)信息的 node 對(duì)象。我們可以利用此信息遞歸向上追溯，直到根節(jié)點(diǎn)。
假設(shè)點(diǎn)擊 value 為 “1-2” 的節(jié)點(diǎn)，tdesign 的樹形組件可能返回如下 node 對(duì)象：
{ label: "節(jié)點(diǎn)1-2", value: "1-2", parent: { label: "節(jié)點(diǎn)1", value: "1", parent: NULL, }, }
利用此對(duì)象，我們可以遞歸訪問 parent 屬性，直到 parent 為 null（根節(jié)點(diǎn)）。在此過程中拼接每個(gè)節(jié)點(diǎn)的 label，即可得到完整路徑。
以下是一個(gè)基于此思路的 JavaScript 函數(shù)，它接受樹形數(shù)據(jù)和目標(biāo) value 值作為輸入，并返回拼接后的標(biāo)簽路徑：
function getPathLabel(treeData, targetValue) { function traverse(node) { if (node.value === targetValue) { let path = []; let currentNode = node; while (currentNode) { path.unshift(currentNode.label); // 將標(biāo)簽添加到數(shù)組開頭 currentNode = currentNode.parent; } return path.join("/"); } if (node.children) { for (const child of node.children) { const result = traverse(child); if (result) return result; } } return null; } for (const node of treeData) { const result = traverse(node); if (result) return result; } return null; // 目標(biāo)值未找到 } const path = getPathLabel(treeData, "1-2"); console.log(path); // 輸出: 節(jié)點(diǎn)1/節(jié)點(diǎn)1-2
此函數(shù)通過深度優(yōu)先搜索遍歷樹形數(shù)據(jù)，找到目標(biāo)節(jié)點(diǎn)后，遞歸向上遍歷并拼接標(biāo)簽。 需要注意的是，這依賴于 UI 庫(kù)提供的 node 對(duì)象結(jié)構(gòu)，具體實(shí)現(xiàn)可能因庫(kù)而異。 需要根據(jù)實(shí)際的 UI 庫(kù) API 進(jìn)行調(diào)整。
.png)
