switch
statement
评估
expression
，将表达式的值匹配到
case
子句，并执行
statements
关联
case
, as well as statements in
case
s that follow the matching
case
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
switch (expression) {
case value1:
//Statements executed when the
//result of expression matches value1
[break;]
case value2:
//Statements executed when the
//result of expression matches value2
[break;]
...
case valueN:
//Statements executed when the
//result of expression matches valueN
[break;]
[default:
//Statements executed when none of
//the values match the value of the expression
[break;]]
}
expression
case
子句。
case
valueN
可选
case
子句用于匹配
expression
。若
expression
matches the specified
valueN
, the statements inside the
case
clause are executed until either the end of the
switch
statement or a
break
.
default
可选
default
clause; if provided, this clause is executed if the value of
expression
doesn't match any of the
case
子句。
switch
statement first evaluates its expression. It then looks for the first
case
clause whose expression evaluates to the same value as the result of the input expression (using the
strict comparison
,
===
) and transfers control to that clause, executing the associated statements. (If multiple
case
s match the provided value, the first
case
that matches is selected, even if the
case
s are not equal to each other.)
If no matching
case
clause is found, the program looks for the optional
default
clause, and if found, transfers control to that clause, executing the associated statements. If no
default
clause is found, the program continues execution at the statement following the end of
switch
. By convention, the
default
clause is the last clause, but it does not need to be so.
可选
break
statement associated with each
case
label ensures that the program breaks out of
switch
once the matched statement is executed and continues execution at the statement following
switch
。若
break
is omitted, the program continues execution at the next statement in the
switch
statement. The
break
statement is not required if a
return
statement precedes it.
switch
在以下范例中，若
expr
evaluates to
Bananas
, the program matches the value with case
case 'Bananas'
and executes the associated statement. When
break
is encountered, the program breaks out of
switch
and executes the statement following
switch
。若
break
were omitted, the statement for the
case 'Cherries'
would also be executed.
switch (expr) {
case 'Oranges':
console.log('Oranges are $0.59 a pound.');
break;
case 'Apples':
console.log('Apples are $0.32 a pound.');
break;
case 'Bananas':
console.log('Bananas are $0.48 a pound.');
break;
case 'Cherries':
console.log('Cherries are $3.00 a pound.');
break;
case 'Mangoes':
case 'Papayas':
console.log('Mangoes and papayas are $2.79 a pound.');
break;
default:
console.log('Sorry, we are out of ' + expr + '.');
}
console.log("Is there anything else you'd like?");
break
?
If you forget a
break
then the script will run from the
case
where the criterion is met and will run the cases after that
regardless if a criterion was met
.
见此处范例：
var foo = 0;
switch (foo) {
case -1:
console.log('negative 1');
break;
case 0: // foo is 0 so criteria met here so this block will run
console.log(0);
// NOTE: the forgotten break would have been here
case 1: // no break statement in 'case 0:' so this case will run as well
console.log(1);
break; // it encounters this break so will not continue into 'case 2:'
case 2:
console.log(2);
break;
default:
console.log('default');
}
default
between cases?
Yes, you can! JavaScript will drop you back to the
default
if it can't find a match:
var foo = 5;
switch (foo) {
case 2:
console.log(2);
break; // it encounters this break so will not continue into 'default:'
default:
console.log('default')
// fall-through
case 1:
console.log('1');
}
It also works when you put
default
before all other
case
s.
case
Source for this technique is here:
Switch statement multiple cases in JavaScript (Stack Overflow)
case
: single operation
This method takes advantage of the fact that if there is no break below a
case
clause it will continue to execute the next
case
clause regardless if the
case
meets the criteria. (See the section
What happens if I forgot a
break
?
)
This is an example of a single operation sequential
case
statement, where four different values perform exactly the same.
var Animal = 'Giraffe';
switch (Animal) {
case 'Cow':
case 'Giraffe':
case 'Dog':
case 'Pig':
console.log('This animal will go on Noah\'s Ark.');
break;
case 'Dinosaur':
default:
console.log('This animal will not.');
}
case
: chained operations
This is an example of a multiple-operation sequential
case
clause, where, depending on the provided integer, you can receive different output. This shows you that it will traverse in the order that you put the
case
clauses, and it does not have to be numerically sequential. In JavaScript, you can even mix in definitions of strings into these
case
statements as well.
var foo = 1;
var output = 'Output: ';
switch (foo) {
case 0:
output += 'So ';
case 1:
output += 'What ';
output += 'Is ';
case 2:
output += 'Your ';
case 3:
output += 'Name';
case 4:
output += '?';
break;
case 5:
output += '!';
console.log(output);
break;
default:
console.log('Please pick a number from 0 to 5!');
}
The output from this example:
| Value | Log text |
|---|---|
foo
is
NaN
or not
1
,
2
,
3
,
4
,
5
，或
0
|
Please pick a number from 0 to 5! |
0
|
Output: So What Is Your Name? |
1
|
Output: What Is Your Name? |
2
|
Output: Your Name? |
3
|
Output: Name? |
4
|
Output: ? |
5
|
Output: ! |
switch
statements
With ECMAScript 2015 (ES6) support made available in most modern browsers, there will be cases where you would want to use
let
and
const
statements to declare block-scoped variables.
Take a look at this example:
const action = 'say_hello';
switch (action) {
case 'say_hello':
let message = 'hello';
console.log(message);
break;
case 'say_hi':
let message = 'hi';
console.log(message);
break;
default:
console.log('Empty action received.');
break;
}
This example will output the error
Uncaught SyntaxError: Identifier 'message' has already been declared
which you were not probably expecting.
This is because the first
let message = 'hello';
conflicts with second let statement
let message = 'hi';
even they're within their own separate case clauses
case 'say_hello':
and
case 'say_hi':
. Ultimately, this is due to both
let
statements being interpreted as duplicate declarations of the same variable name within the same block scope.
We can easily fix this by wrapping our
case
clauses with brackets:
const action = 'say_hello';
switch (action) {
case 'say_hello': { // added brackets
let message = 'hello';
console.log(message);
break;
} // added brackets
case 'say_hi': { // added brackets
let message = 'hi';
console.log(message);
break;
} // added brackets
default: { // added brackets
console.log('Empty action received.');
break;
} // added brackets
}
此代码现在会输出
hello
in the console as it should, without any errors at all.
| 规范 |
|---|
|
ECMAScript (ECMA-262)
在该规范中的 switch statement 定义。 |
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
switch
|
Chrome 1 | Edge 12 | Firefox 1 | IE 4 | Opera 4 | Safari 1 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 | nodejs 0.1.100 |
完整支持