JS循环语句

最新推荐文章于 2025-05-19 08:00:00 发布

神所夸赞的夏天

最新推荐文章于 2025-05-19 08:00:00 发布

阅读量1.4k

点赞数 20

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.csdn.net/2303_79975149/article/details/147404147

前言

在 JavaScript 编程里，循环结构和控制循环流程的语句是实现重复执行任务、处理数据集合的关键工具。不同类型的循环语句适用于各种不同的场景，而 break 和 continue 语句则为循环的执行提供了灵活的控制手段。深入理解并掌握这些循环类型以及控制语句的区别，对于编写高效、逻辑清晰的 JavaScript 代码至关重要。下面将对 while、do...while、for、for...in 这几种循环类型以及 break 和 continue 的区别进行总结。

循环结构的核心特点是会反复执行特定的代码块，直到某个条件不再成立。

一、while类型

1.基本执行流程
while类型多用于需要依据条件重复执行代码块，且循环次数不明确的情况，基本语法如下：

while(条件表达式)
{
//条件成立执行里面的语句
}

当程序运行到 while 循环时，首先会对条件表达式进行判断。若条件表达式的值为 true，就会执行大括号内部的语句块；若条件表达式的值为 false，则会直接跳过循环体，执行循环体外的下一句代码。

2.循环迭代过程
在每次执行完大括号内的语句块之后，程序会再次回到条件表达式，重新判断其是否成立。如果条件仍然成立，就会再次执行大括号内的语句块；如果条件不成立，就会跳出循环，执行循环体外的下一句代码。这个过程会不断重复，直到条件表达式不再成立为止。

3.变量改变与循环终止
在执行大括号内的语句块时，通常会对条件表达式里的某些变量的值进行修改。这种修改会影响到下一次条件表达式的判断结果，使得条件表达式有可能在某次判断时不再成立，从而让循环在有限的次数内结束。

例如，使用 while 循环，用于输出从 0 到 4 的整数：

二、do while类型

1. 基本执行流程
do...while 循环它会先执行一次循环体中的代码，然后再对条件表达式进行判断。在需要确保循环体至少执行一次的场景中非常实用，其基本语法如下：

do {
    // 大括号内部的语句块
} while (条件表达式);

程序运行到 do...while 循环时，会直接进入大括号内部执行语句块。执行完语句块后，才会对 while 后面括号里的条件表达式进行判断。如果条件表达式的值为 true，则会再次执行循环体；如果条件表达式的值为 false，则循环终止，程序会执行循环体外的下一句代码。

2. 循环迭代过程
在 do...while 循环中，每次执行完循环体后，都会回到 while 语句处对条件表达式进行判断。若条件成立，就会再次执行循环体；若条件不成立，循环就会结束。这种迭代过程会不断重复，直到条件表达式不再为 true。

3. 变量改变与循环终止
在执行循环体的过程中，通常会对条件表达式里的某些变量的值进行修改。这些变量的改变会影响到下一次条件表达式的判断结果。当变量的值改变到使得条件表达式不再成立时，循环就会在下次判断时终止，从而保证循环能在有限的次数内结束。

例使用 do...while 循环，用于输出从 0 到 4 的整数：

三、for类型

1. 基本执行流程
for 循环是一种前测试循环，常用于已知循环次数的场景。其基本语法结构如下：

for (初始化表达式; 条件表达式; 迭代表达式) {
    // 循环体语句块
}

初始化表达式：在循环开始时执行，通常用于声明和初始化循环控制变量，此步骤仅执行一次。
条件表达式：在每次循环迭代开始前进行判断。若条件表达式的值为 true，则执行循环体；若为 false，则跳过循环体，结束循环。
循环体语句块：当条件表达式为 true 时执行的代码块。
迭代表达式：在每次循环体执行完毕后执行，一般用于更新循环控制变量的值。

2. 循环迭代过程
首先执行初始化表达式，完成循环控制变量的初始化。
接着判断条件表达式，如果条件为 true，则执行循环体语句块。
循环体执行完毕后，执行迭代表达式来更新循环控制变量。
再次判断条件表达式，若条件仍为 true，则继续执行循环体和迭代表达式；若条件为 false，则结束循环，执行循环之后的代码。

3. 变量改变与循环终止
在 for 循环中，迭代表达式的作用是改变循环控制变量的值。随着循环的不断进行，循环控制变量的值会持续变化，这会影响条件表达式的判断结果。当循环控制变量的值改变到使条件表达式不再成立（即结果为 false）时，循环就会终止，从而保证循环在有限次数内结束。

例如，使用for循环，用于输出从 0 到 4 的整数：

四、for in类型

1. 基本执行流程
for...in 循环主要用于遍历对象的可枚举属性，包括对象自身的属性和继承的属性。其基本语法如下：

for (变量 in 对象) {
    // 循环体
}

执行 for...in 循环时，首先会初始化一个变量，这个变量会在后续迭代过程中依次代表对象的各个属性名。然后开始遍历对象的可枚举属性，每次迭代都会将一个属性名赋值给这个变量，接着执行循环体中的代码。当遍历完对象的所有可枚举属性后，循环结束。

2. 循环迭代过程
在 for...in 循环中，迭代过程是对对象的可枚举属性进行遍历。具体步骤如下：
首先，将对象的第一个可枚举属性名赋值给循环变量。
执行循环体中的代码，在循环体中可以通过对象名和循环变量来访问该属性的值，即对象[变量]。
完成一次循环体的执行后，获取对象的下一个可枚举属性名，并将其赋值给循环变量，再次执行循环体。
重复上述步骤，直到遍历完对象的所有可枚举属性。

3. 变量改变与循环终止
在 for...in 循环中，循环变量的值会在每次迭代时改变，它会依次代表对象的不同属性名。循环终止的条件是遍历完对象的所有可枚举属性。当没有更多可枚举属性时，循环就会自然结束，程序会继续执行 for...in 循环之后的代码。

例如使用 for...in 循环遍历 JavaScript 对象 person，并将每个属性名和属性值输出

初始化：let key 声明了一个变量 key，用于在循环中存储对象的属性名。
迭代过程：第一次迭代时，key 被赋值为 'name'，循环体执行 console.log(key + ': ' + person[key]);，输出 name: John。接着，key 被赋值为 'age'，输出 age: 30。最后，key 被赋值为 'city'，输出 city: New York。
循环终止：当遍历完 person 对象的所有可枚举属性（name、age、city）后，循环结束，程序不会再执行循环体。

五、break和continue的区别

break：用于立即终止当前所在的循环（可以是 for、while、do...while、for...in等循环），程序会跳出该循环，直接执行循环之后的代码。也就是说，一旦执行了 break 语句，循环将不再继续执行剩余的迭代。
continue：用于跳过当前循环迭代中剩余的代码，直接进入下一次迭代。它不会终止整个循环，只是跳过当前这次迭代，循环会继续执行后续的迭代。

总结

以上就是今天要讲的内容，本文介绍了JavaScript 中，while、do...while、for、for...in 是不同的循环类型：while 先判断后执行，do...while 先执行后判断，for 适合固定次数循环，for...in 用于遍历对象属性。
break 用于立即终止循环，continue 用于跳过当前迭代，二者可灵活控制循环流程。