ES6 - 循环

ES6+ - 现代循环结构

循环是基本的控制流结构，允许你重复执行一段代码。循环体每次执行称为一次迭代。JavaScript 提供了几种不同类型的循环，适用于不同的场景。

循环分类：

确定次数循环 (Definite Loops)：执行已知次数。主要例子是 for 循环，以及针对可迭代对象的现代变体 for...of。
不确定次数循环 (Indefinite Loops)：只要特定条件为真就执行。例子包括 while 和 do...while 循环。

确定次数循环

当在循环开始前就知道迭代次数时，使用这些循环。

1. `for` 循环 (传统)

传统的 for 循环包含三个可选表达式，后面跟着在循环中执行的语句或语句块。

for (initialization; condition; final-expression) {
   // statements to execute
}

示例：

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

2. `for...in` 循环

for...in 循环遍历对象的所有可枚举字符串属性（忽略 Symbol），包括继承的可枚举属性。通常不建议将其用于遍历数组，因为迭代顺序不保证，并且它可能会遍历非数组元素的属性。

for (const key in object) {
  if (Object.hasOwnProperty.call(object, key)) {
    // statements using object[key]
  }
}

示例：

const person = { name: 'Alice', age: 30, city: 'New York' };
for (const property in person) {
  console.log(`${property}: ${person[property]}`);
}
// 输出: name: Alice, age: 30, city: New York (顺序可能不同)

始终使用 Object.hasOwnProperty.call(object, key) 或 object.hasOwnProperty(key) 来确保你只处理对象自身的属性。

3. `for...of` 循环 (ES6+ 推荐用于可迭代对象)

for...of 循环是 ES6 中引入的，它创建一个循环，遍历可迭代对象（包括 Array、Map、Set、String、TypedArray、arguments 对象以及用户自定义的可迭代对象）。它遍历可迭代对象的值，而不是键/索引。

for (const value of iterable) {
  // statements using value
}

数组示例：

const colors = ['red', 'green', 'blue'];
for (const color of colors) {
  console.log(color);
}
// 输出: red, green, blue

字符串示例：

const message = 'Hello';
for (const char of message) {
  console.log(char);
}
// 输出: H, e, l, l, o

这是遍历数组和其他可迭代集合的值的首选方式。

不确定次数循环

当迭代次数事先未知并取决于某个条件时，使用这些循环。

1. `while` 循环

while 循环在指定条件评估为 true 时执行其语句。条件在每次迭代之前检查。

while (condition) {
  // statements
}

示例：

let count = 0;
while (count < 3) {
  console.log(`Count is ${count}`);
  count++;
}
// 输出: Count is 0, Count is 1, Count is 2

2. `do...while` 循环

do...while 循环类似于 while，但条件在执行语句之后检查。这确保循环体至少执行一次。

do {
  // statements
} while (condition);

示例：

let num = 5;
do {
  console.log(`Number is ${num}`);
  num++; // 在这个特定示例中不会运行，因为条件立即为假
} while (num < 5); // 第一次迭代后条件为假
// 输出: Number is 5

let k = 0;
do {
    console.log(`k is ${k}`);
    k++;
} while (k < 3);
// 输出: k is 0, k is 1, k is 2

循环控制语句

语句	描述
`break`	终止当前循环（或 `switch` 或带标签的语句），并将程序控制转移到终止语句后面的语句。
`continue`	终止当前迭代中当前循环或带标签循环的语句执行，并继续循环的下一次迭代。

`break` 和 `continue` 示例：

for (let i = 0; i < 10; i++) {
  if (i === 3) {
    continue; // 当 i 为 3 时跳过本次迭代
  }
  if (i === 7) {
    break;    // 当 i 为 7 时退出循环
  }
  console.log(i);
}
// 输出: 0, 1, 2, 4, 5, 6

使用标签控制流程

标签是后跟冒号 (:) 的标识符，可以应用于循环或代码块。break 和 continue 可以使用这些标签来指定要作用于哪个循环或块，这在嵌套循环中特别有用。但是，过度使用标签会使代码更难阅读和理解，因此应谨慎使用。

带标签的 `break` 示例：

outerLoop: // 外层循环的标签
for (let i = 0; i < 3; i++) {
  console.log(`Outer: ${i}`);
  innerLoop: // 内层循环的标签
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outerLoop; // 跳出内外两个循环
    }
    console.log(`  Inner: ${j}`);
  }
}
// 输出:
// Outer: 0
//   Inner: 0
//   Inner: 1
//   Inner: 2
// Outer: 1
//   Inner: 0

continue 或 break 语句与其标签名之间不允许换行。此外，标签名与其关联的循环之间不应该有任何其他语句。

ES6 - 循环

ES6+ - 现代循环结构

确定次数循环

1. for 循环 (传统)

2. for...in 循环

3. for...of 循环 (ES6+ 推荐用于可迭代对象)