javascript开关_JavaScript开关案例简介

最新推荐文章于 2023-02-27 17:43:41 发布

cumichun6193

最新推荐文章于 2023-02-27 17:43:41 发布

阅读量411

点赞数 1

文章标签：字符串 java python javascript css ViewUI

原文链接：https://www.freecodecamp.org/news/introduction-to-javascript-switch-cases/

版权

javascript开关

In this short article, I will introduce you to JavaScript switch cases and how to use them with practical examples.

在这篇简短的文章中，我将向您介绍JavaScript切换案例以及如何通过实际示例使用它们。

This article will explain better with more practical examples to help you understand switch cases in depth.

本文将通过更实际的示例更好地解释，以帮助您深入了解切换案例。

先决条件。 (Prerequisites.)

Basic JavaScript knowledge
基本JavaScript知识
Code editor
代码编辑器
Web Browser
网页浏览器
Your brain :)
你的脑：)

A switch statement can basically replace multiple if checks in JavaScript.

if在JavaScript中进行检查， if switch语句基本上可以替换多个语句。

It gives a more descriptive way to compare a value with multiple variants.

它提供了一种更具描述性的方式来将值与多个变量进行比较。

开关语法 (The Switch Syntax)

The switch has one or more case blocks and an optional default case.

switch具有一个或多个case框和一个可选的默认大小写。

switch(x) {
  case 'value1':  // if (x === 'value1')
    //code here
    [break]

  case 'value2':  // if (x === 'value2')
    //code here
    [break]

  default:
    //code here
    [break]
}

The value of x is checked for strict equality to the value from the first case (that is, value1) then to the second (value2) and so on.
检查x的值是否严格等于从第一种case (即value1 )到第二种情况( value2 )的value2 ，依此类推。
If the equality is found, switch starts to execute the code starting from the corresponding case, until the nearest break(or until the end of switch).
如果找到相等，则switch从相应的case开始执行代码，直到最近的break (或直到switch结束)。
If no case is matched then the default code is executed (if it exists).
如果没有大小写匹配，则执行default代码(如果存在)。

一些真实的例子 (Some few real examples)

Simple Play & Pause Switch
简单播放和暂停开关

The switch statement can be used for multiple branches based on a number or string:

switch语句可用于基于数字或字符串的多个分支：

switch (movie) {
  case 'play':
    playMovie();
    break;
  case 'pause':
    pauseMovie();
    break;
  default:
    doNothing();
}

If you don’t add a break statement, the execution will "fall through" to the next level. It's essential that you deliberately label the fall through with a comment if you really meant it to aid debugging:

如果不添加break语句，执行将“下降”到下一个级别。如果您确实要帮助调试，请务必在注释中故意标记掉处：

switch (movie) {
  case 'play': // fallthrough
  case 'pause':
    pauseMovie();
    break;
  default:
    doNothing();
}

The default clause is optional. You can have expressions in both the switch part and the cases if you like; comparisons take place between the two using the === operator:

默认子句是可选的。如果愿意，您可以在switch部分和case中都有表达式；使用===运算符在两者之间进行比较：

switch (3 + 7) {
  case 5 + 5:
    correct();
    break;
  default:
    neverhappens();
}

Simple Maths Calc Switch
简单的数学计算开关

let average = 2 + 6;

switch (average) {
  case 4:
    alert( 'Too small' );
    break;
  case 8:
    alert( 'Exactly!' );
    break;
  case 10:
    alert( 'Too large' );
    break;
  default:
    alert( "Incorrect values!" );
}

Here the switch starts to compare average from the first case variant that is 4. The match fails.

在此， switch开始比较第一种case average 4 。比赛失败。

Then 8. That’s a match, so the execution starts from case 8until the nearest break.

然后8 。这是一个匹配，因此执行从case 8开始，直到最近的break为止。

If there is no break then the execution continues with the next case without any checks.

如果没有 break 则继续执行下 case 不进行任何检查。

Here is an example without break:

这里有没有一个例子break ：

let average = 2 + 6;

switch (average) {
  case 4:
    alert( 'Too small' );
  case 8:
    alert( 'Exactly!' );
  case 10:
    alert( 'Too big' );
  default:
    alert( "Incorrect values!" );
}

In the example above we’ll see sequential execution of three alerts:

在上面的示例中，我们将看到三个alerts顺序执行：

alert( 'Exactly!' );
alert( 'Too big' );
alert( "Incorrect values!" );

getDay() method switch case
getDay()方法切换案例

The getDay() method returns the weekday as a number between 0 and 6.

getDay()方法以0到6之间的数字返回工作日。

Sunday=0, Monday=1, Tuesday=2 , Wednesday=3, Thursday=4, Friday=5, Saturday=6

周日= 0，周一= 1，周二= 2，周三= 3，周四= 4，周五= 5，周六= 6

This example uses the weekday number to calculate the weekday name:

本示例使用工作日编号来计算工作日名称：

switch (new Date().getDay()) {
  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";
}

The result of day will be the current weekday in day format

日的结果将是日格式的当前工作日

PS: This would change according to when you’re reading this article

PS：这将根据您阅读本文的时间而改变

I wrote this artcle on 13/06/2019 which is a Thursday, so the result would be:

我在2019年6月13日(星期四)写了这篇文章，结果将是：

Thursday

默认关键字 (The default Keyword)

The default keyword specifies the code to run if there is no case match, more like an else statement:

default关键字指定在没有大小写匹配的情况下要运行的代码，更类似于else语句：

switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break; 
  case 0:
    text = "Today is Sunday";
    break; 
  default: 
    text = "Its not weekend yet!";
}

The result of text will be:

文本结果将是：

Its not weekend yet!

The default case does not have to be the last case in a switch block:

默认大小写不必一定是switch块中的最后一个大小写：

switch (new Date().getDay()) {
  default: 
    text = "Its not weekend yet!";
    break;
  case 6:
    text = "Today is Saturday";
    break; 
  case 0:
    text = "Today is Sunday";
}