编程笔记 html5&css&js 079 JavaScript 循环语句

在JavaScript中，有几种不同的循环语句用于执行重复的代码块。

循环语句

以下是一些主要的循环类型及其详解与示例：

1. for 循环

// 标准的 for 循环包含三个表达式：初始化、条件判断和更新部分
for (let i = 1; i <= 10; i++) {
    console.log(i); // 输出 1 到 10 的数字
}

// 示例一：输出三角形图案
for (let i = 1; i <= 5; i++) {
    let line = '';
    for (let j = 1; j <= i; j++) {
        line += '* ';
    }
    console.log(line);
}
// 结果：
// * 
// * *
// * * *
// * * * *
// * * * * *

// 示例二：计算1到100的总和
let sum = 0;
for (let i = 1; i <= 100; i++) {
    sum += i;
}
console.log(sum); // 输出结果为5050
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2. while 循环

// while 循环会在条件满足时一直执行循环体内的代码
let count = 1;
while (count <= 10) {
    console.log(count);
    count++;
}

// 示例：计算1加到某个数（例如100）的总和
let total = 0;
let number = 1;
while (number <= 100) {
    total += number;
    number++;
}
console.log(total); // 输出结果为5050
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. do...while 循环

// do...while 循环至少会执行一次循环体，然后再检查条件是否满足
let index = 0;
do {
    console.log(index);
    index++;
} while (index < 5);

// 示例：同样计算1到某个数的总和，但确保至少执行一次循环
let sumDoWhile = 0;
let currentNumber = 1;
do {
    sumDoWhile += currentNumber;
    currentNumber++;
} while (currentNumber <= 100);
console.log(sumDoWhile); // 输出结果同样为5050
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4. for...in 循环

// for...in 循环用于遍历对象的所有可枚举属性
let obj = { a: 1, b: 2, c: 3 };
for (let prop in obj) {
    if (obj.hasOwnProperty(prop)) {
        console.log(prop + ': ' + obj[prop]);
    }
}
// 结果：
// a: 1
// b: 2
// c: 3

// 注意：在实际开发中，为了安全起见通常会检查属性是否是对象自身的属性而非继承的。
1
2
3
4
5
6
7
8
9
10
11
12
13

5. for...of 循环

// for...of 循环用于遍历可迭代对象，如数组、Set、Map等
let array = [1, 2, 3, 4, 5];
for (let value of array) {
    console.log(value);
}
// 结果：
// 1
// 2
// 3
// 4
// 5

// 示例：计算数组元素的总和
let numbers = [1, 2, 3, 4, 5];
let sumOfArray = 0;
for (let num of numbers) {
    sumOfArray += num;
}
console.log(sumOfArray); // 输出结果为15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

以上就是JavaScript中常用的循环结构及其示例。

小结

结合一些在学习中可以用到的处理内容来练习。比如输出一下九九乘法表。