JavaScript青少年简明教程：流程控制语句

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