ES6 循环

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

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

ES6 循环_https://bianchenghao6.com_【ES6 教程】_第1张

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

定义循环

确定循环具有确定/固定次数的迭代。在ES6中，下面列出了三种类型的定循环:

确定循环	说明
for( ; ; ) 循环	它执行代码块一定次数。
for...in Loop	它遍历对象的属性。
for...of 循环	与对象字面量不同，它迭代可迭代对象(数组、字符串等)。

让我们试着详细说明上面的循环。

for( ; ; ) 循环

for( ; ; ) loop 用于多次迭代程序的一部分。如果你有固定的迭代次数，那么总是建议使用'for'循环。

语法

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

'for'循环包括一些定义如下的部分:

初始化: 它是在循环开始时执行一次的初始条件。在这部分，我们初始化变量，或者也可以用于已经初始化的变量。这是一个可选的语句。
条件: 每次都执行它以测试循环的条件。它继续执行循环，直到条件为假。它只返回真或假的布尔值。它也是一个可选语句。
Increment/Decrement: 可以增加或减少变量的值，也是一个可选语句。
语句: 表示循环体，每次都执行，直到条件表达式为假。

流程图

ES6 循环_https://bianchenghao6.com_【ES6 教程】_第2张

例子

下面是'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);

输出

1 1 2 3 5 8 13 21 34

无限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;
}

流程图

ES6 循环_https://bianchenghao6.com_【ES6 教程】_第3张

示例

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

输出

0 1 2 3

要记住的要点

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

do...while 循环

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

do...while 循环在块执行后检查条件，这就是为什么这个控制结构也被称为后测试循环。也有可能条件总是评估为真，这将创建一个无限循环。

语法

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

流程图

ES6 循环_https://bianchenghao6.com_【ES6 教程】_第4张

示例

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

输出

720

如果您使用while 循环来执行此示例，那么这将写为:

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

输出

720

以上两个例子的主要区别在于while循环只有在传递给它的条件评估为真时才进入。但是do...while 循环只执行一次语句，这是因为do...while 循环的开始迭代不认为是布尔表达式。然后对于进一步的迭代，while 将检查条件并将控制权从循环中取出。

循环控制语句

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

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

循环控制语句	说明
break 语句	break 语句用于将程序的控制带出循环。
continue 语句	它跳过当前迭代的后续语句并将程序的控制带到循环的开始。

我们试着详细说明一下上面的控制语句s.

break 语句

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

语法

break;

示例

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

上面的代码将打印n的四个值，用于1到7之间的数字范围。

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

输出

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

continue 语句

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

语法

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 的任何标识符，不是保留字。

声明: 这是一个 JavaScript 声明。

注意: 在严格模式下，不能使用"let"作为标签名。它会导致语法错误，因为 let 是保留标识符。

标签	说明
用break语句标记	用于在不使用标签引用的情况下退出循环或从switch语句中退出，但使用标签引用则用于从任何代码块中跳出。
带有 continue 语句的标签	用于在使用或不使用标签引用的情况下跳过循环的一次迭代。

用break语句标记

不使用label引用，你可以只用break退出循环或switch，但是通过使用标签引用，可以使用break从任何代码块中跳出。

语法

break labelname;

示例

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

Label with continue 语句

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

语法

continue labelname;

示例

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 实现都支持该扩展。 p>

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

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

LabeledItem : FunctionDeclaration

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

从 ECMAScript 20 开始15、非严格代码标准化的标记函数声明:

L: function hello() {}

如果你在严格模式下编写上面的代码，那么这将抛出一个语法错误:

'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

<< Python 语法
Python 变量 >>

ES6 布尔值

ES6 扩展运算符