ES6 |循环

循环是以循环方式一次又一次地执行相同任务的方式。循环代表一组必须重复的指令。在循环的上下文中，重复被称为迭代。

下图说明了循环的分类：

Definite： ES6 中有三种类型的 Definite 循环。下面通过示例对它们中的每一个进行了描述：

Type	Description
for( ; ; )	Executes the loop block for a specified number of times under a termination condition.
for…in	Executes the loop block through an object’s properties.
for…of	Executes the loop block to iterates the iterable instead of object literals.

• for( ; ; ) for 循环执行代码块指定的次数。

  句法：

  for( Initialization; Terminate Condition; Increment/Decrement )

  初始化也可以称为计数值，因为此变量会跟踪计数直到终止符。将变量递增/递减到某个步长值。终止条件决定了不确定或确定的类别，因为如果终止语句有效，则循环将在确定的时间终止，否则它将进入无限循环并且将是无限循环。

• for...in for...in 循环用于遍历对象的属性。

  句法：

  for(variable_name in object) {  
      . . . 
  }
  

  在每次迭代中，对象的一个属性被分配给 variable_name，这个循环一直持续到对象属性的末尾。它肯定会结束它的迭代，所以它处于明确的循环之下。

• for...of for...of 循环用于执行循环块以迭代可迭代对象而不是对象字面量。

  句法：

  for(variable_name of object) {  
      . . .
  }
  

  在每次迭代中，iterable(array, 字符串等) 中的一个属性被分配给 variable_name，这个循环一直持续到迭代结束，它肯定会结束它的迭代，所以它处于明确的循环之下。

• 示例：此示例说明了上述所有三个循环。

  function geeks() {
      var obj = {Geeks:1, on:2, one:3};
      document.write("for(;;)<br>")
    
      for( var i = 0 ; i <= 10; i+=2) {
          document.write(i+" ")
      }
    
      document.write("<br>for...of<br>")
    
      // If 'of' is replaced by 'in' it throws an error 
      // as 'in' and literal are not compatible
      for (var i of ['hello', "Geeks", 3000]) {
          document.write(i+" ") 
      }
    
      // If 'in' is replaced by 'of' it throws an error 
      // as 'of' and objects are not compatible
      document.write("<br>for...in<br>")
    
      for (var i in  obj) {
          document.write(obj[i]+" "); 
      }
  }
  geeks();

• 输出：

  for(;;)
  0 2 4 6 8 10
  for...of
  hello Geeks 3000
  for...in
  1 2 3
  

无限循环： ES6 中有两种类型的无限循环。下面通过示例对它们中的每一个进行了描述：

Type	Description
while	Executes the loop block for a specified number of times under a termination condition.
do…while	similar to the while loop but executes the loop first and evaluates.

• While循环：这个循环属于无限循环，它可能会进入不确定或无限阶段。这个循环有两种类型。
  每次指定的条件评估为真时， while循环都会执行指令。
  句法：

  while (terminator condition) {  
      . . .
  } 

• do...while： do...while 循环类似于 while 循环，不同之处在于 do...while 循环不会在第一次执行循环时评估条件。无论终止条件如何，它都会至少执行一次循环。
  句法：

  do {  
      . . .
  } 
  while (terminator condition);  
  

• 示例本示例说明了上述所有三个循环。

  function geeks() {
      var i = 1;
      document.write("while<br>");
      while(i <= 10) {
          document.write(i+" ");
          i += 2
      }
      document.write("<br>do...while<br>");
      var j = 11;
      do {
    
          // Prints j even though it is not satisfying
          // the condition because the condition is
          // not checked yet
          document.write(j + " ");
          j += 2;
      }
    
  while(j <= 10); // ; is necessary
  }
  geeks();

• 输出：

  while
  1 3 5 7 9
  do...while
  11
  

循环控制语句：要中断流程的执行或控制执行流程，我们使用循环控制语句。

Keyword	Description
break	The break statement is used to take the control out of the loop.
continue	The continue statement skips the subsequent statements in the current iteration and takes the control back to the beginning of the loop.
return	A return statement ends the execution of the function call and “returns” the result

例子：

function geeks() {
    var i = 1;
    document.write("break<br>");
    while(i <= 10) {
        document.write(i + " ");
        if(i == 3) {
            document.write("break executed as i==3 is"
                    + " true and breaks the loop.");
            break;
        }
        i += 1;
    }
    var j = 0;
    document.write("<br>continue<br>");
    while(j <= 10) {
        j += 1;
        if(j == 4) {
            document.write("<br>continue executed as i==3"
                + " is true and skips the remaining loop "
                + "for that iteration<br>");
            continue;
        }
  
        if(j == 8)
            return;
        document.write(j + " ");
    }
}
geeks();
document.write("<br>returned to main as j==8 is true.<br>");
                  

输出：

break
1 2 3 break executed as i==3 is true and breaks the loop.
continue
1 2 3
continue executed as i==3 is true and and skips the remaining
loop for that iteration
5 6 7
returned to main as j==8 is true.

使用标签来控制流程：标签只是一个标识符，后跟一个冒号 ( :) ，应用于语句或代码块。标签可以与中断一起使用并继续更精确地控制流程，但标签的使用并未广泛使用，因为它会导致时间复杂性问题并且随着更多内部循环而变得更加复杂。

例子：

function geeks() {
    outerloop:
      
    for (var i = 0; i <=3; i++) { 
        document.write("Outerloop: " + i); 
        innerloop: 
              
        for (var j = 0; j<=3; j++) {
              
            // Quit the innermost loop 
            if (i == 1 && j>1){
                document.write("<br>innerloop skips the"
                    + "rest of the loop as i == 1 && j>1"
                    + " outerloop still in execution")
                continue innerloop;
            }
              
            // Do the same thing 
            if (i == 2) {
                document.write(" outerloop breaks as i==2 <br>")
                break outerloop; // Quit the outer loop 
            }
            document.write("<br>Innerloop: " + j); 
        }
        document.write("<br>")
    }
}
geeks();
             

输出：

Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
innerloop skips the rest of the loop as i == 1 && j>1 outerloop still in execution
innerloop skips the rest of the loop as i == 1 && j>1 outerloop still in execution
Outerloop: 2 outerloop breaks as i==2

简而言之，我们使用标签命名循环，并且只要根据执行情况，我们就可以在任何地方获取特定循环的中断和继续。