Javascript 如何避免typescript中的if语句？

我有不同类型的动作检查，它们具有不同的功能，只是我设置了if和else条件来检查动作类型并执行相关功能，如下面的代码片段

public onMessage = (messageEvent) => {
    if (messageEvent.data.action === 'subscribeTriggers') {
        this.subscribeTriggers(messageEvent);
    } else if (messageEvent.data.action === 'setGlobalFilters') {
        this.setGlobalFilters(messageEvent);
    } else if (messageEvent.data.action === 'getGlobalFilters') {
        this.receiveGlobalFilters(messageEvent);
    } else if (messageEvent.data.action === 'initFromGlobalFilters') {
        this.initFromGlobalFilters(messageEvent);
    }

有没有更好的解决方案来处理这种情况，因为我有可能在未来采取更多的行动，我必须一次又一次地修改代码，我觉得这是低效的

在这两者之间，

onMessage

函数用作库的事件侦听器（Porthole是一个用于安全跨域iFrame通信的小型库），我使用它在react应用程序的iFrame中进行通信

---

提前感谢

javascript中的对象可以看作是一个关联数组，其中键是属性或函数的名称

所以，你可以这样打电话：

this[messageEvent.data.action](messageEvent);

public onMessage = (messageEvent) => {
    switch (messageEvent.data.action) {
        case "subscribeTriggers":
            return this.subscribeTriggers(messageEvent);
        case "setGlobalFilters":
            return this.setGlobalFilters(messageEvent);
        case "getGlobalFilters":
            return this.recieveGlobalFilters(messageEvent);
        case "initFromGlobalFilters":
            return this.initFromGlobalFilters(messageEvent);
    }
}

---

警告（正如Joe Clay所指出的）：使用这种语法，对象

this

的每个函数都是可调用的，因此如果

this

包含您不想“公开”的函数，则它可能会导致“安全漏洞”。

Switch语句在以下情况下是您的朋友：

this[messageEvent.data.action](messageEvent);

public onMessage = (messageEvent) => {
    switch (messageEvent.data.action) {
        case "subscribeTriggers":
            return this.subscribeTriggers(messageEvent);
        case "setGlobalFilters":
            return this.setGlobalFilters(messageEvent);
        case "getGlobalFilters":
            return this.recieveGlobalFilters(messageEvent);
        case "initFromGlobalFilters":
            return this.initFromGlobalFilters(messageEvent);
    }
}

---

如果您的

messageEvent

字符串始终与

this

上的某个方法相匹配，肾上腺素DJ的答案也会起作用-但我觉得有点不对劲，因为这基本上意味着如果您有一个

this.definitelyNotAnEventHandler

，您仍然可以通过

onMessage

调用它。我更喜欢更明确的方法-这只是品味的问题：）

你的“明确”方法是有效的，但不能满足这个“需要”：

我不得不一次又一次地修改代码，我觉得这是低效的
@ADreNaLiNe DJ：它并没有完全消除修改代码的需要，但它减少了重复。我只是不喜欢用任意字符串将
索引到这个
，它可能会导致微妙的错误。如果您想这样做，最好创建一个
this.eventHandlers
对象，然后执行
this.eventHandlers[messageEvent.data.action]（messageEvent）
。我同意您的看法，但提交的代码中没有任何内容暗示除了调用的回调和
onMessage
之外还有其他内容。但是关于“安全性”的警告是相关的。@ADreNaLiNe DJ：是的，并不是说你的答案是错误的：）只是提供了一个替代的解决方案。