优化 JavaScript 中的开关语句

在本文中,您将学习如何使用交换机,并希望获得直觉,知道何时应该使用它。

使用交换机的一个标志是当你有许多连续的如果/else陈述时,让我们看看一个使用如果/else的例子,然后我们将看看交换机的对比:

 1let dayIndex = new Date().getDay();
 2let day;
 3
 4if (dayIndex === 0) {
 5  day = 'Sunday';
 6}
 7else if (dayIndex === 1) {
 8  day = 'Monday';
 9}
10else if (dayIndex === 2) {
11  day = 'Tuesday';
12}
13else if (dayIndex === 3) {
14  day = 'Wednesday';
15}
16else if (dayIndex === 4) {
17  day = 'Thursday';
18}
19else if (dayIndex === 5) {
20  day = 'Friday';
21}
22else if (dayIndex === 6) {
23  day = 'Saturday';
24};
25
26console.log(day); // "Friday"

<$>[注]你知道吗?JavaScript没有一个原生方法来获取周日! <$>

使用如果/else是非常可言的,并且包含了大量不必要的锅炉板,而交换机可以轻松处理:

 1let dayIndex = new Date().getDay();
 2let day;
 3
 4switch (dayIndex) {
 5  case 0:
 6    day = "Sunday";
 7    break;
 8  case 1:
 9    day = "Monday";
10    break;
11  case 2:
12    day = "Tuesday";
13    break;
14  case 3:
15    day = "Wednesday";
16    break;
17  case 4:
18    day = "Thursday";
19    break;
20  case 5:
21    day = "Friday";
22    break;
23  case 6:
24    day = "Saturday";
25    break;
26};
27
28console.log(day); // "Friday"

几乎没有任何代码,而且是最小限度的,这是因为交换强调可能的值,而不是值的条件。

使用突破

由于JavaScript会多次导航整个案例分支,所以建议使用来防止意外的案例匹配,或者拯救引擎不需要分析额外的代码。

 1switch (dayIndex) {
 2  case 0:
 3    day = "Sunday";
 4    break;
 5  case 1:
 6    day = "Monday";
 7    break;
 8  case 2:
 9    day = "Tuesday";
10    break;
11  case 3:
12    day = "Wednesday";
13    break;
14  case 4:
15    day = "Thursday";
16    break;
17  case 5:
18    day = "Friday";
19    break;
20  case 6:
21    day = "Saturday";
22    break;
23}

在这个例子中,‘break’实际上没有提供任何额外的安全性,因为‘case 2’永远不会是‘case 5’(例如),所以‘break’有点奇怪。这种严格的使用‘break’似乎是开发人员的优先事项,如使用半色素(;);开发者采取明确的方法来编程将使用‘break’为每个‘case’,而一些开发者只在‘switch’中使用‘break’战略上。

打破的战略用途

有时你实际上会想要你的案例通过。使用打破这些案例是更多的策略,而不是安全措施。

 1let seasonIndex = new Date().getMonth();
 2let season;
 3
 4switch (seasonIndex) {
 5  case 0:
 6  case 1:
 7  case 2:
 8    season = 'Winter'; // January, February, March
 9    break;
10  case 3:
11  case 4:
12  case 5:
13    season = 'Spring'; // April, May, June
14    break;
15  case 6:
16  case 7:
17  case 8:
18    season = 'Summer'; // July, August, September
19    break;
20  case 9:
21  case 10:
22  case 11:
23    season = 'Autumn'; // October, November, December
24    break;
25}

在本示例中,案例是通过打破被用来明确提前退出交换机

如果/else版本将需要使用许多不显得那么透明的逻辑操作员:

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

处理故障案例

交换的另一个特征是能够处理意想不到的或一般情况,回到我们的第一例中,我们可以使用默认来执行错误处理:

 1let dayIndex = new Date().getDay();
 2let day;
 3
 4switch (dayIndex) {
 5  default:
 6    day = new Error('Invalid argument: "dayIndex" must be an integer from 0 –> 6');
 7  case 0:
 8    day = 'Sunday';
 9    break;
10  case 1:
11    day = 'Monday';
12    break;
13  case 2:
14    day = 'Tuesday';
15    break;
16  case 3:
17    day = 'Wednesday';
18    break;
19  case 4:
20    day = 'Thursday';
21    break;
22  case 5:
23    day = 'Friday';
24    break;
25  case 6:
26    day = 'Saturday';
27    break;
28}

您可能已经注意到默认案例位于顶部,不要担心!它将按预期工作,因为JavaScript将在设置默认之前查看所有案例分支。

您也可以为您的通用案例使用默认:

 1let beverage = 'Mr. Pibb';
 2let cost;
 3
 4switch (beverage) {
 5  default:
 6    cost = 0.05;
 7  case 'Pepsi':
 8    cost = 1.00;
 9    break;
10  case 'Coca-Cola':
11    cost = 1.00;
12    break;
13  case 'Dr. Pepper':
14    cost = 2.00;
15    break;
16  case 'Moutain Dew':
17    cost = 5.00;
18    break;
19}
20
21console.log(cost); // 0.05

这确保您从交换机中获得一些 sorta 值,即使它不匹配您定义的任何案例

结论

交换声明是一个优雅的替代方案,当你发现自己写了很多连续的如果/else声明. 即使你可能不会使用交换的频率,比如说,一个为循环,当你需要它时,没有替代品。

<$>[注] 若要了解更多关于「交换机」的信息,请访问 Mozilla 开发者 网站。

Published At
Categories with 技术
Tagged with
comments powered by Disqus