求助：JavaScript中无需数字索引访问状态机对应函数的方法

嘿，我明白你遇到的问题了！你之前用this.statemachine.transitions.indexOf("idle")无效，是因为transitions是一个对象，而不是数组——indexOf是数组的专属方法，对象根本没有这个属性，所以肯定用不了。

其实你的状态机结构设计得很合理，完全不需要用数字索引来访问状态，直接利用状态名称（比如'idle'、'ready'）作为对象的键来访问就好。我给你写一个简单的实现方案：

核心实现思路 #

我们可以给状态机添加一个handleEvent方法，它会根据当前的状态和传入的事件名称，自动找到并执行对应的处理函数，全程不需要数字索引。

修改后的完整代码 #

this.statemachine = {
  state: 'idle', // 当前状态
  transitions: {
    idle: {
      ebaseinit: function () {
        console.log("Firebase Init complete");
      },
      coreinit: function () {
        console.log("Firestore Init complete");
      }
    },
    ready: {
      fetchdata: function () {
        console.log("Getting data");
      }
    }
  },
  // 新增：处理事件的方法
  handleEvent: function(eventName) {
    // 获取当前状态对应的所有事件处理函数
    const currentStateTransitions = this.transitions[this.state];
    
    // 检查当前状态是否有该事件的处理函数
    if (currentStateTransitions && typeof currentStateTransitions[eventName] === 'function') {
      // 执行对应的处理函数
      currentStateTransitions[eventName]();
    } else {
      // 可选：如果没有找到，打印警告提示
      console.warn(`找不到状态 "${this.state}" 下事件 "${eventName}" 的处理函数`);
    }
  }
};

怎么使用？ #

比如现在处于idle状态，你要触发ebaseinit事件，直接调用：

this.statemachine.handleEvent('ebaseinit');
// 控制台会输出：Firebase Init complete

如果状态切换到ready后，触发fetchdata事件：

this.statemachine.state = 'ready'; // 手动切换状态（或者你可以在处理函数里自动切换，下面会说）
this.statemachine.handleEvent('fetchdata');
// 控制台会输出：Getting data

进阶优化：自动切换状态 #

如果你的状态机需要在处理事件后自动切换状态，可以让每个事件处理函数返回新的状态，然后在handleEvent里自动更新：

this.statemachine = {
  state: 'idle',
  transitions: {
    idle: {
      ebaseinit: function () {
        console.log("Firebase Init complete");
        return 'ready'; // 返回要切换到的新状态
      },
      coreinit: function () {
        console.log("Firestore Init complete");
        return 'ready';
      }
    },
    ready: {
      fetchdata: function () {
        console.log("Getting data");
        return 'idle'; // 处理完数据后切回idle状态
      }
    }
  },
  handleEvent: function(eventName) {
    const currentStateTransitions = this.transitions[this.state];
    if (currentStateTransitions && typeof currentStateTransitions[eventName] === 'function') {
      const newState = currentStateTransitions[eventName]();
      // 检查新状态是否在transitions中存在，避免无效状态
      if (newState && this.transitions[newState]) {
        this.state = newState;
        console.log(`状态已切换为：${this.state}`);
      }
    } else {
      console.warn(`找不到状态 "${this.state}" 下事件 "${eventName}" 的处理函数`);
    }
  }
};

这样调用handleEvent后，状态会自动更新，完全符合状态机的工作逻辑~

内容的提问来源于stack exchange，提问作者Sachin Naik