探索 JavaScript 中的循环结构

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,学生将深入探索 JavaScript 的循环结构,学习各种迭代技术,这些技术是编程逻辑的基础。实验涵盖了基本的循环类型,包括 while 循环、do-while 循环、for 循环和 for-in 循环,并通过实际的编码示例和渐进式学习,提供每种结构的动手实践机会。

参与者将从理解 while 循环的基本语法开始,学习如何创建受控的迭代,并执行诸如计数和条件搜索等任务。随着学习的深入,他们将练习实现不同的循环结构,比较它们的独特特性和使用场景,从而全面理解如何利用循环来操作数据、遍历数组,并在 JavaScript 中创建动态的编程解决方案。

理解 While 循环的语法和基本用法

在这一步中,你将学习 JavaScript 中 while 循环的基本语法和用法。while 循环是一种基本的控制结构,它允许你在指定条件为真时重复执行一段代码。

让我们从创建一个新的 JavaScript 文件开始,来探索 while 循环。打开 WebIDE,在 ~/project 目录下创建一个名为 whileLoop.js 的文件。

// 创建一个简单的 while 循环,从 1 计数到 5
let count = 1;

while (count <= 5) {
  console.log(`当前计数: ${count}`);
  count++;
}

现在,使用 Node.js 运行这个 JavaScript 文件以查看输出:

node ~/project/whileLoop.js

示例输出:

当前计数: 1
当前计数: 2
当前计数: 3
当前计数: 4
当前计数: 5

让我们分解一下 while 循环的语法:

  • let count = 1; 在循环之前初始化一个计数器变量
  • while (count <= 5) 定义了循环继续执行的条件
  • console.log() 打印当前 count 的值
  • count++ 在每次迭代中递增计数器

现在,让我们创建一个更实际的示例,展示一个带有更复杂条件的 while 循环:

// 创建一个 while 循环,找到第一个能被 3 和 5 整除的数字
let number = 1;

while (!(number % 3 === 0 && number % 5 === 0)) {
  number++;
}

console.log(`第一个能被 3 和 5 整除的数字: ${number}`);

再次运行文件:

node ~/project/whileLoop.js

示例输出:

第一个能被 3 和 5 整除的数字: 15

这个示例展示了如何使用 while 循环来搜索特定条件或执行迭代任务。

练习使用 Do-While 循环进行增量迭代

在这一步中,你将学习 JavaScript 中的 do-while 循环。它与 while 循环类似,但有一个关键区别:代码块在检查条件之前至少会执行一次。

使用 WebIDE 在 ~/project 目录下创建一个名为 doWhileLoop.js 的新文件:

// 演示一个带有用户输入模拟的 do-while 循环
let attempts = 0;
let secretNumber = 7;
let guess;

do {
  // 模拟一个 1 到 10 之间的随机猜测
  guess = Math.floor(Math.random() * 10) + 1;
  attempts++;

  console.log(`尝试 ${attempts}: 猜测值为 ${guess}`);

  if (guess === secretNumber) {
    console.log(`恭喜!你在 ${attempts} 次尝试中猜中了数字。`);
  }
} while (guess !== secretNumber);

运行 JavaScript 文件以查看 do-while 循环的工作原理:

node ~/project/doWhileLoop.js

示例输出:

尝试 1: 猜测值为 3
尝试 2: 猜测值为 9
尝试 3: 猜测值为 7
恭喜!你在 3 次尝试中猜中了数字。

do-while 循环的关键特性:

  • 代码块在检查条件之前至少会执行一次
  • 条件在每次迭代结束时检查
  • 适用于需要确保代码至少运行一次的场景

让我们创建另一个示例来进一步说明 do-while 循环:

// 使用 do-while 循环演示增量迭代
let total = 0;
let i = 1;

do {
  total += i;
  console.log(`当前总和: ${total}, 当前数字: ${i}`);
  i++;
} while (total < 10);

console.log(`最终总和: ${total}`);

再次运行文件:

node ~/project/doWhileLoop.js

示例输出:

当前总和: 1, 当前数字: 1
当前总和: 3, 当前数字: 2
当前总和: 6, 当前数字: 3
当前总和: 10, 当前数字: 4
最终总和: 10

这个示例展示了如何使用 do-while 循环进行增量迭代,确保代码块在检查终止条件之前至少运行一次。

使用 For 循环实现可控迭代

在这一步中,你将学习 JavaScript 中的 for 循环,它提供了一种简洁的方式来实现可控的迭代,具有明确的起始、结束以及递增/递减机制。

使用 WebIDE 在 ~/project 目录下创建一个名为 forLoop.js 的新文件:

// 基本的 for 循环,打印数字 1 到 5
console.log("基本计数循环:");
for (let i = 1; i <= 5; i++) {
  console.log(`当前数字: ${i}`);
}

// 使用 for 循环计算数字的阶乘
console.log("\n阶乘计算:");
let number = 5;
let factorial = 1;

for (let j = 1; j <= number; j++) {
  factorial *= j;
}

console.log(`${number} 的阶乘是: ${factorial}`);

// 使用 for 循环遍历数组
console.log("\n数组遍历:");
let fruits = ["apple", "banana", "cherry", "date"];

for (let k = 0; k < fruits.length; k++) {
  console.log(`索引 ${k} 处的水果: ${fruits[k]}`);
}

运行 JavaScript 文件以查看不同的 for 循环示例:

node ~/project/forLoop.js

示例输出:

基本计数循环:
当前数字: 1
当前数字: 2
当前数字: 3
当前数字: 4
当前数字: 5

阶乘计算:
5 的阶乘是: 120

数组遍历:
索引 0 处的水果: apple
索引 1 处的水果: banana
索引 2 处的水果: cherry
索引 3 处的水果: date

让我们分解一下 for 循环的语法:

  • for (初始化; 条件; 递增/递减) 是标准结构
  • let i = 1 初始化循环计数器
  • i <= 5 定义了循环继续的条件
  • i++ 在每次迭代后递增计数器

创建另一个示例,展示更复杂的 for 循环用法:

// 嵌套 for 循环创建乘法表
console.log("乘法表:");
for (let row = 1; row <= 5; row++) {
  let rowOutput = "";
  for (let col = 1; col <= 5; col++) {
    rowOutput += `${row * col}\t`;
  }
  console.log(rowOutput);
}

再次运行文件:

node ~/project/forLoop.js

示例输出:

乘法表:
1	2	3	4	5
2	4	6	8	10
3	6	9	12	15
4	8	12	16	20
5	10	15	20	25

这个示例展示了如何使用嵌套的 for 循环来创建更复杂的迭代模式。

使用 For-In 循环遍历数组元素

在这一步中,你将学习 JavaScript 中的 for-in 循环,它提供了一种简单的方式来遍历对象的属性或数组的元素。

使用 WebIDE 在 ~/project 目录下创建一个名为 forInLoop.js 的新文件:

// 使用 for-in 循环遍历数组
let fruits = ["apple", "banana", "cherry", "date"];

console.log("遍历数组索引:");
for (let index in fruits) {
  console.log(`索引: ${index}, 水果: ${fruits[index]}`);
}

// 使用 for-in 循环遍历对象
let student = {
  name: "John Doe",
  age: 22,
  major: "Computer Science",
  gpa: 3.8
};

console.log("\n遍历对象属性:");
for (let property in student) {
  console.log(`${property}: ${student[property]}`);
}

// 实际示例:计算商品总价
let shoppingCart = [
  { name: "Laptop", price: 1000 },
  { name: "Headphones", price: 100 },
  { name: "Mouse", price: 50 }
];

console.log("\n计算总价:");
let totalPrice = 0;
for (let index in shoppingCart) {
  totalPrice += shoppingCart[index].price;
}
console.log(`总价: $${totalPrice}`);

运行 JavaScript 文件以查看 for-in 循环的实际效果:

node ~/project/forInLoop.js

示例输出:

遍历数组索引:
索引: 0, 水果: apple
索引: 1, 水果: banana
索引: 2, 水果: cherry
索引: 3, 水果: date

遍历对象属性:
name: John Doe
age: 22
major: Computer Science
gpa: 3.8

计算总价:
总价: $1150

关于 for-in 循环的关键点:

  • 适用于数组和对象
  • 遍历数组的索引或对象的属性
  • 提供了一种简单的方式来访问元素,而无需使用传统的基于索引的循环
  • 在用于数组时需要谨慎,因为它会遍历所有可枚举的属性

让我们通过另一个示例来展示其灵活性:

// 使用 for-in 循环过滤和转换数据
let grades = {
  math: 85,
  science: 92,
  english: 78,
  history: 88
};

console.log("过滤高于 80 分的成绩:");
for (let subject in grades) {
  if (grades[subject] > 80) {
    console.log(`${subject}: ${grades[subject]}`);
  }
}

再次运行文件:

node ~/project/forInLoop.js

示例输出:

过滤高于 80 分的成绩:
math: 85
science: 92
history: 88

比较和对比不同的循环结构

在这一步中,你将探索 JavaScript 中各种循环结构的区别,并学习如何有效地使用每种类型的循环。

使用 WebIDE 在 ~/project 目录下创建一个名为 loopComparison.js 的新文件:

// 演示不同循环结构完成相同任务

// 1. While 循环:适用于迭代次数未知的情况
console.log("While 循环示例:");
let whileCounter = 1;
while (whileCounter <= 5) {
  console.log(`While 循环: ${whileCounter}`);
  whileCounter++;
}

// 2. Do-While 循环:确保至少执行一次
console.log("\nDo-While 循环示例:");
let doWhileCounter = 1;
do {
  console.log(`Do-While 循环: ${doWhileCounter}`);
  doWhileCounter++;
} while (doWhileCounter <= 5);

// 3. For 循环:适用于已知迭代次数的情况
console.log("\nFor 循环示例:");
for (let forCounter = 1; forCounter <= 5; forCounter++) {
  console.log(`For 循环: ${forCounter}`);
}

// 4. For-In 循环:遍历对象属性
console.log("\nFor-In 循环示例:");
let student = {
  name: "John Doe",
  age: 22,
  major: "Computer Science"
};

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

// 5. 比较循环性能
console.log("\n循环性能比较:");
const iterations = 1000000;

console.time("While 循环");
let a = 0;
while (a < iterations) {
  a++;
}
console.timeEnd("While 循环");

console.time("For 循环");
for (let b = 0; b < iterations; b++) {}
console.timeEnd("For 循环");

运行 JavaScript 文件以查看比较结果:

node ~/project/loopComparison.js

示例输出:

While 循环示例:
While 循环: 1
While 循环: 2
While 循环: 3
While 循环: 4
While 循环: 5

Do-While 循环示例:
Do-While 循环: 1
Do-While 循环: 2
Do-While 循环: 3
Do-While 循环: 4
Do-While 循环: 5

For 循环示例:
For 循环: 1
For 循环: 2
For 循环: 3
For 循环: 4
For 循环: 5

For-In 循环示例:
name: John Doe
age: 22
major: Computer Science

循环性能比较:
While 循环: 2.345ms
For 循环: 1.876ms

关键区别:

  1. While 循环:

    • 适用于迭代次数未知的情况
    • 每次迭代前检查条件
    • 如果初始条件为假,可能不会执行
  2. Do-While 循环:

    • 确保至少执行一次
    • 每次迭代后检查条件
    • 适用于需要至少运行一次代码的场景
  3. For 循环:

    • 适用于已知迭代次数的情况
    • 语法紧凑,包含初始化、条件和递增
    • 最常用于数组遍历和计数
  4. For-In 循环:

    • 专门用于遍历对象属性
    • 适用于对象和数组
    • 提供索引或属性名称

让我们创建一个最终示例来演示如何选择合适的循环:

// 为不同场景选择合适的循环
let numbers = [10, 20, 30, 40, 50];

// While 循环用于条件搜索
console.log("\n选择合适的循环:");
let searchValue = 30;
let index = 0;
while (index < numbers.length && numbers[index] !== searchValue) {
  index++;
}
console.log(`找到 ${searchValue} 在索引: ${index}`);

// For 循环用于简单迭代
console.log("平方数:");
for (let i = 0; i < numbers.length; i++) {
  console.log(`${numbers[i]} 的平方: ${numbers[i] * numbers[i]}`);
}

再次运行文件:

node ~/project/loopComparison.js

示例输出:

选择合适的循环:
找到 30 在索引: 2
平方数:
10 的平方: 100
20 的平方: 400
30 的平方: 900
40 的平方: 1600
50 的平方: 2500

总结

在本实验中,参与者探索了 JavaScript 中的各种循环结构,重点在于理解并实现不同类型的循环。实验从全面解析 while 循环开始,通过计数迭代和搜索特定数值条件的示例,展示了其基本语法和实际应用。参与者学习了如何初始化循环变量、定义循环条件以及使用递增运算符来控制循环的执行。

实验进一步涵盖了其他循环类型,包括 do-while 循环、for 循环和 for-in 循环,为每种结构提供了实际操作经验。通过比较和对比这些循环机制,学习者深入了解了如何为不同的编程场景选择合适的循环结构,从而提升了他们的 JavaScript 编程技能和对控制流机制的理解。

您可能感兴趣的其他 JavaScript 教程