JavaScript青少年简明教程：流程控制语句
JavaScript 提供了一系列的流程控制语句，用于控制代码的执行顺序。
条件语句
条件语句根据表达式的真假来执行不同的代码块。
if 语句
用于在条件为真时执行代码块。
语法：
if(条件){
条件满足执行的语句;
}
【或者写为：
if(条件)
{
条件满足执行的语句;
} 】
说明：这个“条件”一般是一个比较表达式。如果“条件”返回为true，则会执行大括号{}内部的程序；如果“条件”返回为false，则会直接跳过大括号{}内部的程序，然后按照顺序来执行后面的程序。
由大括号括起来的程序，我们又称为“语句块”。
流程控制图：
例：
let age = 18;
if (age >= 18) {console.log("You are an adult.");
}
if...else 语句
用于在条件为真时执行一个代码块，否则执行另一个代码块。
语法：
if(条件表达式){
条件成立执行的语句;
}Else{
条件不成立执行的语句;
}
【或者写为：
if(条件表达式)
{
条件成立执行的语句;
}
Else
{
条件不成立执行的语句;
} 】
流程控制图：
例：
let age = 16;
if (age >= 18) {console.log("You are an adult.");
} else {console.log("You are a minor.");
}
if...else if...else 语句
用于测试多个条件。
语法：
if(条件1){
语句或语句块1
}
else if (条件2){
语句或语句块1
}
…
Else{
语句或语句块K
}
说明：
多向选择语法看似很复杂，其实也是非常简单的，它只是在双向选择基础上再增加一个或多个选择分支罢了。
流程控制图：
例：
let age = 20;
if (age < 18) {console.log("未成年人");
} else if (age < 60) {console.log("成年人");
} else {console.log("老年人");
}
可以在 if 语句中嵌套另一个 if 语句，以处理更复杂的条件逻辑。例如，下面的代码检查一个数字是否为偶数，并且是否为正数：
const num = 6;if (num > 0) {if (num % 2 === 0) {console.log("Positive even number");} else {console.log("Positive odd number");}
} else {console.log("Not a positive number");
}
switch 语句
用于根据不同的条件执行不同的代码块。
语法：
switch(判断值){
case 取值1:
语块1;
[break;]
case 取值2:
语块2;
[break;]
case 取值3:
语块3;
[break;]
……
[default:
语句块k;
[break;]]
}
switch 语句用于基于表达式的值来执行不同的代码块。
在switch语句中，系统会从第1个case开始判断，从找到满足条件的部分执行。
default 子句在没有匹配的 case 时执行。[ ]部分代表是可选的，default 部分是可选的（不是必须有的），它将在所有 case 都不匹配时执行。
break 可避免“fall-through”（“贯穿”、“穿透）行为。break语句用于结束switch语句，从而使JavaScript仅仅执行对应的一个分支。如果没有了break语句，则该switch语句中“对应的分支”被执行后还会继续执行后面的分支。
【尽管在 default 后面通常不需要 break，default部分可以有 break也不会有任何问题。】
流程控制图：
或者
例：
let day = 3;
switch (day) {case 1:console.log("Monday");break;case 2:console.log("Tuesday");break;case 3:console.log("Wednesday");break;default:console.log("Invalid day");
}
循环语句
循环语句用于重复执行代码块。
for 循环
用于在已知次数时重复执行代码块。
语法：
for( 循环变量初始化 ; 条件表达式 ; 循环变量自增 ){
循环体
}
循环变量初始化用于初始化表达式，一般用于定义“用于计数的变量”的初始值；条件表达式，含有条件变量的表达式；循环变量自增，指的是执行循环体（也就是大括号中的程序语句）后的操作，用于更新条件变量。
流程控制图：
例：
for (let i = 0; i < 5; i++) {console.log(i);
}可以在 for 循环中嵌套另一个 for 循环，这在处理二维数组（矩阵）或需要更复杂处理的数据结构时非常有用。例如：
for (let i = 1; i <= 3; i++) {for (let j = 1; j <= 3; j++) {console.log(`i = ${i}, j = ${j}`);}
}
该示例将分别打印 i 和 j 的组合，从 i = 1, j = 1 到 i = 3, j = 3。
while 语句
用于在条件为真时重复执行代码块。
语法：
while(条件表达式){
循环体
}
说明：
如果“条件表达式”返回为true，则会执行大括号{}内部的循环体（也就是大括号中的程序语句），一直到条件为false才结束整个循环，然后再接着执行while语句后面的程序。
流程控制图：
例
let sum = 0;
let i = 1;while (i <= 5) {sum += i;i++;
}console.log("Sum:", sum); // 输出：Sum: 15
本例将计算从 1 到 5 的总和并输出，示例中，当 i 小于或等于 5 时，循环体内的代码将持续执行。每次迭代，i 的值会增加 1，直到条件变为假为止。
do...while 语句
类似于 while 循环，但先执行一次代码块，然后在条件为真时继续执行。
语法：
do{
循环体
}while(条件);
说明：
do…while语句首先是无条件执行循环体一次，然后再判断是否符合条件。如果符合条件，则重复执行循环体；如果不符合条件，则退出循环。
流程控制图：
例：
let sum = 0;
let i = 1;do {sum += i;i++;
} while (i <= 5);console.log("Sum:", sum); // 输出：Sum: 15
本例将计算从 1 到 5 的总和并输出，在这个示例中，不论 i 的初始值如何，循环体内的代码将至少执行一次，然后再检查条件。
通常在循环体内的代码需要含有改变循环条件的语句，以确保循环能够在适当的时间终止。否则，循环可能会变成无限循环，从而导致程序无法停止并可能导致系统崩溃或其他意外行为。
while 语句和do...while 语句的区别：
while 语句：先检查条件，再决定是否执行循环体内的代码。如果条件一开始为假，循环体内的代码将不会执行。
do...while 语句：先执行一次循环体内的代码，再检查条件。如果条件为假，循环将终止，但循环体内的代码至少会执行一次。
可以嵌套 while 或 do...while 循环来处理更复杂的情况。例如
let i = 1;while (i <= 3) {let j = 1;while (j <= 3) {console.log(`i = ${i}, j = ${j}`);j++;}i++;
}
在这个示例中，外层循环 i 控制的每次迭代，内层循环 j 将从 1 运行到 3
for...in 语句
用于遍历对象的可枚举属性。它适用于对象的属性遍历，但不适合数组或其他可迭代对象的遍历。
语法
for (variable in object){
代码块
}
variable 是用来存放每次迭代的属性名的变量。
object 是要迭代的对象。
流程控制图：
例：
const person = {name: "John",age: 30,city: "New York"
};for (let key in person) {console.log(`${key}: ${person[key]}`);
}
输出：
name: John
age: 30
city: New York
注意事项
1、for...in 不保证属性遍历的顺序，属性顺序是由 JavaScript 引擎定义的。
2、for...in 也会遍历对象从原型链上继承的可枚举属性。
3、不推荐在数组上使用 for...in，因为它遍历的是索引，并且可能会遍历到继承属性或非索引属性。
for...of 语句
用于遍历可迭代对象（包括数组、字符串、Map、Set、arguments 对象等）的元素。它无法直接遍历普通对象，因为普通对象不是可迭代对象。通常用于数组的值遍历。
语法
for (variable of iterable){
代码块
}
variable 是用来存放每次迭代的值的变量。
iterable 是一个可迭代对象。
流程控制图：
特别提示，在JavaScript中，当我们使用for...of循环时，它在背后使用了迭代器（iterator）协议。关于迭代器（iterator）和for...of 语句，初学者可以先了解，不要深究。下面给出几个for...of 语句示例。
例1、遍历数组
const array = [10, 20, 30, 40];for (let value of array) {console.log(value);
}
输出：
10
20
30
40
例2、遍历字符串
const str = "hello";for (let char of str) {console.log(char);
}
输出：
h
e
l
l
o
例3、遍历Map
const map = new Map();
map.set('name', 'John');
map.set('age', 30);for (let [key, value] of map) {console.log(`${key}: ${value}`);
}
输出：
name: John
age: 30
例4、遍历Set
const set = new Set([1, 2, 3, 4]);for (let value of set) {console.log(value);
}
输出：
1
2
3
4
注意事项
1、for...of 按照可迭代对象的顺序进行遍历，通常是插入的顺序。
2、只能用于可迭代对象，如果对非可迭代对象使用 for...of，会抛出错误。
注意事项
1、for...of 按照可迭代对象的顺序进行遍历，通常是插入的顺序。
2、只能用于可迭代对象，如果对非可迭代对象使用 for...of，会抛出错误。
for...in 和 for...of 的比较
适用对象：
for...in：适用于对象属性的遍历，不推荐用于数组，因为它遍历的是键名，可能会意外地遍历到继承的属性或原型链上的属性。
for...of：适用于可迭代对象（如数组、字符串、Map、Set 等），遍历的是元素的值。
返回值：
for...in：返回对象的可枚举属性的键名（字符串或 Symbol）。
for...of：返回可迭代对象的每个元素的值。
遍历顺序：
for...in：不保证顺序，特别是在对象上使用时，属性遍历的顺序是由 JavaScript 引擎定义的。
for...of：按元素插入的顺序遍历。
注意事项
避免在数组上使用 for...in：在数组上使用 for...in 可能会意外地遍历到数组的非索引属性或继承的属性。
break 语句
用于立即退出循环或 switch 语句。
循环一旦遇到 break，将不会继续执行，而是跳出循环。
例：
for (let i = 0; i < 5; i++) {if (i === 3) {break;}console.log(i);
}
输出：
0
1
2
continue 语句
continue 语句用于跳过当前循环中的剩余代码，并立即进入下一次循环迭代。在 for 循环中，它会跳到更新表达式，在 while 和 do...while 循环中，它会跳到条件检查部分。
例：
for (let i = 0; i < 10; i++) {if (i % 2 === 0) {continue;}console.log(i);
}
当 i 是偶数时，continue 语句执行，跳过 console.log(i)，直接进入下一次迭代。
输出：
1
3
5
7
9
在嵌套循环中，break 和 continue 通常只影响它们所在的最近一级循环。
标签（Label）与 break 和 continue
在 JavaScript 中，可以使用标签与 break 和 continue 结合来跳出多层循环或跳到指定循环。使用标签可以使 break 和 continue 控制多层循环。
例、嵌套循环中的 break
outerLoop: for (let i = 0; i < 3; i++) {for (let j = 0; j < 3; j++) {if (j === 1) {break outerLoop;}console.log(`i = ${i}, j = ${j}`);}
}
输出：
i = 0, j = 0
例、嵌套循环中的continue
outerLoop: for (let i = 0; i < 3; i++) {for (let j = 0; j < 3; j++) {if (j === 1) {continue outerLoop;}console.log(`i = ${i}, j = ${j}`);}
}
输出：
i = 0, j = 0
i = 1, j = 0
i = 2, j = 0
)
