当前位置：首页 > article >正文

第二部分：基础知识 5.控制流 --[JavaScript 新手村：开启编程之旅的第一步]

article 2025/2/1 23:51:33

第二部分：基础知识 5.控制流 --[JavaScript 新手村：开启编程之旅的第一步]

JavaScript 是一种广泛使用的编程语言，尤其在网页开发中。控制流（Control Flow）是指程序执行的顺序。通过控制流语句，你可以控制代码按照特定的逻辑顺序执行，而不是从上到下依次执行每一行。

1.条件语句:

if 语句：根据一个或多个条件来决定是否执行一段代码。
else 和 else if：与 if 一起使用，提供当条件不满足时的替代路径。
三元运算符 (condition ? exprIfTrue : exprIfFalse)：用于简洁地表达简单的条件选择。

下面是使用 JavaScript 条件语句的三个示例。每个示例都展示了不同的条件逻辑和用法。

示例 1: 使用 `if` 和 `else`

这个例子检查一个数字是正数、负数还是零。

let number = -5;

if (number > 0) {
    console.log("这是一个正数");
} else if (number < 0) {
    console.log("这是一个负数");
} else {
    console.log("这是零");
}

在这里插入图片描述

示例 2: 使用三元运算符

这里我们使用三元运算符来简化简单的条件判断。这个例子用于检查用户是否为成年人。

let age = 20;
let isAdult = age >= 18 ? "成年人" : "未成年人";

console.log(isAdult);

在这里插入图片描述

示例 3: 使用 `switch` 语句

switch 语句可以用来替代多个 else if 语句，当有多个可能的离散值时特别有用。这个例子根据用户的输入选择语言设置。

let language = 'en';

switch (language) {
    case 'en':
        console.log("Hello, world!");
        break;
    case 'es':
        console.log("¡Hola, mundo!");
        break;
    case 'fr':
        console.log("Bonjour, le monde!");
        break;
    default:
        console.log("Language not supported.");
}

以上三个示例展示了如何在不同的场景下使用条件语句来控制程序流。通过这些结构，你可以让代码更灵活地响应不同的输入或状态。

在这里插入图片描述

2.循环:

for 循环：用于已知迭代次数的情况下重复执行代码块。
while 循环：只要指定条件为真就重复执行代码块。
do...while 循环：类似于 while，但是它会在检查条件之前至少执行一次循环体。
for...in 循环：遍历对象的可枚举属性。
for...of 循环：遍历可迭代对象（如数组、字符串等）的值。

当然，以下是使用 JavaScript 中不同循环语句的五个示例。每个示例展示了不同的循环逻辑和用法。

示例 1: 使用 `for` 循环打印数字

这个例子使用 for 循环来打印从 0 到 4 的数字。

for (let i = 0; i < 5; i++) {
    console.log(i);
}

在这里插入图片描述

示例 2: 使用 `while` 循环计算总和

这里我们使用 while 循环来计算从 1 到 10 的整数之和。

let sum = 0;
let num = 1;

while (num <= 10) {
    sum += num;
    num++;
}

console.log("总和是: " + sum);

在这里插入图片描述

示例 3: 使用 `do...while` 循环确保至少执行一次

这个例子使用 do...while 循环来获取用户输入，并确保代码块至少被执行一次。

let userResponse;
let responseValid = false;

do {
    userResponse = prompt("请输入'yes'或'no':");
    if (userResponse === 'yes' || userResponse === 'no') {
        responseValid = true;
    }
} while (!responseValid);

console.log("你输入了: " + userResponse);

在这里插入图片描述

示例 4: 使用 `for...in` 遍历对象属性

这里我们使用 for...in 循环遍历一个对象的所有可枚举属性。

const person = {
    name: "Alice",
    age: 25,
    city: "Beijing"
};

for (let prop in person) {
    console.log(`${prop}: ${person[prop]}`);
}

在这里插入图片描述

示例 5: 使用 `for...of` 遍历数组元素

最后，这个例子使用 for...of 循环遍历数组中的每个元素。

const numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {
    console.log(number * number); // 打印每个数字的平方
}

在这里插入图片描述

这些示例展示了如何在不同的场景中使用循环语句来重复执行代码块，处理集合数据（如数组、对象），以及根据条件多次执行特定任务。通过这些结构，你可以让代码更灵活地处理一系列的数据或者重复性任务。

3.跳转语句:

break：立即退出最近的循环或switch语句。
continue：跳过当前循环的剩余部分，并继续下一次循环。
return：从函数中返回数据并结束函数的执行。

当然，下面是使用 JavaScript 中不同跳转语句的三个示例。每个示例展示了如何在特定情况下改变代码的执行流程。

示例 1: 使用 `break` 语句

这个例子展示了如何使用 break 语句来提前退出一个循环。这里我们创建了一个简单的 for 循环，当遇到特定条件时，使用 break 语句来立即退出循环。

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        console.log("找到了数字5，退出循环");
        break;
    }
    console.log("当前数字是: " + i);
}

在这里插入图片描述

示例 2: 使用 `continue` 语句

在这个例子中，我们将使用 continue 语句来跳过当前循环体中的剩余语句，并继续下一次循环。这里我们打印奇数，遇到偶数时跳过它们。

for (let i = 0; i <= 10; i++) {
    if (i % 2 === 0) {
        continue; // 如果是偶数，跳过本次循环剩下的部分
    }
    console.log("奇数是: " + i);
}

在这里插入图片描述

示例 3: 使用 `return` 语句从函数中返回

最后一个例子展示了如何使用 return 语句从函数中提前返回，这不仅可以用来结束函数的执行，还可以返回一个值给调用者。这里我们定义了一个函数，如果参数是一个正数，则返回它的平方；否则，直接返回 -1。

function squareIfPositive(num) {
    if (num > 0) {
        return num * num;
    } else {
        return -1;
    }
}

console.log(squareIfPositive(4)); // 输出 16
console.log(squareIfPositive(-3)); // 输出 -1