JavaScript访问者模式_数据结构遍历操作-js教程-PHP中文网

JavaScript访问者模式_数据结构遍历操作

夢幻星辰

发布： 2025-11-24 12:55:44

原创

510人浏览过

访问者模式通过分离数据结构与操作实现解耦，适用于树形结构如AST或DOM的多种遍历场景。其核心是元素类提供accept方法接收访问者，访问者实现visit方法对不同元素执行具体操作。例如在表达式树中，可通过EvaluateVisitor计算值、PrintVisitor打印表达式，新增操作无需修改节点类，只需扩展访问者。优点是易扩展、操作集中，缺点是节点类型变动时需更新所有访问者。该模式在JavaScript中适合构建解析器或编译器，提升代码可维护性。

javascript访问者模式_数据结构遍历操作

JavaScript中的访问者模式常用于解耦数据结构与对数据的操作，特别适合需要对复杂对象结构（如树、DOM、AST等）进行多种不同遍历操作的场景。它让新增操作变得灵活，而无需修改原有的数据结构。

什么是访问者模式

访问者模式是一种行为设计模式，它将作用于某种数据结构中的各元素的操作分离出来，封装到独立的访问者对象中。这样可以在不改变元素类的前提下，为这些元素添加新的操作。

核心思想是：把数据结构和作用于结构上的操作分离开。适用于数据结构相对稳定，但操作多变的场景。

基本实现结构

在JavaScript中，可以通过定义元素的accept方法和访问者的visit方法来实现。

立即学习“Java免费学习笔记（深入）”；

Element（元素）：定义accept方法，接收一个访问者对象
Visitor（访问者）：定义visit方法，针对不同类型的元素实现具体操作

示例代码：

class NumberNode {
  constructor(value) {
    this.value = value;
  }
<p>accept(visitor) {
visitor.visitNumber(this);
}
}</p><p>class OperationNode {
constructor(operator, left, right) {
this.operator = operator;
this.left = left;
this.right = right;
}</p><p>accept(visitor) {
visitor.visitOperation(this);
}
}</p><p>class EvaluateVisitor {
visitNumber(node) {
return node.value;
}</p><p>visitOperation(node) {
const left = node.left.accept(this);
const right = node.right.accept(this);
if (node.operator === '+') return left + right;
if (node.operator === '<em>') return left </em> right;
return 0;
}
}</p>

登录后复制

使用方式：

Python操作Mysql实例代码教程

本文介绍了Python操作MYSQL、执行SQL语句、获取结果集、遍历结果集、取得某个字段、获取表字段名、将图片插入数据库、执行事务等各种代码实例和详细介绍，代码居多，是一桌丰盛唯美的代码大餐。如果想查看在线版请访问：https://www.jb51.net/article/34102.htm

查看详情

const ast = new OperationNode('+', 
  new NumberNode(5), 
  new OperationNode('*', new NumberNode(2), new NumberNode(3))
);
<p>const evaluator = new EvaluateVisitor();
console.log(ast.accept(evaluator)); // 输出 11</p>

登录后复制

应用场景：遍历复杂数据结构

访问者模式非常适合处理树形结构，比如抽象语法树（AST）、DOM树或文件系统目录。

可扩展性强：新增操作只需添加新访问者，不影响现有节点
集中操作逻辑：相似操作集中在访问者类中，便于维护
支持多种遍历策略：如打印、验证、优化、序列化等

例如，再加一个打印访问者：

class PrintVisitor {
  visitNumber(node) {
    return node.value.toString();
  }
<p>visitOperation(node) {
const left = node.left.accept(this);
const right = node.right.accept(this);
return <code>(${left} ${node.operator} ${right})</code>;
}
}</p><p>console.log(ast.accept(new PrintVisitor())); // 输出 (5 + (2 * 3))</p>

登录后复制