如何利用 Map.prototype.set() 的链式调用构建具备状态机特征的映射-js教程-PHP中文网

map.prototype.set()返回map实例以支持链式调用，但状态机需通过键设计或值结构编码转移规则；可用嵌套map、函数值或weakmap实现状态映射与隔离。

如何利用 map.prototype.set() 的链式调用构建具备状态机特征的映射

Map.prototype.set() 方法本身返回的是 Map 实例，因此天然支持链式调用。但需注意：它**不改变链式调用的语义逻辑**，仅提供语法便利；真正实现“状态机特征”的映射，关键在于**将状态转移规则编码进键的设计或值的结构中**，而非依赖 set() 的链式本身。

用嵌套 Map 模拟状态转移表

把每个状态作为外层 Map 的键，其值是另一个 Map，描述该状态下所有可能的输入 → 下一状态映射：

const stateMachine = new Map()
  .set('idle', new Map().set('click', 'loading').set('hover', 'hovered'))
  .set('loading', new Map().set('success', 'success').set('error', 'error'))
  .set('success', new Map().set('reset', 'idle'));

// 使用示例：从 idle 状态，收到 click → 进入 loading
const nextState = stateMachine.get('idle')?.get('click'); // 'loading'

用函数值封装状态行为与转移逻辑

让 Map 的 value 是一个接收当前上下文并返回新状态的函数，使 map 同时承载“决策逻辑”和“状态记忆”：

const transition = new Map()
  .set('START', (input) => input === 'login' ? 'AUTHENTICATING' : 'START')
  .set('AUTHENTICATING', (input) => input === 'ok' ? 'LOGGED_IN' : 'LOGIN_FAILED')
  .set('LOGGED_IN', (input) => input === 'logout' ? 'START' : 'LOGGED_IN');

// 驱动状态流转
let currentState = 'START';
currentState = transition.get(currentState)?.('login') ?? currentState; // → 'AUTHENTICATING'

结合 WeakMap 实现对象级状态隔离

当需要为多个实例（如 UI 组件）独立维护状态，且避免内存泄漏时，可用 WeakMap 存储对象 → 状态映射：

const componentState = new WeakMap();

class Button {
  constructor() {
    componentState.set(this, new Map().set('status', 'idle'));
  }
  setState(key, value) {
    componentState.get(this).set(key, value);
    return this; // 支持链式
  }
  getState(key) {
    return componentState.get(this)?.get(key);
  }
}

// 链式设置多个状态字段
const btn = new Button();
btn.setState('status', 'loading').setState('progress', 50);