循环结构

1. 简介

循环结构用于重复执行某个操作。常见的循环结构包括：while、do...while、for、for...in、for...of。

2. 基本用法

2.1 while 循环

while 循环先判断条件是否成立，再执行代码块。只要条件成立，就会重复执行代码块。

语法：

while (条件) {
    // 代码块
}

示例：

var i = 0;
while (i < 5) {
    console.log(i);
    i++;
}
// 输出：0 1 2 3 4

2.2 do...while 循环

do...while 循环先执行代码块，再判断条件是否成立。无论条件是否成立，代码块至少执行一次。

语法：

do {
    // 代码块
} while (条件);

示例：

var i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);
// 输出：0 1 2 3 4

2.3 for 循环

for 循环通常用于已知循环次数的情况。包含三个部分：初始化、条件和迭代。

语法：

for (初始化; 条件; 迭代) {
    // 代码块
}

示例：

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

2.4 for...in 循环

for...in 循环用于迭代对象的可枚举属性，包括继承的可枚举属性。它适用于遍历对象的属性名，也可以用于数组的索引（但不推荐）。

语法：

for (循环变量 in 集合) {
    // 循环操作
}

特点：

1. 适用于遍历对象的属性名。
2. 返回对象的所有可枚举属性，包括继承的可枚举属性。
3. 在遍历数组时，会返回数组的索引（作为字符串）。
4. 不保证遍历顺序。

示例：

// 遍历对象的属性名
var obj = {a: 1, b: 2, c: 3};
for (var key in obj) {
    console.log(key + ": " + obj[key]);
}
// 输出：
// a: 1
// b: 2
// c: 3

// 遍历数组的索引
var arr = [10, 20, 30];
for (var index in arr) {
    console.log(index + ": " + arr[index]);
}
// 输出：
// 0: 10
// 1: 20
// 2: 30

2.5 for...of 循环

for...of 循环用于迭代可迭代对象（包括数组、字符串、Map、Set 等）的元素。它适用于遍历数组的元素值。

语法：

for (循环变量 of 集合) {
    // 循环操作
}

特点：

1. 适用于遍历可迭代对象的元素值。
2. 不适用于遍历对象的属性名。
3. 返回可迭代对象的每个元素。
4. 保证遍历顺序。

示例：

// 遍历数组的元素值
var arr = [10, 20, 30];
for (var value of arr) {
    console.log(value);
}
// 输出：
// 10
// 20
// 30

// 遍历字符串的字符
var str = "hello";
for (var char of str) {
    console.log(char);
}
// 输出：
// h
// e
// l
// l
// o

3. 循环控制

break： 跳出整个循环，执行循环之后的代码。一般与 if 一起使用。

示例：

for (var i = 0; i < 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
}
// 输出：0 1 2 3 4

continue： 跳出本次循环，执行下一次循环（本次尚未执行完的代码不再执行）。

示例：

for (var i = 0; i < 10; i++) {
    if (i === 5) {
        continue;
    }
    console.log(i);
}
// 输出：0 1 2 3 4 6 7 8 9

4. 二重循环

一个循环中嵌套着另一个循环，称为二重循环。各种循环可以相互嵌套。

• 外层循环变量变化一次，内层循环变量要变化一遍。
• 二重循环中的 break 和 continue，遵循就近原则。

示例：

for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
        console.log("i = " + i + ", j = " + j);
        if (j === 1) {
            break; // 仅跳出内层循环
        }
    }
}
// 输出：
// i = 0, j = 0
// i = 0, j = 1
// i = 1, j = 0
// i = 1, j = 1
// i = 2, j = 0
// i = 2, j = 1

5. 综合示例

以下是综合示例，演示了各种循环的使用：

// while 循环
var i = 0;
while (i < 5) {
    console.log("while:", i);
    i++;
}

// do...while 循环
var j = 0;
do {
    console.log("do...while:", j);
    j++;
} while (j < 5);

// for 循环
for (var k = 0; k < 5; k++) {
    console.log("for:", k);
}

// for...in 循环遍历对象
var person = {name: "John", age: 30};
for (var key in person) {
    console.log("for...in (object):", key, person[key]);
}

// for...in 循环遍历数组
var arr = [1, 2, 3];
for (var index in arr) {
    console.log("for...in (array):", index, arr[index]);
}

// for...of 循环遍历数组
for (var value of arr) {
    console.log("for...of:", value);
}

// break 示例
for (var m = 0; m < 10; m++) {
    if (m === 5) {
        break;
    }
    console.log("break:", m);
}

// continue 示例
for (var n = 0; n < 10; n++) {
    if (n === 5) {
        continue;
    }
    console.log("continue:", n);
}

// 二重循环
for (var x = 0; x < 3; x++) {
    for (var y = 0; y < 3; y++) {
        console.log("二重循环: x =", x, ", y =", y);
        if (y === 1) {
            break; // 仅跳出内层循环
        }
    }
}