【每日算法】LeetCode 104. 二叉树的最大深度

对前端开发者而言，学习算法绝非为了"炫技"。它是你从"页面构建者"迈向"复杂系统设计者"的关键阶梯。它将你的编码能力从"实现功能"提升到"设计优雅、高效解决方案"的层面。从现在开始，每天投入一小段时间，结合前端场景去理解和练习，你将会感受到自身技术视野和问题解决能力的质的飞跃。------ 算法：资深前端开发者的进阶引擎

二叉树的最大深度：从DOM树遍历到前端性能优化

1. 题目描述

1.1 问题概述

LeetCode 104题 "二叉树的最大深度" 要求计算一棵二叉树的最大深度。二叉树的深度定义为根节点到最远叶子节点的最长路径上的节点数。

1.2 具体定义

给定一个二叉树的根节点 root，返回其最大深度。

• 叶子节点是指没有子节点的节点
• 空树的深度为0（或根据题目要求为0）
• 单节点树的深度为1

示例：

输入: [3,9,20,null,null,15,7]
    3
   / \
  9  20
    /  \
   15   7
输出: 3
解释: 最大深度为根节点到最远叶子节点(15或7)的节点数，路径为3→20→15或3→20→7

2. 问题分析

2.1 问题本质

计算二叉树的最大深度本质上是一个树的遍历问题，需要找到从根节点到最远叶子节点的最长路径长度。

2.2 前端视角分析

在前端开发中，类似问题频繁出现：

1. DOM树操作：计算DOM树的嵌套深度，用于优化CSS选择器性能
2. 组件树分析：React/Vue组件树的嵌套深度影响渲染性能
3. 路由配置：嵌套路由的最大深度决定路由守卫的执行顺序
4. JSON数据处理：计算嵌套JSON对象的深度，用于数据验证和转换

3. 解题思路

3.1 核心思想

二叉树的最大深度可以通过以下公式递归定义：

maxDepth(root) = 1 + max(maxDepth(left), maxDepth(right))

其中，空节点的深度为0。

3.2 解法概览

方法	时间复杂度	空间复杂度	适用场景
递归DFS	O(n)	O(h)	代码简洁，树平衡时空间优
迭代BFS	O(n)	O(w)	需要层次信息，适合宽树
迭代DFS	O(n)	O(h)	避免递归栈溢出风险

最优解选择 ：对于前端应用，递归DFS通常是最优选择，因为：

1. 代码简洁易懂
2. 大多数前端框架的组件树深度不会导致栈溢出
3. 与函数式编程思想契合

4. 各思路代码实现

4.1 递归DFS（深度优先搜索）

/**
 * Definition for a binary tree node.
 * function TreeNode(val, left, right) {
 *     this.val = (val===undefined ? 0 : val)
 *     this.left = (left===undefined ? null : left)
 *     this.right = (right===undefined ? null : right)
 * }
 */

/**
 * 递归DFS解法
 * 时间复杂度: O(n) - 每个节点访问一次
 * 空间复杂度: O(h) - 递归调用栈深度，h为树的高度
 */
const maxDepth = function(root) {
    // 基准情况：空节点深度为0
    if (root === null) {
        return 0;
    }
    
    // 递归计算左右子树深度
    const leftDepth = maxDepth(root.left);
    const rightDepth = maxDepth(root.right);
    
    // 当前节点深度 = 1 + 左右子树深度的较大值
    return 1 + Math.max(leftDepth, rightDepth);
};

4.2 迭代BFS（广度优先搜索/层序遍历）

/**
 * 迭代BFS解法
 * 时间复杂度: O(n) - 每个节点访问一次
 * 空间复杂度: O(w) - w为树的最大宽度（队列大小）
 */
const maxDepthBFS = function(root) {
    if (root === null) return 0;
    
    const queue = [root];
    let depth = 0;
    
    while (queue.length > 0) {
        // 当前层的节点数
        const levelSize = queue.length;
        
        // 处理当前层的所有节点
        for (let i = 0; i < levelSize; i++) {
            const node = queue.shift();
            
            // 将子节点加入队列
            if (node.left) queue.push(node.left);
            if (node.right) queue.push(node.right);
        }
        
        // 完成一层遍历，深度加1
        depth++;
    }
    
    return depth;
};

// 使用双指针优化队列操作（性能更好）
const maxDepthBFSOptimized = function(root) {
    if (!root) return 0;
    
    const queue = [root];
    let depth = 0;
    let front = 0; // 队列头指针
    
    while (front < queue.length) {
        const levelEnd = queue.length;
        
        // 遍历当前层
        while (front < levelEnd) {
            const node = queue[front++];
            
            if (node.left) queue.push(node.left);
            if (node.right) queue.push(node.right);
        }
        
        depth++;
    }
    
    return depth;
};

4.3 迭代DFS（使用栈模拟递归）

/**
 * 迭代DFS解法
 * 时间复杂度: O(n) - 每个节点访问一次
 * 空间复杂度: O(h) - 栈的最大深度等于树的高度
 */
const maxDepthIterativeDFS = function(root) {
    if (root === null) return 0;
    
    const stack = [{ node: root, depth: 1 }];
    let maxDepth = 0;
    
    while (stack.length > 0) {
        const { node, depth } = stack.pop();
        
        // 更新最大深度
        maxDepth = Math.max(maxDepth, depth);
        
        // 将子节点入栈，深度+1
        if (node.right) {
            stack.push({ node: node.right, depth: depth + 1 });
        }
        if (node.left) {
            stack.push({ node: node.left, depth: depth + 1 });
        }
    }
    
    return maxDepth;
};

5. 各实现思路的复杂度、优缺点对比

5.1 对比表格

特性	递归DFS	迭代BFS	迭代DFS
时间复杂度	O(n)	O(n)	O(n)
空间复杂度	O(h)	O(w)	O(h)
代码简洁度	★★★★★	★★★☆☆	★★☆☆☆
可读性	★★★★★	★★★★☆	★★★☆☆
栈溢出风险	有（深树）	无	无
适用场景	树深度正常	需要层信息/宽树	深树/避免递归
前端适用性	高	中	中

5.2 详细分析

5.2.1 递归DFS

优点：

1. 代码极其简洁，符合函数式编程思想
2. 逻辑清晰，直接对应问题定义
3. 在前端开发中，大多数场景下树深度不会导致栈溢出

缺点：

1. 极端情况下（树退化为链表）可能导致栈溢出
2. 调试可能比迭代版本困难

5.2.2 迭代BFS

优点：

1. 天然按层遍历，适合需要层信息的场景
2. 没有递归栈溢出风险
3. 适合处理宽而浅的树

缺点：

1. 空间复杂度可能较高（存储整层节点）
2. 代码相对复杂

5.2.3 迭代DFS

优点：

1. 避免递归栈溢出
2. 显式控制栈，便于调试

缺点：

1. 代码最复杂
2. 需要手动管理节点和深度信息

6. 总结

6.1 核心收获

二叉树最大深度问题虽然简单，但包含了算法设计的核心思想：

1. 分治法：将问题分解为子问题（递归DFS）
2. 遍历策略：DFS vs BFS的选择
3. 空间-时间权衡：不同方法的空间复杂度差异

6.2 前端实际应用场景

6.2.1 DOM树相关

// 计算DOM树最大深度（实际应用）
function getDOMDepth(element) {
    if (!element.children || element.children.length === 0) {
        return 1;
    }
    
    let maxChildDepth = 0;
    for (let child of element.children) {
        maxChildDepth = Math.max(maxChildDepth, getDOMDepth(child));
    }
    
    return 1 + maxChildDepth;
}

// 应用：CSS选择器性能优化
// 深度过大的DOM结构会导致CSS选择器匹配性能下降

6.2.2 React/Vue组件树

// React组件树深度检查
class DepthAwareComponent extends React.Component {
    componentDidMount() {
        // 计算组件在树中的深度
        const depth = this.calculateComponentDepth(this);
        if (depth > 10) {
            console.warn('组件嵌套过深，可能影响性能');
        }
    }
    
    calculateComponentDepth(component) {
        // 实际实现需结合React上下文
        // 简化的递归计算
        if (!component.props.children) return 1;
        // ...递归计算逻辑
    }
}

6.2.3 路由配置分析

// 分析嵌套路由深度
function analyzeRouteDepth(routes, baseDepth = 1) {
    let maxDepth = baseDepth;
    
    routes.forEach(route => {
        if (route.children) {
            const childDepth = analyzeRouteDepth(route.children, baseDepth + 1);
            maxDepth = Math.max(maxDepth, childDepth);
        }
    });
    
    return maxDepth;
}

// 应用：路由守卫执行顺序优化

6.2.4 性能监控与优化

// 监控组件渲染深度
const renderDepthMap = new WeakMap();

function wrapComponent(Component) {
    return function DepthWrapped(props) {
        const depth = React.useContext(DepthContext) || 0;
        
        // 记录渲染深度
        if (process.env.NODE_ENV === 'development') {
            console.log(`${Component.name} 渲染深度: ${depth}`);
        }
        
        return (
            <DepthContext.Provider value={depth + 1}>
                <Component {...props} />
            </DepthContext.Provider>
        );
    };
}