优化JavaScript中的switch语句

switch 语句对于某些编程任务是必不可少的。在本文中，您将学习如何使用 switch 并希望获得直觉，知道何时应该使用它。

使用 switch 的一个标志是当您有很多连续的 if/else 语句时。让我们看一个使用 if/else 的示例，然后我们将查看 switch 等价物进行比较：

let dayIndex = new Date().getDay();
let day;

if (dayIndex === 0) {
  day = 'Sunday';
}
else if (dayIndex === 1) {
  day = 'Monday';
}
else if (dayIndex === 2) {
  day = 'Tuesday';
}
else if (dayIndex === 3) {
  day = 'Wednesday';
}
else if (dayIndex === 4) {
  day = 'Thursday';
}
else if (dayIndex === 5) {
  day = 'Friday';
}
else if (dayIndex === 6) {
  day = 'Saturday';
};

console.log(day); // "Friday"

你知道吗？ JavaScript 没有获取星期几的本地方法！

使用 if/else 真的很冗长，并且包含许多 switch 可以轻松处理的不必要的样板：

let dayIndex = new Date().getDay();
let day;

switch (dayIndex) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
};

console.log(day); // "Friday"

几乎没有任何代码，而且令人耳目一新。这是因为 switch 将重点放在可能的值上，而不是值的条件上。

使用中断

由于 JavaScript 将多次浏览整个 case 分支，因此建议使用 break 来防止意外的 case 匹配或使引擎不必解析额外的代码。

switch (dayIndex) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
}

在此示例中，break 实际上并没有提供任何额外的安全性，因为 case 2 永远不可能是 case 5（例如），因此 break 有点无关紧要。这种对 break 的严格使用似乎是开发人员喜欢使用分号 (;) 的优先事项。采用显式编程方法的开发人员将对每个 case 使用 break，而一些开发人员仅在 switch 中策略性地使用 break。然而，全面使用它会带来轻微的性能提升，因为即使没有机会让另一种情况为真，至少您甚至不会让引擎运行其余的 switch 语句。

“break”的策略性使用

有时您实际上会希望您的案件“失败”。对这些实例使用 break 更多的是一种策略，而不是一种安全措施。

let seasonIndex = new Date().getMonth();
let season;

switch (seasonIndex) {
  case 0:
  case 1:
  case 2:
    season = 'Winter'; // January, February, March
    break;
  case 3:
  case 4:
  case 5:
    season = 'Spring'; // April, May, June
    break;
  case 6:
  case 7:
  case 8:
    season = 'Summer'; // July, August, September
    break;
  case 9:
  case 10:
  case 11:
    season = 'Autumn'; // October, November, December
    break;
}

在此示例中，案例“失败”，break 用于提前明确退出 switch。这允许您将多个案例与单个值合并在一起。

if/else 版本需要使用大量 || 逻辑运算符，这些运算符看起来并不透明：

 if (seasonIndex === 0 || seasonIndex === 1 || seasonIndex === 2) {
   season = 'Winter';
 } else if (seasonIndex === 3 || seasonIndex === 4 || seasonIndex === 5) {
   season = 'Spring';
 } else if (seasonIndex === 6 || seasonIndex === 7 || seasonIndex === 8) {
   season = 'Summer';
 } else if (seasonIndex === 9 || seasonIndex === 10 || seasonIndex === 11) {
   season = 'Fall';
 }

处理违约案件

switch 的另一个特性是能够处理意外或一般情况。回到我们的第一个例子，我们可以使用 default 来实现错误处理：

let dayIndex = new Date().getDay();
let day;

switch (dayIndex) {
  default:
    day = new Error('Invalid argument: "dayIndex" must be an integer from 0 –> 6');
  case 0:
    day = 'Sunday';
    break;
  case 1:
    day = 'Monday';
    break;
  case 2:
    day = 'Tuesday';
    break;
  case 3:
    day = 'Wednesday';
    break;
  case 4:
    day = 'Thursday';
    break;
  case 5:
    day = 'Friday';
    break;
  case 6:
    day = 'Saturday';
    break;
}

您可能已经注意到 default 外壳放置在顶部。不用担心！它将按预期工作，因为 JavaScript 会在确定 default 之前遍历所有 case 分支。

您还可以将 default 用于您的通用案例：

let beverage = 'Mr. Pibb';
let cost;

switch (beverage) {
  default:
    cost = 0.05;
  case 'Pepsi':
    cost = 1.00;
    break;
  case 'Coca-Cola':
    cost = 1.00;
    break;
  case 'Dr. Pepper':
    cost = 2.00;
    break;
  case 'Moutain Dew':
    cost = 5.00;
    break;
}

console.log(cost); // 0.05

这可以确保您从 switch 中获得一些排序值，即使它与您定义的任何 cases 都不匹配。

结论

当您发现自己要编写大量连续的 if/else 语句时，switch 语句是一个不错的选择。即使您可能不像 for-loop 那样频繁地使用 switch，但在您需要时也没有替代品。 Lodash 和 Redux 等现代库今天仍在使用 switch，这使其成为 JavaScript 的那些老派主力功能之一，您将始终需要掌握腰带。

要了解有关 switch 的更多信息，请访问 Mozilla Developer 网站。