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;
}
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) {
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);
}
}
// 给BST类添加先序遍历的成员方法
function BST() {
this.root = null;
this.insert = insert;
this.preOrder = preOrder;
}
preOrder函数采用递归方式实现，事实上，二叉树的遍历通常都基于递归逻辑。部分读者可能会根据“先打印父节点，再左子树，最后右子树”这一特征产生误解，误以为打印顺序仅仅是父节点、左子节点和右子节点的简单线性排列。这种误解的具体表现见下图：
请注意红框标注部分，其中父节点为10，左子节点为3，右子节点为18。基于上述误解，可能会错误地推断打印顺序为10 → 3 → 18，但这并不正确。实际的遍历顺序是：先打印节点10，随后完整打印左子树的所有节点，待左子树遍历完毕后，才开始以10为父节点遍历其右子树：
此时，理解的关键在于：
具体思维过程如下：
依此类推，当以10为父节点的左子树打印完毕后，再以相同的方式处理以10为父节点的右子树。采用这种“拆分替代”的思维模式，能更清晰地理解二叉树遍历的逻辑。
最终，先序遍历确定的二叉树节点访问顺序为：
根据图示，实际的输出顺序为：10 -> 3 -> 2 -> 4 -> 9 -> 8 -> 9 -> 18 -> 13 -> 21
接下来进行先序遍历的代码实践：
var bst = new BST();
var nums = [10, 3, 18, 2, 4, 13, 21, 9, 8, 9];
for(var i = 0; i < nums.length; i++) {
bst.insert(nums[i]);
}
bst.preOrder(bst.root);
需要强调的是，输出顺序与节点的插入顺序密切相关。因为不同的插入顺序会生成结构不同的二叉树。若对此有疑问，可参考前文《二叉树的javascript实现》以获取更清晰的说明，或通过实验验证：
中序遍历：特征与代码
中序遍历
理解先序遍历后，可以类推到中序和后序遍历的相关知识点。中序遍历的特征是：先打印左子树（左子节点），接着打印父节点，最后打印右子树（右子节点）。
function inOrder(node) {
if (!(node == null)) {
inOrder(node.left);
console.log(node.show() + " ");
inOrder(node.right);
}
}
// 给BST类添加该成员方法
function BST() {
this.root = null;
this.insert = insert;
this.preOrder = preOrder;
this.inOrder = inOrder;
}
中序遍历的打印顺序如下：
根据上图，实际的输出顺序为：2 -> 3 -> 4 -> 8 -> 9 -> 9 -> 10 -> 13 -> 18 -> 21
随后进行中序遍历的代码实践：
后序遍历：顺序与示例
后序遍历
function postOrder(node) {
if (!(node == null)) {
postOrder(node.left);
postOrder(node.right);
console.log(node.show() + " ");
}
}
// 给BST类添加该成员方法
function BST() {
this.root = null;
this.insert = insert;
this.preOrder = preOrder;
this.inOrder = inOrder;
this.postOrder = postOrder;
}
后序遍历的打印顺序为：
根据上图，实际的输出顺序为：2 -> 8 -> 9 -> 9 -> 4 -> 3 -> 13 -> 21 -> 18 -> 10
以上即为本文的全部内容，希望对读者的学习有所帮助，也欢迎大家继续支持本站。
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28