JavaScript中的循环语句用法详细指南

编程语言中的循环是一项功能, 可在某些条件评估为真时, 促进重复执行一组指令/功能。例如, 假设我们要打印" Hello World" 10次。可以通过以下两种方式完成此操作：
迭代法
执行此操作的迭代方法是将document.write()语句写入10次。

< script type = "text/javascript" > document.write( "Hello World\n" ); document.write( "Hello World\n" ); document.write( "Hello World\n" ); document.write( "Hello World\n" ); document.write( "Hello World\n" ); document.write( "Hello World\n" ); document.write( "Hello World\n" ); document.write( "Hello World\n" ); document.write( "Hello World\n" ); document.write( "Hello World\n" ); < /script>

使用循环
【JavaScript中的循环语句用法详细指南】在循环中, 该语句只需编写一次, 循环将执行10次, 如下所示：

< script type = "text/javascript" > var i; for (i = 0; i < 10; i++) { document.write( "Hello World!\n" ); } < /script>

在上述时间点上, 上述程序中的许多事情似乎使你感到困惑, 但是请不要担心, 到本教程结束时, 你将能够了解有关JavaScript循环的所有内容。你可以观察到, 在上述使用循环的程序中, 我们仅使用了document.write语句一次, 但是该程序的输出将与我们使用document.write语句10次的迭代程序的输出相同。
在计算机编程中, 循环是重复执行的指令序列, 直到达到特定条件为止。

完成一项操作, 例如获取一项数据并进行更改, 然后检查某种条件, 例如计数器是否已达到规定数量。
计数器未达到：如果计数器尚未达到所需的数目, 则序列中的下一条指令将返回序列中的第一条指令并重复执行。
到达计数器：如果已达到条件, 则下一条指令"落入"到下一条顺序指令, 或在循环外跳转。

主要有两种类型的循环：

入口控制循环：在这种类型的回路中, 在进入回路体之前要测试测试条件。对于循环和While循环是入口控制的循环。
退出控制循环：在这种类型的循环中, 在循环体末端测试或评估测试条件。因此, 无论测试条件为真还是假, 循环体都会至少执行一次。做– while循环是退出控制的循环。

JavaScript主要提供三种执行循环的方式。尽管所有方式都提供相似的基本功能, 但是它们的语法和条件检查时间有所不同。让我们详细了解其中的每一个。
while循环：
while循环是一个控制流语句, 它允许根据给定的布尔条件重复执行代码。 while循环可被视为重复的if语句。
句法：

while (boolean condition) { loop statements... }

流程图：

文章图片

While循环从条件检查开始。如果评估结果为true, 则执行循环主体语句, 否则执行循环之后的第一条语句。因此, 它也被称为进入控制回路
一旦条件评估为真, 就执行循环主体中的语句。通常, 语句包含下一个迭代要处理的变量的更新值。
当条件变为假时, 循环终止, 标志着其生命周期的结束。

< script type = "text/javaScript" > // JavaScript program to illustrate while loopvar x = 1; // Exit when x becomes greater than 4 while (x < = 4) { document.write( "Value of x:" + x + "< br /> " ); // increment the value of x for // next iteration x++; }< /script>

输出如下：

Value of x:1 Value of x:2 Value of x:3 Value of x:4

for循环：
for循环提供了编写循环结构的简洁方法。与while循环不同, for语句在一行中消耗了初始化, 条件和增量/减量, 从而提供了更短, 更易于调试的循环结构。
语法如下：

for (initialization condition; testing condition; increment/decrement) { statement(s) }

流程图：

文章图片

初始化条件：在这里, 我们初始化使用中的变量。它标志着for循环的开始。可以使用已经声明的变量, 也可以声明一个变量, 仅局部于循环。
测试条件：用于测试循环的退出条件。它必须返回一个布尔值。这也是进入控制回路因为条件是在执行循环语句之前检查的。
语句执行：一旦条件评估为真, 就执行循环主体中的语句。
增/减：它用于更新变量以进行下一次迭代。
循环终止：当条件变为假时, 循环终止, 标志其生命周期的结束。

< script type = "text/javaScript" > // JavaScript program to illustrate for loopvar x; // for loop begins when x=2 // and runs till x < =4 for (x = 2; x < = 4; x++) { document.write( "Value of x:" + x + "< br /> " ); }< /script>

输出如下：

Value of x:2 Value of x:3 Value of x:4

for-in循环
JavaScript还包括for循环的另一个版本, 也称为for..in循环。 for..in循环提供了一种更简单的方法来遍历对象的属性。将对象放在JavaScript中后, 这一点将更加清楚。但是, 在处理对象时, 此循环非常有用。
语法如下：

for (variableName in Object) { statement(s) }

在每次迭代中, 将Object的属性之一分配给名为变量名称并且此循环继续进行, 直到处理完对象的所有属性为止。让我们以一个示例来演示如何使用for..in循环来简化工作。

< script type = "text/javaScript" > // JavaScript program to illustrate for..in loop// creating an Object var languages = { first : "C" , second : "Java" , third : "Python" , fourth : "PHP" , fifth : "JavaScript" }; // iterate through every property of the // object languages and print all of them // using for..in loops for (itr in languages) { document.write(languages[itr] + "< br > " ); }< /script>

输出如下：

C Java Python PHP JavaScript

同时：
do while循环与while循环类似, 唯一的区别是执行语句后检查条件, 因此是
退出控制循环。
语法如下：

do { statements.. } while (condition);

流程图：

文章图片

do while循环从语句的执行开始。第一次没有检查任何条件。
在执行语句并更新变量值之后, 将检查条件的真值或假值。如果计算结果为true, 则循环的下一个迭代开始。
当条件变为假时, 循环终止, 标志着其生命周期的结束。
重要的是要注意, do-while循环将在检查任何条件之前至少执行一次其语句, 因此是退出控制循环的一个示例。

< script type = "text/javaScript" > // JavaScript program to illustrate do-while loopvar x = 21; do { // The line while be printer even // if the condition is false document.write( "Value of x:" + x + "< br /> " ); x++; } while (x < 20); < /script>

输出如下：

Value of x: 21

无限循环
实施任何形式的循环时, 最常见的错误之一是它可能永远不会退出, 即循环会无限期地运行。当条件由于某种原因失败时, 就会发生这种情况。
例子：

< script type = "text/javaScript" > // JavaScript program to illustrate infinite loop// infinite loop because condition is not apt // condition should have been i> 0. for ( var i = 5; i != 0; i -= 2) { document.write(i); }var x = 5; // infinite loop because update statement // is not provided. while (x == 5) { document.write( "In the loop" ); }< /script>