數(shù)據(jù)結(jié)構(gòu)之“樹”

• 樹是什么？
• 什么是深度/廣度優(yōu)先遍歷？
• 深度優(yōu)先遍歷算法口訣
• 廣度優(yōu)先遍歷算法口訣
• 二叉樹的先中后序遍歷
• • 二叉樹是什么
  • 先序遍歷算法口訣（根 > 左 > 右）
  • 中序遍歷算法口訣（左 > 根 > 右）
  • 后序遍歷算法口訣（左 > 右 > 根）
• LeetCode：104.二叉樹的最大深度
• LeetCode：111.二叉樹的最小深度
• LeetCode：102.二叉樹的層序遍歷
• LeetCode：94.二叉樹的中序遍歷
• LeetCode：112.路徑總和
• 前端與樹：遍歷JSON的所有節(jié)點值
• 前端與樹：渲染Antd中的樹組件
• 技術(shù)要點
• 思考題

樹是什么？

• 一種分層數(shù)據(jù)的抽象模型。
• 前端工作中常見的樹包括：DOM樹、級聯(lián)選擇、樹形控件…

• JS中沒有樹，但是可以用Object和Array構(gòu)建樹

• 樹的常用操作：深度/廣度優(yōu)先遍歷、先中后序遍歷

什么是深度/廣度優(yōu)先遍歷？

• 深度優(yōu)先遍歷，盡可能深的搜索樹的分支
  

• 廣度優(yōu)先遍歷：先訪問離根節(jié)點最近的節(jié)點

深度優(yōu)先遍歷算法口訣

• 訪問根節(jié)點
• 對根節(jié)點的children挨個進行深度優(yōu)先遍歷

const tree = {val: 'a',children: [{val: 'b',children: [{val: 'd',children: [],},{val: 'e',children: [],}],},{val: 'c',children: [{val: 'f',children: [],},{val: 'g',children: [],}],}], };const dfs = (root) => {console.log(root.val);root.children.forEach(dfs); };dfs(tree);

廣度優(yōu)先遍歷算法口訣

• 新建一個隊列，把根節(jié)點入隊。
• 把隊頭出隊并訪問
• 把隊頭的children挨個入隊
• 重復第二、三步，直到隊列為空

const tree = {val: 'a',children: [{val: 'b',children: [{val: 'd',children: [],},{val: 'e',children: [],}],},{val: 'c',children: [{val: 'f',children: [],},{val: 'g',children: [],}],}], };const bfs = (root) => {const q = [root];while (q.length > 0) {const n = q.shift();console.log(n.val);n.children.forEach(child => {q.push(child);});} };bfs(tree);

二叉樹的先中后序遍歷

二叉樹是什么

• 樹中每個節(jié)點最多只能有兩個子節(jié)點
• 在JS中通常用Object來模擬二叉樹

const bt = {val: 1,left: {val: 2,left: {val: 4,left: null,right: null,},right: {val: 5,left: null,right: null,},},right: {val: 3,left: {val: 6,left: null,right: null,},right: {val: 7,left: null,right: null,},}, };module.exports = bt;

先序遍歷算法口訣（根 > 左 > 右）

• 訪問根節(jié)點
• 對根節(jié)點的左子樹進行先序遍歷
• 對根節(jié)點的右子樹進行先序遍歷

const bt = require('./bt');const preorder = (root) => {if (!root) { return; }console.log(root.val);preorder(root.left);preorder(root.right); };// 非遞歸版 // const preorder = (root) => { // if (!root) { return; } // const stack = [root]; // while (stack.length) { // const n = stack.pop(); // console.log(n.val); // if (n.right) stack.push(n.right); // if (n.left) stack.push(n.left); // } // };preorder(bt);

中序遍歷算法口訣（左 > 根 > 右）

• 對根節(jié)點的左子樹進行中序遍歷
• 訪問根節(jié)點
• 對根節(jié)點的右子樹進行中序遍歷

const bt = require('./bt');const inorder = (root) => {if (!root) { return; }inorder(root.left);console.log(root.val);inorder(root.right); };// 非遞歸版 // const inorder = (root) => { // if (!root) { return; } // const stack = []; // let p = root; // while (stack.length || p) { // while (p) { // stack.push(p); // p = p.left; // } // const n = stack.pop(); // console.log(n.val); // p = n.right; // } // };inorder(bt);

后序遍歷算法口訣（左 > 右 > 根）

• 對根節(jié)點的左子樹進行后序遍歷
• 對根節(jié)點的右子樹進行后序遍歷
• 訪問根節(jié)點

const bt = require('./bt');const postorder = (root) => {if (!root) { return; }postorder(root.left);postorder(root.right);console.log(root.val); };// 非遞歸版,做法：類似先序遍歷倒過來 // const postorder = (root) => { // if (!root) { return; } // const outputStack = []; // const stack = [root]; // while (stack.length) { // const n = stack.pop(); // outputStack.push(n); // if (n.left) stack.push(n.left); // if (n.right) stack.push(n.right); // } // while(outputStack.length){ // const n = outputStack.pop(); // console.log(n.val); // } // };postorder(bt);

LeetCode：104.二叉樹的最大深度

使用深度優(yōu)先遍歷解決

解題思路
求最大深度，考慮使用深度優(yōu)先遍歷
在深度優(yōu)先遍歷過程中，記錄每個節(jié)點所在的層級，找出最大的層級即可
解題步驟
新建一個變量，記錄最大深度
深度優(yōu)先遍歷整棵樹，并記錄每個節(jié)點的層級，同時不斷刷新最大深度這個變量
遍歷結(jié)束返回最大深度這個變量

時間復雜度O（n），n是整棵樹的節(jié)點數(shù)
有函數(shù)調(diào)用堆棧，函數(shù)沒有執(zhí)行完變量不能釋放，所以空間復雜度為O（最大深度），好的情況是每個都有兩個叉，空間復雜度為O（log(n)），最壞的情況是節(jié)點數(shù)等于最大深度，只在一個叉上不斷延續(xù)的二叉樹，空間復雜度為O（n）

LeetCode：111.二叉樹的最小深度

使用廣度優(yōu)先遍歷解決

解題思路
求最小深度，考慮使用廣度優(yōu)先遍歷
在廣度優(yōu)先遍歷過程中，遇到葉子節(jié)點，停止遍歷，返回節(jié)點層級
解題步驟
廣度優(yōu)先遍歷整棵樹，并記錄每個節(jié)點的層級
遇到葉子節(jié)點，返回節(jié)點層級，停止遍歷

時間復雜度O（n），n是整棵樹的節(jié)點數(shù)
空間復雜度為O（n）

LeetCode：102.二叉樹的層序遍歷

解題思路
層序遍歷順序就是廣度優(yōu)先遍歷
不過在遍歷時候需要記錄當前節(jié)點所處的層級，方便將其添加到不同的數(shù)組中
解題步驟
廣度優(yōu)先遍歷二叉樹
遍歷過程中，記錄每個節(jié)點的層級，并將其添加到不同的數(shù)組中

• 法一

• 法二
  
  時間復雜度O（n），空間復雜度為O（n）

LeetCode：94.二叉樹的中序遍歷

遞歸版

非遞歸版

時間復雜度O（n），空間復雜度為O（n）

LeetCode：112.路徑總和

解題思路
在深度優(yōu)先遍歷的過程中，記錄當前路徑的節(jié)點值的和
在葉子節(jié)點處，判斷當前路徑的節(jié)點值的和是否等于目標值
解題步驟
深度優(yōu)先遍歷二叉樹，在葉子節(jié)點處，判斷當前路徑的節(jié)點值的和是否等于目標值，是就返回true
遍歷結(jié)束，如果沒有匹配，就返回false

時間復雜度O（n），n為樹的節(jié)點數(shù)，空間復雜度為O（樹的高度），最壞為O（n），最好為O（log(n)）

前端與樹：遍歷JSON的所有節(jié)點值

const json = {a: { b: { c: 1 } },d: [1, 2], };const dfs = (n, path) => {console.log(n, path);Object.keys(n).forEach(k => {dfs(n[k], path.concat(k));}); };dfs(json, []);

前端與樹：渲染Antd中的樹組件

技術(shù)要點

樹是一種分層數(shù)據(jù)的抽象模型，在前端廣泛應用
樹的常用操作：深度/廣度優(yōu)先遍歷、先中后序遍歷…

思考題

1、用React或Vue編寫一個省市區(qū)級聯(lián)選擇
2、用React或Vue編寫一個樹插件，要求可以將json渲染到頁面上即可

總結(jié)

以上是生活随笔為你收集整理的（八）数据结构之“树”的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。