问题
I'm in JavaScript for a while, but there is still soo much things to learn.
Now, I had found some interesting facts about Switch statement.
I know that when you use case someValue: without break; it execute code in next case.
switch (x) {
case 0:
case 1:
doThis();
case 2:
doSomethingElse();
break;
}
So, when x is 0 or 1 it execute doThis() and even doSomethingElse(), but why?.
Will JavaScript interpret it into something like this:
switch (x) {
case (0 == x || 1 == x):
doThis();
doSomethingElse();
break;
case (2 == x):
doSomethingElse();
break;
}
or it creates code block for every case until brek appears, like this:
switch (x) {
case 0: {
case 1: {
doThis();
case 2: {
doSomethingElse();
}
}
}
}
Statements will be probraly rather this: (x === 0 && x == 0) || x === 1 && x == 1)
If it first case that I show, then why it not works when you write it with those conditions? And second case that I show is only very unclear idea, how it can works.
Can anybody explain it to me? Thanks.
回答1:
Basically, a switch statement is a flow with three lanes, where one lane it the outer program flow, a check lane and a case lane.
A change of a lane happens with a case statement, which yields true with a strict check of the expression of the switch statement and the value of the case clause, then you go to the case lane and stays as long as you not reach either break or the end of the switch statement.
As long as you are still in the check lane, any break statement between other checks or the end does not have any effect.
out lane lane
code side check case comment
--------------------- ----- ----- ---- -------------------------------------------------
v
switch (x) { v >>> v
case 0: ? >>> v if case is true, change lane
case 1: ? >>> v if case is true, change lane
doThis(); v v
case 2: ? >>> v if case is true, change lane
doSomethingElse(); v v
break; v <<<<<<<<<< . break statement, back to program flow
default: v ? >>> v change lane if value is not in other case clauses
v v
} v <<< . end of switch
v
回答2:
Review of structure of switch 1
It would be worth remembering the structure of switch
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;]]
}
What happens if I forget a break on a switch? (JS) 1
If you forget a break, the script will execute from where the condition is fulfilled and will execute the followingcase independently if this condition is fulfilled or not.
📃 Example 01
// EXAMPLE01
var x = 1;
switch (x) {
case 0:
case 1: // x is 1, therefore the condition is fulfilled and the next block is executed
doThis ();
// NOTE: the forgotten "break" should be here
case 2: // There is no "break" sentence in the 'case 12:', therefore this case will also be executed
doSomethingElse ();
break; // When finding a "break", the 'case 2:' will not be executed.
default:
console.log ('default');
}
/**
* Testing functions
*/
function doThis () {
console.log ('This case is one');
}
function doSomethingElse () {
console.log ('This case is two');
}Tips
Whenever a switch is executed, it should be putdefaultso that if it does not find the expected in thecasefinalize, with a desired action.
Comparisons in JS in switch
To compare, we must use the equality and identity comparators and if logic is necessary (See more in Operators) :
📃 Example 02-A
// EXAMPLE 02.A
var x = 2;
switch (true) {
case (x === 1 || x === 0): // Not true when x = 2;
doThis ();
doSomethingElse ();
break;
case (x === 2): // Will be executed
doSomethingElse ();
break;
default:
console.log ('default');
}
/**
* Testing functions
*/
function doThis () {
console.log ('This case is one');
}
function doSomethingElse () {
console.log ('This case is two');
}Or we could also use the < or > operators:
📃 Example 02-B
// EXAMPLE 02.B
x = 2;
switch (true) {
case (x === 1 || x === 0): // Not true when x = 2;
doThis ();
doSomethingElse ();
break;
case (x> 1 || x> 3): // Will be executed
doSomethingElse ();
break;
default:
console.log ('default');
}
/**
* Testing functions
*/
function doThis () {
console.log ('This case is one');
}
function doSomethingElse () {
console.log ('This case is two');
}Run a nested switch
To make a switch with a more advanced level in terms of comparison you could use conditional (if ... else, etc) or loops as continue.
📃 Example 03
// EXAMPLE 03
var x = 2;
switch (true) {
case (x === 1 || x === 0):
doThis ();
doSomethingElse ();
break;
case (x> 1 || x> 4): // Will be executed
if (x === 1) {
// It will not run
console.log ('Its not the desired number');
} else if (x === 2) {// It will be executed and it will end
doSomethingElse ()
}
break;
default:
console.log ('default');
}
/**
* Testing functions
*/
function doThis () {
console.log ('This case is one');
}
function doSomethingElse () {
console.log ('This case is two(2)');
}✏️ Annotations
Differences between === and == 3
The === and ! == operators are the strict comparison operators. This means that if the operands have different types, they are not the same. For example,
1 === "1" // false
1! == "1" // true
null === undefined // false
The operators == and ! = Are the comparison operators relaxed. That is, if the operands have different types, JavaScript tries to convert them to be comparable. For example,
1 == "1" // true
1! = "1" // false
null == undefined // true
It is worth mentioning that the operator == is not transitive, unlike ===.
"0" == 0 // true
0 == "" // true
"0" == "" // false
来源：https://stackoverflow.com/questions/54377350/javascript-understanding-cases-in-switch