用多个 else with 条件编写 if 的最简洁方法答案

【问题标题】：Cleanest way to write if with multiple else with condition用多个 else with 条件编写 if 的最简洁方法
【发布时间】：2021-09-29 09:09:28
【问题描述】：

我正在写一个条件 if else。有多个 else 语句。最干净的写法是什么？以及最好的编码方式。

PS 我是 reactJS 新手。

if (type === activity.fetchPeople && loading) {
    await store.dispatch(fetchPeople(store, 20, 0, params.sectionType));
    store.dispatch(showGlobalLoader(false));
  } else if (type === activity.pathfallRevert) {
    await store.dispatch(fetchactivityfallRevert(store, params.userId, 20, 0));
    activityPro = `${labels.pathfallRevert} (${params.count})`;
    store.dispatch(showGlobalLoader(false));
  } else if (type === activity.pathfall) {
    await store.dispatch(fetchactivityfall(store, params.userId, 20, 0));
    activityPro = `${labels.pathfall} (${params.count})`;
    store.dispatch(showGlobalLoader(false));
  } else if (type === activity.road) {
    await store.dispatch(fetchRoads(store, params.userId, 20, 0));
    activityPro = `${labels.road} (${params.count})`;
    store.dispatch(showGlobalLoader(false));
  } else if (type === activity.movers) {
    await store.dispatch(fetchmovers(store, params.userId, 20, 0));
    activityPro = `${labels.movers} (${params.count})`;
    store.dispatch(showGlobalLoader(false));
  } else {
    store.dispatch(showGlobalLoader(false));
  }

谢谢

【问题讨论】：

你可以使用相同的开关盒
在这种情况下，我通常使用字典/地图（在 JS 中它只是一个对象）。例如，您可以执行以下操作：activityPro = {fetchPeople: null, pathfallRevert: ${labels.pathfallRevert} (${params.count}, /* remaining if-branches */}[type]，然后对 store.dispatch 的 args 执行类似操作，并在最后使用从索引对象中选择的适当 args 调用该函数。

标签： javascript reactjs if-statement ecmascript-6

【解决方案1】：

你可以使用 Switch\Case

switch(type) {
  case activity.fetchPeople:
    // code block
    break;
  case activity.pathfallRevert:
    // code block
    break;
  default:
    store.dispatch(showGlobalLoader(false));
    // code block
  }

【讨论】：

见第一个if (type === activity.fetchPeople && loading)
您可以在第一个案例中添加一个 if。我同意最干净的方法是切换。 case activity.fetchPeople: if(loading) { doSomething(); break; } else { break; }

【解决方案2】：

我们真的习惯了 if/else 语法，尤其是当我们来自其他面向对象的语言时。对我来说是 Java，在学习 Javascript 的基础知识时很难偏离这种模式。作为一般规则，如果您看到很多 if/else if/else（尤其是如果每个条件语句都相似），那么可能会有所不同。

正如其他人所指出的，switch/case 语法正是针对这种用例而设计的。它简洁易读，便于理解和日后添加。

另一个（更高级的）选项是使用 Javascript 的 Object 字面量。在这种情况下，每个不同的type 会导致不同的操作。你可以有一个看起来像这样的对象：

var activities = {
  'activity.fetchPeople': function() {
    if (loading) {
      await store.dispatch(fetchPeople(store, 20, 0, params.sectionType))
      store.dispatch(showGlobalLoader(false))
    }
  },
  'activity.pathfallRevert': function() {
    await store.dispatch(...);
    activityPro = `${labels.pathfallRevert} (${params.count})`;
    store.dispatch(showGlobalLoader(false));
  }
}

在为您的所有活动类型构建此功能后，您可以致电 activities[type]()

【讨论】：

我在 React 组件中使用它。我不叫这个。如果我做我需要传递的类型？
还有一件事。我想要异步功能。我可以使用箭头功能吗？
得到这个错误activities[type] is not a function