你可能不需要在 JavaScript 使用 switch 语句

没有 switch 就没有复杂的代码块

switch很方便：给定一个表达式，我们可以检查它是否与一堆case子句中的其他表达式匹配。考虑以下示例：

constname="Juliana";

switch(name){

case"Juliana":

console.log("She'sJuliana");

break;

case"Tom":

console.log("She'snotJuliana");

break;

}

当 name 为**“Juliana”**时，我们将打印一条消息，并立即中断退出该块。在switch函数内部时，直接在 case 块使用 return，就可以省略break。

当没有匹配项时，可以使用 default 选项：

constname="Kris";

switch(name){

case"Juliana":

console.log("She'sJuliana");

break;

case"Tom":

console.log("She'snotJuliana");

break;

default:

console.log("Sorry,nomatch");

}

switch在 Redux reducers 中也大量使用（尽管Redux Toolkit简化了样板），以避免产生大量的if。考虑以下示例：

constLOGIN_SUCCESS="LOGIN_SUCCESS";

constLOGIN_FAILED="LOGIN_FAILED";

constauthState={

token:"",

error:"",

};

functionauthReducer(state=authState,action){

switch(action.type){

caseLOGIN_SUCCESS:

return{...state,token:action.payload};

caseLOGIN_FAILED:

return{...state,error:action.payload};

default:

returnstate;

}

}

这有什么问题吗?几乎没有。但是有没有更好的选择呢？

从 Python 获得的启示

来自 Telmo 的这条 Tweet引起了我的注意。他展示了两种“switch”风格，其中一种非常接近Python中的模式。

Python 没有开关，它给我们一个更好的替代方法。首先让我们将代码从 JavaScript 移植到Python：

LOGIN_SUCCESS="LOGIN_SUCCESS"

LOGIN_FAILED="LOGIN_FAILED"

auth_state={"token":"","error":""}

defauth_reducer(state=auth_state,action={}):

mapping={

LOGIN_SUCCESS:{**state,"token":action["payload"]},

LOGIN_FAILED:{**state,"error":action["payload"]},

}

returnmapping.get(action["type"],state)

在 Python 中，我们可以使用字典来模拟switch 。dict.get() 可以用来表示 switch 的 default 语句。

当访问不存在的key时，Python 会触发一个 KeyError 错误：

>>>my_dict={

"name":"John",

"city":"Rome",

"age":44

}

>>>my_dict["not_here"]

#Output:KeyError:'not_here'

.get()方法是一种更安全方法，因为它不会引发错误，并且可以为不存在的key指定默认值：

>>>my_dict={

"name":"John",

"city":"Rome",

"age":44

}

>>>my_dict.get("not_here","notfound")

#Output:'notfound'

因此，Pytho n中的这一行：

returnmapping.get(action["type"],state)

等价于 JavaScript中的：

functionauthReducer(state=authState,action){

...

default:

returnstate;

...

}

使用字典的方式替换 switch

再次思考前面的示例：

constLOGIN_SUCCESS="LOGIN_SUCCESS";

constLOGIN_FAILED="LOGIN_FAILED";

constauthState={

token:"",

error:"",

};

functionauthReducer(state=authState,action){

switch(action.type){

caseLOGIN_SUCCESS:

return{...state,token:action.payload};

caseLOGIN_FAILED:

return{...state,error:action.payload};

default:

returnstate;

}

}

如果不使用 switch 我们可以这样做：

functionauthReducer(state=authState,action){

constmapping={

[LOGIN_SUCCESS]:{...state,token:action.payload},

[LOGIN_FAILED]:{...state,error:action.payload}

};

returnmapping[action.type]||state;

}

这里我们使用 ES6 中的计算属性，此处，mapping的属性是根据两个常量即时计算的：LOGIN_SUCCESS 和 LOGIN_FAILED。属性对应的值，我们这里使用的是对象解构，这里 ES9((ECMAScript 2018)) 出来的。

constmapping={

[LOGIN_SUCCESS]:{...state,token:action.payload},

[LOGIN_FAILED]:{...state,error:action.payload}

}

你如何看待这种方法？它对 switch 来说可能还能一些限制，但对于 reducer 来说可能是一种更好的方案。

但是，此代码的性能如何？

性能怎么样？

switch 的性能优于字典的写法。我们可以使用下面的事例测试一下：

console.time("sample");

for(leti=0;i<2000000;i++){

constnextState=authReducer(authState,{

type:LOGIN_SUCCESS,

payload:"some_token"

});

}

console.timeEnd("sample");

测量它们十次左右,

fortin{1..10};donodeswitch.js>>switch.txt;done

作者：Valentino Gagliardi 译者：前端小智 来源：valentinog

原文：https://codeburst.io/alternative-to-javascripts-switch-statement-with-a-functional-twist-3f572787ba1c

JavaScript中Switch语句的用法是什么？

除了if...else之外，JavaScript还有一个称为switch语句的功能。switch是一种条件语句，它将针对多种可能的情况评估表达式，并根据匹配的情况执行一个或多个代码块。switch语句与包含许多其他if块的条件语句密切相关，并且它们通常可以互换使用。JavaScript中Switch语句的用法是什么？

接下来我们将学习如何使用switch语句，以及如何使用相关的关键字case，break和default。最后，我们将介绍如何在switch语句中使用多个case。

Switch

switch语句计算表达式并作为匹配大小写的结果执行代码。起初它看起来有点令人生畏，但基本语法类似于if语句。它将始终使用switch（）{}编写，括号中包含要测试的表达式，以及包含要执行的潜在代码的花括号。

下面是一个带有两个case语句的switch语句和一个称为default的回退的示例。

switch(expression){

casex:

//executecasexcodeblock

break;

casey:

//executecaseycodeblock

break;

default:

//executedefaultcodeblock

}

遵循上面代码块的逻辑，这是将要发生的事件序列：

表达式被评估

第一个case，x将针对表达式进行测试。如果匹配，则代码将执行，break关键字将结束该switch块。

如果它不匹配，x将跳过，y并将针对表达式测试案例。如果y匹配表达式，代码将执行并退出switch块。

如果所有情况都不匹配，则default代码块将运行。

让我们按照上面的语法制作一个switch语句的工作示例。在此代码块中，我们将使用新的Date（）方法找到一周中的当前日期，并使用getDay（）来打印与当天相对应的数字。1代表星期一，一直代表7代表星期日。我们将从设置变量开始。

1

constday=newDate().getDay();

使用switch，我们将在一周中的每一天向控制台发送消息。程序将按从上到下的顺序运行以查找匹配项，一旦找到一个，该break命令将停止该switch块继续评估语句。

week.js

//Setthecurrentdayoftheweektoavariable,with1beingMondayand7beingSunday

constday=newDate().getDay();

switch(day){

case1:

console.log(\"HappyMonday!\");

break;

case2:

console.log(\"It\'sTuesday.Yougotthis!\");

break;

case3:

console.log(\"Humpdayalready!\");

break;

case4:

console.log(\"Justonemoreday\'tiltheweekend!\");

break;

case5:

console.log(\"HappyFriday!\");

break;

case6:

console.log(\"HaveawonderfulSaturday!\");

break;

case7:

console.log(\"It\'sSunday,timetorelax!\");

break;

default:

console.log(\"Somethingwenthorriblywrong...\");

}

Output

\'Justonemoreday\'tiltheweekend!\'

此代码在星期四进行了测试，对应于4，因此控制台输出为Justonemoreday\'tiltheweekend!。根据您测试代码的星期几，您的输出会有所不同。我们default在最后包含一个块以便在出现错误时运行，在这种情况下不应该发生，因为一周只有7天。例如，我们也可能只有周一到周五的打印结果，并且该default块可能在周末也有相同的信息。

如果我们在每个语句中省略了break关键字，则其他case语句都不会被评估为true，但程序将继续检查直到它到达结尾。为了使我们的程序更快，更高效，我们包括break。

SwitchRanges

在某种情况下，您需要评估switch块中的一系列值，而不是像上面示例中的单个值。我们可以通过将表达式设置为true并在每个case语句中执行操作来完成此操作。

为了使这更容易理解，我们制作了一个简单的评分应用程序，它将获得一个数字分数并将其转换为字母等级，具有以下要求。

●等级90及以上是A

●等级80到89是B

●等级70到79是C

●等级60到69是D

●等级59或以下是F

现在我们可以将其写为switch语句。由于我们正在检查范围，因此我们将在每种情况下执行操作以检查每个表达式是否正在评估为true，然后在满足true要求后突破语句。

grades.js

//Setthestudent\'sgrade

constgrade=87;

switch(true){

//Ifscoreis90orgreater

casegrade>=90:

console.log(\"A\");

break;

//Ifscoreis80orgreater

casegrade>=80:

console.log(\"B\");

break;

//Ifscoreis70orgreater

casegrade>=70:

console.log(\"C\");

break;

//Ifscoreis60orgreater

casegrade>=60:

console.log(\"D\");

break;

//Anything59orbelowisfailing

default:

console.log(\"F\");

Output

\'B\'

在此示例中，要计算的括号中的表达式为true。这意味着任何评估为true的情况都是匹配的。

就像使用else一样，switch从上到下进行评估，并接受第一个真正的匹配。因此，即使我们的等级变量为87，因此对于C和D也评估为真，第一个匹配是B，它将是输出。

MultipleCases

您可能会遇到多个case应具有相同输出的代码。为了实现这一点，您可以为每个代码块使用多个case。

为了测试这个，我们将制作一个小的应用程序，将当前月份与适当的季节相匹配。首先，我们将使用新的Date（）方法查找与当前月份对应的数字，并将其应用于月份变量。

为简单起见，我们的应用程序将输出具有以下规格的四季：

●冬季：一月，二月和三月

●春天：四月，五月和六月

●夏季：七月，八月和九月

●秋天：十月，十一月和十二月

以下是我们的代码。

seasons.js

//Getnumbercorrespondingtothecurrentmonth,with0beingJanuaryand11beingDecember

constmonth=newDate().getMonth();

switch(month){

//January,February,March

case0:

case1:

case2:

console.log(\"Winter\");

break;

//April,May,June

case3:

case4:

case5:

console.log(\"Spring\");

break;

//July,August,September

case6:

case7:

case8:

console.log(\"Summer\");

break;

//October,November,December

case9:

case10:

case11:

console.log(\"Autumn\");

break;

default:

console.log(\"Somethingwentwrong.\");

}

当我们运行代码时，我们将根据上面的规范接收识别当前季节的输出。

Output

Summer

出版时的当月是8，这与“夏季”季节产出的一个case陈述相对应。

在本文中，我们回顾了switch语句，这是一种条件语句，用于评估表达式并根据匹配结果输出不同的值。我们使用范围和多个case语句检查了switch语句。