JavaScript 提供了丰富的控制结构，包括条件语句和循环语句。本章将详细介绍这些控制结构及其应用。

1. 条件语句

条件语句允许代码根据不同的条件执行不同的操作。这对于编写逻辑复杂的程序至关重要。

if 语句

if 语句是最基本的条件语句之一，通常用于在某个条件满足时执行代码块。其语法如下：

  1. if (条件) {
  2.   // 条件为 true 时执行的代码
  3. }

示例：

  1. let age = 20;
  2. if (age >= 18) {
  3.   console.log("你已成年");
  4. }

if-else 语句

if-else 语句用于在条件不满足时执行另一段代码。其语法如下：

  1. if (条件) {
  2.   // 条件为 true 时执行的代码
  3. } else {
  4.   // 条件为 false 时执行的代码
  5. }

示例：

  1. let age = 16;
  2. if (age >= 18) {
  3.   console.log("你已成年");
  4. } else {
  5.   console.log("你未成年");
  6. }

if-elseif-else 语句

当有多个条件需要判断且每个条件对应不同的操作时，可以使用 if-elseif-else 语句。其语法如下：

  1. if (条件1) {
  2.   // 条件1为 true 时执行的代码
  3. } else if (条件2) {
  4.   // 条件2为 true 时执行的代码
  5. } else {
  6.   // 条件1和条件2都为 false 时执行的代码
  7. }

示例：

  1. let score = 85;
  2. if (score >= 90) {
  3.   console.log("成绩为A");
  4. } else if (score >= 80) {
  5.   console.log("成绩为B");
  6. } else if (score >= 70) {
  7.   console.log("成绩为C");
  8. } else {
  9.   console.log("成绩为D");
  10. }

三元运算符

三元运算符是一种简洁的条件判断方式，适用于简单的条件语句。其语法如下：

  1. 条件 ? 结果1 : 结果2;

示例：

  1. let age = 20;
  2. let message = age >= 18 ? "你已成年" : "你未成年";
  3. console.log(message);

2. 循环语句

循环语句允许代码重复执行，直到满足某个条件。常见的循环语句包括 for 循环、while 循环和 do-while 循环。

for 循环

for 循环是最常用的循环语句之一，其语法如下：

  1. for (初始化; 条件; 更新) {
  2.   // 循环体代码
  3. }

示例：

  1. for (let i = 0; i < 5; i++) {
  2.   console.log("当前值为：" + i);
  3. }

while 循环

while 循环在条件为 true 时重复执行代码块。其语法如下：

  1. while (条件) {
  2.   // 循环体代码
  3. }

示例：

  1. let i = 0;
  2. while (i < 5) {
  3.   console.log("当前值为：" + i);
  4.   i++;
  5. }

do-while 循环

do-while 循环与 while 循环类似，但它会先执行一次代码块，然后再判断条件是否满足。其语法如下：

  1. do {
  2.   // 循环体代码
  3. } while (条件);

示例：

  1. let i = 0;
  2. do {
  3.   console.log("当前值为：" + i);
  4.   i++;
  5. } while (i < 5);

循环中的 break 与 continue

break 和 continue 是用于控制循环的两个关键字。

  • break：终止当前循环。
  1. for (let i = 0; i < 5; i++) {
  2.   if (i === 3) {
  3.     break;
  4.   }
  5.   console.log("当前值为：" + i);
  6. }
  • continue：跳过当前迭代，继续下一次循环。
  1. for (let i = 0; i < 5; i++) {
  2.   if (i === 3) {
  3.     continue;
  4.   }
  5.   console.log("当前值为：" + i);
  6. }

3. 数组

数组是存储多个值的集合。JavaScript 提供了多种数组操作的方法。

数组的定义与操作

定义数组可以使用方括号 []，并用逗号分隔元素。

  1. let fruits = ["苹果", "香蕉", "橙子"];

访问数组元素使用索引值，索引从 0 开始。

  1. console.log(fruits[0]); // 输出：苹果

常用数组方法

JavaScript 提供了丰富的数组操作方法：

  • push：在数组末尾添加元素。
  1. fruits.push("葡萄");
  2. console.log(fruits); // 输出：["苹果", "香蕉", "橙子", "葡萄"]
  • pop：移除数组末尾的元素。
  1. fruits.pop();
  2. console.log(fruits); // 输出：["苹果", "香蕉",```markdown
  3. "橙子"]
  • shift：移除数组开头的元素。
  1. fruits.shift();
  2. console.log(fruits); // 输出：["香蕉", "橙子"]
  • unshift：在数组开头添加元素。
  1. fruits.unshift("草莓");
  2. console.log(fruits); // 输出：["草莓", "香蕉", "橙子"]

数组的迭代方法

JavaScript 还提供了一些用于数组迭代的高级方法，如 forEach、map、filter 和 reduce 等。

  • forEach：对数组中的每个元素执行一次提供的函数。
  1. fruits.forEach(function (fruit) {
  2.   console.log(fruit);
  3. });
  4. // 输出：
  5. // 草莓
  6. // 香蕉
  7. // 橙子
  • map：创建一个新数组，数组中的每个元素是对原数组中的每个元素执行一个提供的函数后的返回值。
  1. let lengths = fruits.map(function (fruit) {
  2.   return fruit.length;
  3. });
  4. console.log(lengths); // 输出：[2, 2, 2]
  • filter：创建一个新数组，数组中的元素是通过提供函数的测试的所有元素。
  1. let longerFruits = fruits.filter(function (fruit) {
  2.   return fruit.length > 2;
  3. });
  4. console.log(longerFruits); // 输出：[]
  • reduce：对数组中的每个元素执行一个提供的函数，将其结果累积为单个值。
  1. let totalLength = fruits.reduce(function (total, fruit) {
  2.   return total + fruit.length;
  3. }, 0);
  4. console.log(totalLength); // 输出：6

实战练习

通过一个小练习来巩固我们对数组的理解和应用。我们将编写一个程序，计算一个班级学生的平均成绩。

  1. let scores = [85, 90, 78, 92, 88];
  3. // Step 1: 计算总分
  4. let totalScore = scores.reduce(function (total, score) {
  5.   return total + score;
  6. }, 0);
  8. // Step 2: 计算平均分
  9. let averageScore = totalScore / scores.length;
  11. console.log("班级平均成绩为：" + averageScore);

在这段代码中，我们首先使用 reduce 方法计算总成绩，然后通过总成绩除以学生人数得到平均成绩。