ES6 循环

2025年3月17日 | 阅读 10 分钟

编程语言中的循环语句有助于在条件评估为真时重复执行一组指令/函数。循环是重复执行某些条件的理想方式。在循环中，重复被称为**迭代**。

您可以在下图中看到循环的分类

让我们试着理解上图中的循环。

确定循环

确定循环具有确定/固定次数的迭代。在 ES6 中，有以下三种类型的确定循环

确定循环	描述
for( ; ; ) 循环	它会执行代码块固定次数。
for…in 循环	它会迭代对象的属性。
for…of 循环	与对象字面量不同，它会迭代可迭代对象（数组、字符串等）。

让我们试着详细阐述上面的循环。

for ( ; ; ) 循环

**for ( ; ; ) 循环** 用于多次迭代程序的一部分。如果您有固定次数的迭代，则始终建议使用 'for' 循环。

语法

for(initialization;condition;incr/decr){  
//statement or code to be executed  
}  

**'for' 循环** 包含以下一些部分

**初始化：** 它是循环开始时执行一次的初始条件。在此部分中，我们初始化变量，也可以用于已经初始化的变量。它是一个可选语句。
**条件：** 每次执行它以测试循环的条件。它会继续执行循环，直到条件为假。它只返回布尔值，即 true 或 false。它也是一个可选语句。
**增量/减量：** 它可以增加或减少变量的值，它也是一个可选语句。
**语句：** 它表示循环的主体，每次执行直到条件表达式为假。

流程图

示例

在下面，有三个 **'for' 循环** 的例子，我们展示了**简单的 'for' 循环**、具有**多个表达式的 'for' 循环**和**无限 'for' 循环**。

使用 for 循环的 2 的乘法表。

var i;
for(i=1;i<=10;i++)
{
   console.log("2 x "+ i +" =", 2*i);
}

输出

2 x 1 = 2
2 x 2 = 4
2 x 3 = 6
2 x 4 = 8
2 x 5 = 10
2 x 6 = 12
2 x 7 = 14
2 x 8 = 16
2 x 9 = 18
2 x 10 = 20

具有**多个表达式**的 **for 循环**
您可以使用**逗号 (,) 运算符**将多个赋值和最终表达式组合在一个 for 循环中。
让我们尝试使用单个 for 循环打印斐波那契数列。

"use strict" 
for(let temp, a = 0, b = 1; b<40; temp = a, a = b, b = a + temp) 
console.log(b);

输出

无限 for 循环
**无限 for 循环** 的示例如下所示

for(;;)
{  
   console.log("infinitive loop");  // It will print infinite times
}  

输出

infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
	.
	.
	.
	.
infinite loop

要终止它，您可以使用 ctrl + c。

for…in 循环

**for…in 循环** 类似于 **for 循环**，它迭代对象的属性，即当您需要访问对象的属性或键时，您可以使用 **for…in 循环**。当您处理对象或字典时，它是一个更好的选择，因为索引的顺序不重要。

语法

for (variable_name in object_name) //Here in is the keyword
{  
  // statement or block to execute  
}

在每次迭代中，对象的一个属性被分配给变量名，这个循环会一直持续到所有对象属性都被覆盖。

示例

function Mobile(model_no){
this.Model = model_no;
this.Color = 'White';
this.RAM = '4GB';
}
var Samsung = new Mobile("Galaxy");
for(var props in Samsung)
{
console.log(props+ " : " +Samsung[props]);
}

输出

Model : Galaxy
Color : White
RAM : 4GB

如果您在对象的属性中传递函数，那么此循环将为您提供完整的函数作为输出。您可以在以下代码中看到它的说明

function Mobile(model_no){
this.Model = model_no;
this.Color = 'White';
this.RAM = '4GB';
this.Price = function price() // The loop will give you this function as it is written here.
{
   console.log(this.model + "Price = Rs. 3300");
}
}
var Samsung = new Mobile("Galaxy");
for(var props in Samsung)
{
   console.log(props+ " : " +Samsung[props]);
}

输出

Model : Galaxy
Color : White
RAM : 4GB
Price : function price()
{
   console.log(this.model + "Price = Rs. 3300");
}

因此，您也可以使用 **for…in 循环** 访问方法。

for…of 循环

与对象字面量不同，此循环用于迭代可迭代对象（数组、字符串等）。

语法

for(variable_name of object_name) // Here of is a keyword
{  
   //statement or block to execute  
}

在每次迭代中，可迭代对象的一个属性被分配给 variable_name，循环会一直持续到迭代结束。

示例

var fruits = ['Apple', 'Banana', 'Mango', 'Orange'];
for(let value of fruits)
{
  console.log(value); 
}

/*
You can also write the above code like:

for(let value of ['Apple', 'Banana', 'Mango', 'Orange'])
{
  console.log(value); 
}

*/

输出

Apple
Banana
Mango
Orange

不确定循环

不确定循环具有无限迭代。它用于循环中的迭代次数是中间或未知的情况。

有以下两种类型的不确定循环

不确定循环	描述
while 循环	它会每次执行指令，直到定义的条件评估为真。
do…while 循环	它类似于 while 循环，但主要区别在于 do…while 循环会执行一次循环，无论终止条件如何。

让我们试着详细阐述上面的循环。

while 循环

while 循环是一个控制流语句，它允许根据给定的布尔条件重复执行代码。它由一个代码块和一个表达式/条件组成。

while 循环在执行代码块之前检查表达式/条件；这就是为什么这种控制结构通常被称为预测试循环。

语法

while (condition) {
   statements;
}

流程图

示例

var y = 0;
while (y < 4) {
    console.log(y);
    y++;
}

输出

注意事项

while 循环中始终需要**条件**，因为它是运行循环所必需的。如果条件返回 true，则循环将重新开始，但如果它返回 false，则循环将停止。
如果条件始终为真，则循环将永远不会结束。

do…while 循环

它是一个控制流语句，至少执行一次代码块，然后它将取决于条件循环是否重复执行该块。

do…while 循环在执行代码块后检查条件，这就是为什么这种控制结构也称为**后测试循环**。条件也可能始终评估为真，这将创建一个**无限循环**。

语法

do 
{  
  // block of statements to be executed;  
} 
while (expression); 

流程图

示例

var count = 6, fact = 1;
do {
    fact = fact * count--;
} while (count > 0);

console.log(fact);

输出

如果您使用 **while 循环** 执行此示例，那么它将写为

var count = 6, fact = 1;
while (count > 0) 
{
    fact = fact * count--;
}
console.log(fact);

输出

上面两个示例之间的主要区别是，**while 循环** 只有在其传递的条件评估为真时才进入。但 **do…while 循环** 会执行一次语句，这是因为 **do…while 循环** 的起始迭代不被视为布尔表达式。然后对于后续迭代，while 将检查条件并将控制权从循环中取出。

循环控制语句

循环控制语句用于中断或控制执行流。这些语句改变了其正常序列的执行。JavaScript 为您提供了完全控制来处理循环和 switch 语句。

在某些情况下，您可能需要退出循环而无需到达其底部。也可能存在您需要跳过部分代码并开始循环的进一步迭代的情况。因此，为了处理 JavaScript 中的这种情况，我们有 **break** 和 **continue** 语句。

循环控制语句	描述
break 语句	break 语句用于将程序控制权从循环中取出。
continue 语句	它跳过当前迭代的后续语句，并将程序控制权带到循环的开头。

让我们试着详细阐述上面的控制语句。

break 语句

它用于将程序控制权从循环中取出。您可以在循环内或 switch 语句中使用 break 语句。在循环内使用 break 语句会导致程序退出循环。

语法

示例

var n = 1;
while(n<=7) 
{ 
   console.log("n="+n); 
   if(n==4)
   {
       break;
   } 
   n++;
}

上面的代码将打印 1 到 7 范围内四个 **n** 的值。

当 n 的值为 **4** 时，循环强制控制退出循环，因为有 **break 语句**。成功执行上述代码后，您将获得以下输出。

输出

n=1
n=2
n=3
n=4

continue 语句

与 break 语句不同，continue 语句不会退出循环。它终止循环的当前迭代并开始下一次迭代。

语法

示例

var n = 0;
while(n<=5) 
{ 
   n++;
   if(n==3)
   {
       continue;
   } 
   console.log("n = "+n); 
}

上面的示例将显示 **n** 的值，但如果 **n** 的值为 **3**，它将跳过当前迭代。成功执行上述代码后，您将获得以下输出。

输出

n = 1
n = 2
n = 4
n = 5
n = 6

使用标签控制流程

**标签** 不过是一个标识符后跟一个**冒号 (:)**，它应用于代码块或语句。您可以将标签与 **break** 和 **continue** 一起使用来控制流程。

您不能在 break 和 continue 语句及其标签名称之间使用换行符。此外，在标签名称和**关联循环**之间不应该有任何语句。

定义标签的语法

labelname:
Statement

**labelname：** 任何 JavaScript 标识符，它不是保留字。

**Statement：** 这是一个 JavaScript 语句。

注意：在严格模式下，您不能使用 "let" 作为标签名称。这将导致语法错误，因为 let 是一个保留标识符。

标签	描述
带 break 语句的标签	它用于退出循环或 switch 语句而无需使用标签引用，但使用标签引用，它用于跳出任何代码块。
带 continue 语句的标签	它用于跳过循环的一次迭代，无论是否使用标签引用。

带 break 语句的标签

在不使用标签引用的情况下，您只能使用 break 来退出循环或 switch，但通过使用标签引用，您可以使用 break 来跳出任何代码块。

语法

示例

var x, y;

loop1: 	       //The first for statement is labeled as "loop1."

for (x = 1; x < 4; x++) { 
     loop2:    //The second for statement is labelled as "loop2"
   for (y = 1; y < 4; y++) {  
      if (x === 2 && y === 2) {
         break loop1;
      }
      console.log('x = ' + x + ', y = ' + y);
   }
}

输出

x = 1, y = 1
x = 1, y = 2
x = 1, y = 3
x = 2, y = 1

带 continue 语句的标签

continue 语句只能用于跳过一次循环迭代，无论是否使用标签引用。

语法

示例

var x, y;

loop1:   //The first for statement is labelled as "loop1"
for (x = 1; x < 4; x++) {     
   loop2:  //The second for statement is labelled as "loop2"
   for (y = 1; y < 4; y++) {   
      if (x === 2 && y === 2) {
         continue loop1;
      }
      console.log('x = ' + x + ', y = ' + y);
   }
}

您可以在上面代码的以下输出中注意到，它跳过了“x = 2, y = 2”和“x = 2, y = 3”两者。

输出

x = 1, y = 1
x = 1, y = 2
x = 1, y = 3
x = 2, y = 1
x = 3, y = 1
x = 3, y = 2
x = 3, y = 3

带标签的函数声明

在 ECMAScript 6 之前，**LabeledStatement** 规范不允许将标签语句与 **FunctionDeclaration** 关联。但是，带标签的 **FunctionDeclaration** 是 **非严格代码** 中允许的扩展，并且大多数浏览器托管的 ECMAScript 实现都支持该扩展。

但在 ECMAScript 2015 (ES6) 中，**LabeledStatement** 的语法生成允许使用 **FunctionDeclaration** 作为 **LabeledItem**，但它包含一个错误规则，如果发生这种情况会导致语法错误。

为了网络浏览器兼容性，该规则通过添加带下划线的文本进行了修改

LabeledItem : FunctionDeclaration

如果严格模式的任何源代码匹配此规则，则将导致语法错误。

从 ECMAScript 2015 开始，带标签的函数声明在非严格代码中标准化

如果您在严格模式下编写上述代码，则会抛出语法错误

'use strict';
L: function hello() {}
// SyntaxError: In strict mode code, functions can only be declared at top level or inside a block.

**生成器函数** 在**非严格模式**和**严格模式**下都不能带标签。

L: function* hello() 
{
}
// SyntaxError: Generator Functions cannot be labelled

下一主题ES6 决策

ES6 循环

确定循环

for ( ; ; ) 循环

for…in 循环

for…of 循环

不确定循环

while 循环

do…while 循环

循环控制语句

break 语句

continue 语句

使用标签控制流程

注意：在严格模式下，您不能使用 "let" 作为标签名称。这将导致语法错误，因为 let 是一个保留标识符。

带 break 语句的标签

带 continue 语句的标签

带标签的函数声明

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ES6 教程

ES6 函数

ES6 数组

ES6 对象

ES6 类

ES6 字符串

高级特性

ES6 其他

面试题

ES6 循环

确定循环

for ( ; ; ) 循环

for…in 循环

for…of 循环

不确定循环

while 循环

do…while 循环

循环控制语句

break 语句

continue 语句

使用标签控制流程

注意：在严格模式下，您不能使用 "let" 作为标签名称。这将导致语法错误，因为 let 是一个保留标识符。

带 break 语句的标签

带 continue 语句的标签

带标签的函数声明

相关帖子

ES6 条件判断

ES6 扩展运算符

ES6 Rest 参数

ES6 语法

ES6 运算符

ES6 教程

ES6 环境设置

ES6 变量

ES6 版本

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器