🚰 JavaScript 流程控制
🔗 相关链接：流程控制与错误处理 - JavaScript | MDN (mozilla.org) (opens new window)
# if-else
只有当指定条件为 true 时，该语句才会执行代码。在条件为 false 时执行其他代码。
if (condition)
{
// 当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
2
3
4
5
6
7
8
if-else if-else
使用 if....else if...else 语句来选择多个代码块之一来执行。
🌰 例子：
if (time<10)
{
document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
document.write("<b>日安</b>");
}
else
{
document.write("<b>晚上好!</b>");
}
2
3
4
5
6
7
8
9
10
11
12
# switch
使用 switch 语句来选择要执行的多个代码块之一，使用 default 关键词来规定匹配不存在时做的事情：
switch(n)
{
case 1:
// 执行代码块 1
break;
case 2:
// 执行代码块 2
break;
default:
// 与 case 1 和 case 2 不同时执行的代码
}
2
3
4
5
6
7
8
9
10
11
🌰 例子：
var d=new Date().getDay();
switch (d)
{
case 6:
x="今天是星期六";
break;
case 0:
x="今天是星期日";
break;
default:
x="期待周末";
}
2
3
4
5
6
7
8
9
10
11
12
表达式都可以成为
switch/case的参数：switch和case都允许任意表达式。let a = "1"; let b = 0; switch (+a) { case b + 1: alert("this runs, because +a is 1, exactly equals b+1"); break; default: alert("this doesn't run"); }1
2
3
4
5
6
7
8
9
10
11case分组：共享同一段代码的几个case分支可以被分为一组：let a = 3; switch (a) { case 4: alert('Right!'); break; case 3: // (*) 下面这两个 case 被分在一组 case 5: alert('Wrong!'); alert("Why don't you take a math class?"); break; default: alert('The result is strange. Really.'); }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16其实是 switch 语句没有
break时的副作用。因为没有break，case 3会从(*)行执行到case 5。case中的相等是严格相等：被比较的值必须是相同的类型才能进行匹配。let arg = prompt("Enter a value?") switch (arg) { case '0': case '1': alert( 'One or zero' ); break; case '2': alert( 'Two' ); break; case 3: alert( 'Never executes!' ); break; default: alert( 'An unknown value' ) }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17由于输入的值类型为字符串，所以当输入 3 时，结果返回为
‘3’，所以case 3不会被执行。
# 循环
不同类型的循环
for： 循环代码块一定的次数for/in：循环遍历对象的属性while：当指定的条件为true时循环指定的代码块do/while：同样当指定的条件为true时循环指定的代码块
# for 循环
- 语句 1 初始化循环中所用的变量，是可选的，可以在语句 1 初始化任意（或者多个）值。
- 语句 2 用于评估初始变量的条件。语句 2 同样是可选的。语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。
- 语句 3 会增加初始变量的值。有多种用法。增量可以是负数 (
i--)，或者更大 (i=i+15)。语句 3 也可以省略（比如当循环内部有相应的代码时）。
🌰 例子：
for (var i=0; i<5; i++)
{
x=x + "该数字为 " + i + "<br>";
}
2
3
4
# for/in 循环
一般用于循环遍历对象的属性：
🌰 例子：
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名
{
txt = txt + person[x]
}
2
3
4
5
6
# while 循环
只要指定条件为 true，循环就可以一直执行代码块。
while (condition)
{
// 需要执行的代码
}
2
3
4
注意
如果设定的值陷入死循环，可能会导致浏览器崩溃。
🌰 例子：
while (i<5)
{
x = x + "The number is " + i + "<br>"
i++
}
2
3
4
5
# do-while 循环
do-while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。（该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行）
🌰 例子：
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
2
3
4
5
6
# 跳出循环
# break
break 语句可用于跳出循环。 break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：
for (i=0;i<10;i++)
{
if (i==3) break;
x=x + "The number is " + i + "<br>";
}
2
3
4
5
# continue
continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。
🌰 例子：在 for 循环中，例子在值为 3 时，直接跳过：
:::: tabs cache-lifetime="5" :options="{ useUrlFragment: false }"
::: tab javascript
function myFunction(){
var x="",i=0;
for (i = 0; i < 10; i++){
if (i == 3){
continue;
}
x = x + "该数字为 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
2
3
4
5
6
7
8
9
10
:::
::: tab result
该数字为 0
该数字为 1
该数字为 2
该数字为 4
该数字为 5
该数字为 6
该数字为 7
该数字为 8
该数字为 9
2
3
4
5
6
7
8
9
:::
::::
🌰 例子：在 while 循环中：
while (i < 10){
if (i == 3){
i++; //加入i++不会进入死循环
continue;
}
x= x + "该数字为 " + i + "<br>";
i++;
}
2
3
4
5
6
7
8
注意
continue语句（带有或不带标签引用）只能用在循环中。break语句（不带标签引用），只能用在循环或switch中。
换句话说，禁止 break/continue 在 ? 三元运算的右边。
# break/continue 标签
有时候我们需要一次从多层嵌套的循环中跳出来。在 input 之后的普通 break 只会打破内部循环。标签可以实现这一功能！
标签 是在循环之前带有冒号的标识符：
labelName: for (...) {
...
}
2
3
例如：
outer: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
let input = prompt(`Value at coords (${i},${j})`, '');
// 如果是空字符串或被取消，则中断并跳出这两个循环。
if (!input) break outer; // (*)
// 用得到的值做些事……
}
}
alert('Done!');
2
3
4
5
6
7
8
9
10
11
12
13
上述代码中，
break outer向上寻找名为outer的标签并跳出当前循环。因此，控制权直接从
(*)转至alert('Done!')。
continue 指令也可以与标签一起使用。在这种情况下，执行跳转到标记循环的下一次迭代。
注意
标签并不允许「跳到」所有位置：标签不允许我们跳到代码的任意位置。
例如： break 指令必须在代码块内。
break label; // 跳转至下面的 label 处（无效）
label: for (...)
2
3
从技术上讲，任何被标记的代码块都有效，例如：
label: {
// ...
break label; // 有效
// ...
}
2
3
4
5