JavaScript 中 Map 怎么实现状态机的状态转换映射-js教程-PHP中文网

map本身不直接实现状态机，但适合存储“当前状态+事件→下一状态”的转换规则；用嵌套map构建状态转移表，外层键为当前状态，内层键为事件，值为目标状态；支持扩展动作、守卫及类封装提升复用性。

javascript 中 map 怎么实现状态机的状态转换映射

JavaScript 中的 Map 本身不直接实现状态机，但它非常适合用来**存储和查找状态转换规则**——即“当前状态 + 事件 → 下一状态”的映射关系。核心思路是：把状态机的转移逻辑从硬编码的 if/else 或 switch 中解耦出来，用结构化数据（Map）来驱动行为。

用 Map 存储状态转移表

将每个状态作为 Map 的键（推荐用字符串或 Symbol），值是另一个 Map，表示该状态下所有合法事件及其对应的目标状态。

外层 Map：键是当前状态（如 'idle'），值是内层 Map
内层 Map：键是触发事件（如 'click'），值是目标状态（如 'loading'）
这样查表就是两次 .get()：先根据当前状态取规则，再根据事件取下一状态

简单可运行示例

以下是一个带错误处理的轻量级状态机实现：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const transitionMap = new Map()
  .set('idle', new Map().set('start', 'loading').set('cancel', 'idle'))
  .set('loading', new Map().set('success', 'done').set('fail', 'error').set('abort', 'idle'))
  .set('error', new Map().set('retry', 'loading').set('reset', 'idle'));

function nextState(currentState, event) {
  const eventMap = transitionMap.get(currentState);
  if (!eventMap) throw new Error(`Unknown state: ${currentState}`);
  const target = eventMap.get(event);
  if (target === undefined) throw new Error(`No transition for ${currentState} + ${event}`);
  return target;
}

// 使用
console.log(nextState('idle', 'start'));     // 'loading'
console.log(nextState('loading', 'success')); // 'done'

扩展支持动作与守卫条件

纯状态映射不够时，可以把值从字符串升级为对象，包含 to（目标状态）、action（执行函数）、guard（守卫函数）等字段：

例如：{ to: 'done', action: () => console.log('completed'), guard: () => isNetworkOnline() }
调用时先执行 guard，通过才执行 action 并返回 to
仍用 Map 存储，只是值类型更丰富，保持查找高效性