递归获取树形数据太慢_数据结构之树

1、树

定义：一种分层数据的抽象模型。

前端工作中常见的树：DOM树、级联选择、树形选择

JS 中没有树，但可以用 Object 和 Array 构建树

树的常用操作：深度/广度优先遍历、先中后序排列

2、什么是深度/广度遍历

深度优先遍历：尽可能深的搜索树的分支

广度优先遍历：先访问离根节点最近的节点

深度优先遍历口诀

• 访问根节点
• 对根节点的children挨个进行深度优先遍历

深度优先遍历

广度优先遍历口诀

• 新建一个队列，把根节点入队
• 把队头出队并访问
• 把队头的children挨个入队
• 重复第二第三步，直到队列为空

广度优先遍历

const tree = {
  val: 'a',
  children: [
    {
      val: 'b',
      children: [
        {
          val: 'd',
          children: []
        },
        {
          val: 'e',
          children: []
        }
      ]
    },
    {
      val: 'c',
      children: [
        {
          val: 'f',
          children: []
        },
        {
          val: 'g',
          children: []
        }
      ]
    }
  ]
};

深度优先遍历代码实现

广度优先遍历代码实现

3、二叉树的先中后序遍历

二叉树定义：树的每个节点最多只能有两个子节点

在 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;

先序遍历代码实现（递归版）

先序遍历代码实现（递归版）

中序遍历代码实现（递归版）

中序遍历代码实现（递归版）

后序遍历代码实现（递归版）

后序遍历代码实现（递归版）

先序遍历代码实现（非递归版）

先序遍历代码实现（非递归版）

中序遍历代码实现（非递归版）

中序遍历代码实现（非递归版）

后序遍历代码实现（非递归版）

后序遍历代码实现（非递归版）

4、遍历 JSON 的所有节点值