ES6教程

ES6 循环

ES6 循环

编程语言中的循环语句有助于在条件评估为真时重复执行一组指令/函数。循环是重复执行某些条件的理想方式。在循环中,重复被称为迭代。
您可以在下图中看到循环的分类:
ES6 Loops
让我们试着理解上图中的循环。

定义循环

确定循环具有确定/固定次数的迭代。在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 Loops
例子
下面是'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 Loops
示例
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 Loops
示例
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
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4