JavaScript 二叉树遍历算法详解：先序、中序与后序实现

作者：半夏时间：2026-10-22 21:09:00浏览：283

本文详细介绍 JavaScript 中二叉树的三种核心遍历算法：先序、中序和后序。通过构建二叉搜索树（BST）节点与插入逻辑，分别演示如何按根-左-右、左-根-右以及左-右-根的顺序访问节点。文章提供完整代码片段及运行结果分析，帮助开发者理解递归遍历在数据结构中的实际应用与实现细节。

JavaScript 二叉树遍历概述

本文通过具体实例，深入解析 JavaScript 数据结构与算法中的二叉树遍历机制，旨在为读者提供清晰的参考与学习素材。

先序遍历实现与解析

本节聚焦于 JavaScript 数据结构与算法中的二叉树遍历，重点介绍先序遍历的实现方式。

先序遍历的执行逻辑为：首先访问根节点，随后以相同的递归策略依次处理左子树和右子树。

JavaScript 二叉树遍历概述

具体代码实现如下所示。


/*
 *二叉树中，相对较小的值保存在左节点上，较大的值保存在右节点中
 *
 *
 * */
/*用来生成一个节点*/
function Node(data, left, right) {
  this.data = data;//节点存储的数据
  this.left = left;
  this.right = right;
  this.show = show;
}
function show() {
  return this.data;
}
/*用来生成一个二叉树*/
function BST() {
  this.root = null;
  this.insert = insert;
}
/*将数据插入二叉树
 （1）设根节点为当前节点。
 （2）如果待插入节点保存的数据小于当前节点，则设新的当前节点为原节点的左节点；反
 之，执行第4步。
 （3）如果当前节点的左节点为null，就将新的节点插入这个位置，退出循环；反之，继续
 执行下一次循环。
 （4）设新的当前节点为原节点的右节点。
 （5）如果当前节点的右节点为null，就将新的节点插入这个位置，退出循环；反之，继续
 执行下一次循环。
 * */
function insert(data) {
  var n = new Node(data, null, null);
  if (this.root == null) {
    this.root = n;
  }
  else {
    var current = this.root;
    var parent;
    while (true) {
      parent = current;
      if (data < current.data) {
        current = current.left;//待插入节点保存的数据小于当前节点，则设新的当前节点为原节点的左节点
        if (current == null) {//如果当前节点的左节点为null，就将新的节点插入这个位置，退出循环；反之，继续执行下一次while循环。
          parent.left = n;
          break;
        }
      }
      else {
        current = current.right;//待插入节点保存的数据小于当前节点，则设新的当前节点为原节点的左节点
        if (current == null) {
          parent.right = n;
          break;
        }
      }
    }
  }
}
/*先序遍历
 *用递归的方法
 */
function preOrder(node) {
  if (!(node == null)) {
    console.log(node.show() + " ");
    preOrder(node.left);
    preOrder(node.right);
  }
}
/* 测试代码 */
var nums = new BST();
nums.insert(23);
nums.insert(45);
nums.insert(16);
nums.insert(37);
nums.insert(3);
nums.insert(99);
nums.insert(22);
console.log("先序遍历: ");
preOrder(nums.root);

代码运行后的输出结果如下。

JavaScript 二叉树遍历概述

中序遍历实现与解析

本节继续探讨 JavaScript 数据结构与算法中的二叉树遍历，重点讲解中序遍历的实现。

中序遍历依据节点键值的大小关系，按照升序访问二叉搜索树（BST）中的所有节点。

JavaScript 二叉树遍历概述

中序遍历的具体代码实现如下。


/*
 *二叉树中，相对较小的值保存在左节点上，较大的值保存在右节点中
 *
 *
 * */
/*用来生成一个节点*/
function Node(data, left, right) {
  this.data = data;//节点存储的数据
  this.left = left;
  this.right = right;
  this.show = show;
}
function show() {
  return this.data;
}
/*用来生成一个二叉树*/
function BST() {
  this.root = null;
  this.insert = insert;
}
/*将数据插入二叉树
 （1）设根节点为当前节点。
 （2）如果待插入节点保存的数据小于当前节点，则设新的当前节点为原节点的左节点；反
 之，执行第4步。
 （3）如果当前节点的左节点为null，就将新的节点插入这个位置，退出循环；反之，继续
 执行下一次循环。
 （4）设新的当前节点为原节点的右节点。
 （5）如果当前节点的右节点为null，就将新的节点插入这个位置，退出循环；反之，继续
 执行下一次循环。
 * */
function insert(data) {
  var n = new Node(data, null, null);
  if (this.root == null) {
    this.root = n;
  }
  else {
    var current = this.root;
    var parent;
    while (true) {
      parent = current;
      if (data < current.data) {
        current = current.left;//待插入节点保存的数据小于当前节点，则设新的当前节点为原节点的左节点
        if (current == null) {//如果当前节点的左节点为null，就将新的节点插入这个位置，退出循环；反之，继续执行下一次while循环。
          parent.left = n;
          break;
        }
      }
      else {
        current = current.right;//待插入节点保存的数据小于当前节点，则设新的当前节点为原节点的左节点
        if (current == null) {
          parent.right = n;
          break;
        }
      }
    }
  }
}
/*中序遍历
*用递归的方法
*/
function inOrder(node) {
  if (!(node == null)) {
    inOrder(node.left);
    console.log(node.show() + " ");
    inOrder(node.right);
  }
}
/* 测试代码 */
var nums = new BST();
nums.insert(23);
nums.insert(45);
nums.insert(16);
nums.insert(37);
nums.insert(3);
nums.insert(99);
nums.insert(22);
console.log("中序遍历: ");
inOrder(nums.root);

中序遍历代码的运行结果如下。

JavaScript 二叉树遍历概述

后序遍历实现与解析

本节介绍 JavaScript 数据结构与算法中的二叉树遍历，重点阐述后序遍历的实现。

后序遍历的策略是：先访问叶子节点，依次处理从左子树到右子树的节点，最后访问根节点。


/*
 *二叉树中，相对较小的值保存在左节点上，较大的值保存在右节点中
 *
 *
 * */
/*用来生成一个节点*/
function Node(data, left, right) {
  this.data = data;//节点存储的数据
  this.left = left;
  this.right = right;
  this.show = show;
}
function show() {
  return this.data;
}
/*用来生成一个二叉树*/
function BST() {
  this.root = null;
  this.insert = insert;
}
/*将数据插入二叉树
 （1）设根节点为当前节点。
 （2）如果待插入节点保存的数据小于当前节点，则设新的当前节点为原节点的左节点；反
 之，执行第4步。
 （3）如果当前节点的左节点为null，就将新的节点插入这个位置，退出循环；反之，继续
 执行下一次循环。
 （4）设新的当前节点为原节点的右节点。
 （5）如果当前节点的右节点为null，就将新的节点插入这个位置，退出循环；反之，继续
 执行下一次循环。
 * */
function insert(data) {
  var n = new Node(data, null, null);
  if (this.root == null) {
    this.root = n;
  }
  else {
    var current = this.root;
    var parent;
    while (true) {
      parent = current;
      if (data < current.data) {
        current = current.left;//待插入节点保存的数据小于当前节点，则设新的当前节点为原节点的左节点
        if (current == null) {//如果当前节点的左节点为null，就将新的节点插入这个位置，退出循环；反之，继续执行下一次while循环。
          parent.left = n;
          break;
        }
      }
      else {
        current = current.right;//待插入节点保存的数据小于当前节点，则设新的当前节点为原节点的左节点
        if (current == null) {
          parent.right = n;
          break;
        }
      }
    }
  }
}
/*后序遍历
 *用递归的方法
 */
function postOrder(node) {
  if (!(node == null)) {
    postOrder(node.left);
    postOrder(node.right);
    console.log(node.show() + " ");
  }
}
/* 测试代码 */
var nums = new BST();
nums.insert(23);
nums.insert(45);
nums.insert(16);
nums.insert(37);
nums.insert(3);
nums.insert(99);
nums.insert(22);
console.log("后序遍历: ");
postOrder(nums.root);

后序遍历代码的运行结果如下。

JavaScript 二叉树遍历概述

读者可使用在线 HTML/CSS/JavaScript 代码运行工具（如 http://tools.jb51.net/code/HtmlJsRun）测试上述代码的实际运行效果。

若对 JavaScript 其他领域感兴趣，可参考本站专题：《JavaScript 数学运算用法总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 数组操作技巧总结》、《JavaScript 排序算法总结》、《JavaScript 遍历算法与技巧总结》、《JavaScript 查找算法技巧总结》及《JavaScript 错误与调试技巧总结》。

希望本文提供的关于 JavaScript 程序设计的知识能对大家有所帮助。

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13