【零基础学JS - 12 】javaScript中的for、while循环

👨‍💻 作者简介：程序员半夏 , 一名全栈程序员，擅长使用各种编程语言和框架，如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我!
🏆 本文收录于专栏: 零基础学JavaScript,包含JavaScript 基础知识,DOM相关知识,高级知识点,最新ES特性
————————————————————————
🔥 热门专栏:

🥇 学透CSS: 全网阅读超百万,CSDN最强CSS专栏,精通CSS全属性，不做切图仔，从订阅本专栏开始!

🥇 SprinbBoot + Vue3 项目实战: 新鲜出炉的2023实战系列博客,配套视频,用心打磨,篇篇精品.持续更新,值得订阅!

JavaScript for循环

在编程中，循环用于重复一段代码。

例如，如果你想显示一条消息100次，则可以使用循环。这只是一个简单的例子；你可以使用循环实现更多功能。

for循环

for循环的语法如下：

for (initialExpression; condition; updateExpression) {
    // for循环体
}

在这里，

• initialExpression初始化和/或声明变量，并仅执行一次。
• condition条件。
• 如果条件为false，则for循环终止。
• 如果条件为true，则执行for循环内的代码块。
• 当条件为true时，updateExpression更新initialExpression的值。
• 条件再次被评估。这个过程一直持续，直到条件为false。

工作原理与流程图

示例1：显示文本五次

const n = 5;

for (let i = 1; i <= n; i++) {
    console.log(`I love JavaScript.`);
}

输出：

I love JavaScript.
I love JavaScript.
I love JavaScript.
I love JavaScript.
I love JavaScript.

这个程序的工作方式如下。

迭代	变量	条件：i <= n	动作
1st	i = 1 n = 5	true	打印：I love JavaScript. i增加到2
2nd	i = 2 n = 5	true	打印：I love JavaScript. i增加到3
3rd	i = 3 n = 5	true	打印：I love JavaScript. i增加到4
4th	i = 4 n = 5	true	打印：I love JavaScript. i增加到5
5th	i = 5 n = 5	true	打印：I love JavaScript. i增加到6
6th	i = 6 n = 5	false	退出循环

示例2：显示1到5的数字

const n = 5;


for (let i = 1; i <= n; i++) {
    console.log(i);    
}

输出：

1
2
3
4
5

这个程序的工作方式如下。

迭代	变量	条件：i <= n	动作
1st	i = 1 n = 5	true	1 i增加到2
2nd	i = 2 n = 5	true	2 i增加到3
3rd	i = 3 n = 5	true	3 i增加到4
4th	i = 4 n = 5	true	4 i增加到5
5th	i = 5 n = 5	true	5 i增加到6
6th	i = 6 n = 5	false	退出循环

示例3：显示n个自然数的总和

let sum = 0;
const n = 100


for (let i = 1; i <= n; i++) {
    sum += i;  // sum = sum + i
}

console.log('sum:', sum);

输出：

sum: 5050

这里，sum的值最初为0。然后，从i = 1到100迭代for循环。在每次迭代中，将i添加到sum中，并将其值增加1。

当i变为101时，测试条件为false，sum将等于0 + 1 + 2 + … + 100。

将自然数的总和添加到上述程序也可以写成

let sum = 0;
const n = 100;


for(let i = n; i >= 1; i-- ) {
    sum += i; // sum = sum + i
}

console.log('sum:',sum);

这个程序也会产生与示例3相同的输出。在编程中，可以用许多不同的方式完成同样的任务；编程就是逻辑。

虽然这两种方法都是正确的，但你应该尝试使你的代码更易读。

JavaScript无限for循环

如果for循环中的测试条件始终为true，则它将永远运行（直到内存满）。例如，

for(let i = 1; i > 0; i++) {
}

在上面的程序中，条件始终为true，这将无限运行代码。

while 和 do…while 循环

while 循环

while 循环的语法是：

while (condition) {
    // 循环体
}

在这里，

• while 循环评估括号内的条件。
• 如果条件评估为 true，则执行 while 循环内的代码。
• 条件再次评估。
• 这个过程一直持续到条件为 false。
• 当条件评估为 false 时，循环停止。

while 循环的流程图如下：

示例 1：显示从 1 到 5 的数字

// 程序显示从 1 到 5 的数字
// 初始化变量
let i = 1, n = 5;

// while 循环从 i = 1 到 5
while (i <= n) {
    console.log(i);
    i += 1;
}

输出：

1
2
3
4
5

这个程序的工作方式如下：

迭代次数	变量	条件: i <= n	动作
1	i = 1	n = 5	输出1，i增加到2
2	i = 2	n = 5	输出2，i增加到3
3	i = 3	n = 5	输出3，i增加到4
4	i = 4	n = 5	输出4，i增加到5
5	i = 5	n = 5	输出5，i增加到6
6	i = 6	n = 5	条件不成立，循环结束

示例 2：正数之和

// 程序查找正数之和
// 如果用户输入负数，循环结束
// 输入的负数不会添加到总和中

let sum = 0;

// 从用户获取输入
let number = parseInt(prompt('输入一个数字：'));

while (number >= 0) {

    // 添加所有正数
    sum += number;

    // 如果数字是正数，则再次获取输入
    number = parseInt(prompt('输入一个数字：'));
}

// 显示总和
console.log(`总和为 ${sum}。`);

输出：

输入一个数字：2
输入一个数字：5
输入一个数字：7
输入一个数字：0
输入一个数字：-3
总和为 14。

在上面的程序中，提示用户输入一个数字。

这里使用 parseInt()，因为 prompt() 接受用户输入作为字符串。当数值字符串相加时，它的行为像字符串。例如，‘2’ + ‘3’ = ‘23’。因此，parseInt() 将数值字符串转换为数字。

当用户输入负数时，while 循环继续。在每次迭代中，用户输入的数字添加到总和变量中。

当用户输入负数时，循环终止。最后，显示总和。

JavaScript do…while 循环

do…while 循环的语法是：

do {
    // 循环体
} while (condition)

在这里，

• 首先执行循环体。然后评估条件。
• 如果条件评估为 true，则再次执行 do 语句内的循环体。
• 再次评估条件。
• 如果条件评估为 true，则再次执行 do 语句内的循环体。
• 这个过程一直持续到条件评估为 false。然后循环停止。

注意：do…while 循环类似于 while 循环。唯一的区别在于 do…while 循环内的循环体至少执行一次。

do…while 循环的流程图如下：

让我们看一下 do…while 循环的工作方式。

示例 3：显示从 1 到 5 的数字

// 程序显示数字
let i = 1;
const n = 5;

// do...while 循环从 1 到 5
do {
    console.log(i);
    i++;
} while (i <= n);

输出：

1
2
3
4
5

这个程序的工作方式如下：

迭代次数	变量	条件	动作
1	i = 1	i <= n (5)	输出1，i增加到2
2	i = 2	i <= n (5)	输出2，i增加到3
3	i = 3	i <= n (5)	输出3，i增加到4
4	i = 4	i <= n (5)	输出4，i增加到5
5	i = 5	i <= n (5)	输出5，i增加到6
6	i = 6	i <= n (5)条件不成立	循环结束

示例 4：正数之和

// 查找正数之和
// 如果用户输入负数，循环终止
// 负数不会添加到总和中

let sum = 0;
let number = 0;

do {
    sum += number;
    number = parseInt(prompt('输入一个数字：'));
} while (number >= 0)

console.log(`总和为 ${sum}。`);

输出 1：

输入一个数字：2
输入一个数字：4
输入一个数字：-500
总和为 6。

在上面的程序中，do…while 循环继续，直到用户输入负数。当数字为负数时，循环终止；负数不会添加到总和变量中。

输出 2：

输入一个数字：-80
总和为 0。

如果用户输入负数，则 do…while 循环的循环体仅运行一次。

无限循环

如果循环的条件始终为 true，则循环将无限运行（直到内存已满）。例如，

// 无限 while 循环
while (true) {
    // 循环体
}

以下是一个无限 do…while 循环的示例。

// 无限 do...while 循环
const count = 1;
do {
   // 循环体
} while (count == 1)

在上面的程序中，条件始终为 true。因此，循环体将无限运行。

for 循环 vs while 循环

当迭代次数已知时，通常使用 for 循环。例如，

// 这个循环迭代 5 次
for (let i = 1; i <= 5; ++i) {
   // 循环体
}

当迭代次数未知时，通常使用 while 和 do…while 循环。例如，

while (condition) {
    // 循环体
}