递归与队列在深度/广度遍历中的应用

递归与队列在深度/广度遍历中的应用

场景实例：遍历dom树

递归

深度优先

• 递归通常用于深度优先搜索

function domTreeRecuDFS(dom) {
    for (const item of dom) {
      if (item.innerHTML === "123") {
        return item; // 找到目标节点，返回
      }
      if (item.children && item.children.length) {
        const value = domTreeRecuDFS(item.children); // 深度搜索子节点
        if (value) return value;
      }
    }
    return null; // 如果没有找到目标节点，返回null
  }

广度优先

• 由于递归本身的特性，它不适合于广度优先

队列

深度优先

function domTreeDFS(dom) {
    const queue = [...dom]; // 初始化队列，将根节点放入队列
    while (queue.length > 0) {
      const item = queue.shift(); // 从队列前端取出节点
      if (item.innerHTML === "123") {
        return item; // 找到目标节点，返回
      }
      if (item.children && item.children.length) {
        queue.unshift(...item.children); // 将子节点加入队列
      }
    }
    return null; // 如果没有找到目标节点，返回null
  }

广度优先

• 队列在深、广度优先算法中差异很小
• 更改新元素进入的位置，即可调整遍历方式

function domTreeBFS(dom) {
    const queue = [...dom]; // 初始化队列，将根节点放入队列
    while (queue.length > 0) {
      const item = queue.shift(); // 从队列前端取出节点
      if (item.innerHTML === "123") {
        return item; // 找到目标节点，返回
      }
      if (item.children && item.children.length) {
        queue.push(...item.children); // 将子节点加入队列
      }
    }
    return null; // 如果没有找到目标节点，返回null
  }