ES6循环语句解释和用法示例

本文概述

• 定环
• 不定循环
• 循环控制语句
• 使用标签控制流量
• 带标签的函数声明

编程语言中的循环语句有助于在条件评估为true时重复执行指令/功能集。循环是重复执行某些条件的理想方法。在循环中, 重复称为迭代。

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

让我们尝试了解上图中的循环。

定环

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

让我们尝试详细说明上述循环。

for(;;)循环

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

语法

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

” for”循环包括一些定义如下的部分：

• 初始化：这是在循环开始时执行一次的初始条件。在这一部分中, 我们将初始化变量, 或者也可以将其用于已初始化的变量。这是一个可选语句。
• 条件：每次都要执行一次, 以测试循环的条件。它继续执行循环, 直到条件为假。它仅返回为true或false的布尔值。这也是一个可选语句。
• 递增/递减：可以递增或递减变量的值, 它也是可选语句。
• 语句：它表示循环的主体, 每次在条件表达式为false之前执行。

流程图

例子

在下面的” for”循环的三个示例中, 我们展示了简单的” for”循环, 具有多个表达式的” for”循环和无限的” for”循环。

• 表2通过使用for循环。

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循环来打印Fibonacci系列。

"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(;;)
{  
   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循环

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

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

语法

while (condition) {
   statements;
}

流程图

例子

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

输出如下

0
1
2
3

要记住的要点

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

do…while循环

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

do…while循环在执行完块后检查条件, 这就是为什么此控制结构也称为后测试循环的原因。条件也可能总是评估为true, 这将创建一个无限循环。

语法

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

流程图

例子

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中处理这种情况, 我们有一个break和continue语句。

让我们尝试详细说明上述控制语句。

中断声明

它用于从循环中控制程序。你可以在循环内或switch语句中使用break语句。在循环中使用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

继续声明

与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语句及其标签名称之间使用换行符。另外, 标签名称和关联的循环之间不应有任何语句。

定义标签的语法

labelname:
Statement

labelname：JavaScript的任何标识符, 不是保留字。

语句：这是一个JavaScript语句。

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

带有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

带有继续声明的标签

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规范不允许将label语句与FunctionDeclaration关联。但是, 标为FunctionDeclaration的是非严格代码中允许的扩展, 并且大多数由ECMAScript浏览器托管的实现均支持该扩展。

但是在ECMAScript 2015(ES6)中, LabeledStatement的语法生成允许将FunctionDeclaration用作LabeledItem, 但是它包含一个错误规则, 如果发生该错误规则会导致语法错误。

为了与Web浏览器兼容, 该规则通过添加带下划线的文本进行了修改：

LabeledItem：功能声明

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

从ECMAScript 2015开始, 带标签的函数声明针对非严格代码进行了标准化：

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