JavaScript 循环全解：掌握代码重复的艺术 🔁

在编程中，我们经常需要重复执行一段代码。这就是循环（loops） 的用武之地。掌握各种类型的循环是编写高效、简洁 JavaScript 代码的关键。本文将带你全面回顾 JavaScript 中常见的几种循环类型及其控制语句。

for 循环：最经典的循环

for 循环是最常用的循环类型之一，因为它提供了对循环过程的完整控制。它由三个部分组成：

1. 初始化语句：在循环开始前执行一次，通常用来初始化一个计数器变量（例如 let i = 0）。
2. 条件表达式：在每次迭代开始前评估。如果条件为 true，循环体内的代码会执行；如果为 false，循环停止。
3. 增/减量语句：在每次迭代结束后执行，通常用于增加或减少计数器变量。

for (let i = 0; i < 5; i++) {
  console.log(i); // 输出: 0, 1, 2, 3, 4
}

遍历集合的利器：for...of 和 for...in

当需要遍历集合时，for...of 和 for...in 提供了更简洁的语法。

• for...of 循环：专门用于遍历可迭代对象（Iterables）的值，如数组、字符串、Map 和 Set。它是处理数组元素的最常用和最安全的方式。

  const numbers = [1, 2, 3, 4, 5];
  for (const num of numbers) {
    console.log(num); // 输出: 1, 2, 3, 4, 5
  }
  

• for...in 循环：主要用于遍历对象的可枚举属性。它会遍历对象的所有键（keys），包括继承的属性。因此，在使用时需要特别小心，通常建议在遍历对象时使用它。

  const fruit = {
    name: 'apple',
    color: 'red'
  };
  for (const prop in fruit) {
    console.log(`${prop}: ${fruit[prop]}`);
    // 输出: "name: apple", "color: red"
  }
  

基于条件的循环：while 和 do...while

这两种循环会基于一个条件来重复执行代码块，但它们的执行时机有所不同。

• while 循环：只要条件为 true，就会一直执行代码块。它会先检查条件，再执行代码。这意味着如果条件一开始就是 false，循环体将永远不会执行。

  let i = 5;
  while (i > 0) {
    console.log(i);
    i--;
  } // 输出: 5, 4, 3, 2, 1
  

• do...while 循环：这个循环的独特之处在于它会至少执行一次代码块，然后才检查条件。这非常适合需要至少运行一次的场景，例如获取用户输入直到输入有效为止。

  let userInput;
  do {
    userInput = prompt("请输入1到10之间的数字");
  } while (Number(userInput) < 1 || Number(userInput) > 10);
  alert("你输入了一个有效的数字！");
  

控制循环流程：break 和 continue

在循环内部，你可以使用特殊的语句来改变其默认行为。

• break 语句：用于立即终止整个循环。一旦遇到 break，程序会跳出当前循环，继续执行循环之后的代码。

  for (let i = 0; i < 10; i++) {
    if (i === 5) {
      break; // 当 i 等于 5 时，跳出循环
    }
    console.log(i); // 输出: 0, 1, 2, 3, 4
  }
  

• continue 语句：用于跳过当前迭代，并直接进入下一次迭代。

  for (let i = 0; i < 10; i++) {
    if (i === 5) {
      continue; // 当 i 等于 5 时，跳过此次循环，不打印
    }
    console.log(i); // 输出: 0, 1, 2, 3, 4, 6, 7, 8, 9
  }
  

掌握这些循环类型及其控制语句，将让你能够轻松地处理各种重复性任务，从而编写出更强大、更灵活的 JavaScript 代码。