JS中幾種迴圈的區別與相同點

迴圈語句，用於重複執行某個操作，它有多種形式。

while迴圈

while語句的迴圈條件是一個表示式（express），必須放在圓括號中。

程式碼塊部分，如果只有一條語句（statement），可以省略大括號，否則就必須加上大括號。

[JavaScript] 純文字檢視 複製程式碼
while (expression)
  statement;
// 或者
while (expression) statement;

下面寫個例子

[JavaScript] 純文字檢視 複製程式碼
var i = 0;
while (i < 100) {
  console.log('i當前為：' + i);
  i += 1;
}

上面的程式碼將迴圈100次，直到i等於100為止。

下面的例子是一個無限迴圈，因為條件總是為真。

[JavaScript] 純文字檢視 複製程式碼
while (true) {
  console.log('Hello, world');
}

for迴圈

for語句是迴圈命令的另一種形式，可以指定迴圈的起點、終點和終止條件。

它的格式如下：

[JavaScript] 純文字檢視 複製程式碼
for (initialize; test; increment)
  statement
// 或者
for (initialize; test; increment) {
  statement
}

 for語句後面的括號裡面，有三個表示式：

初始化表示式（initialize）：確定迴圈的初始值，只在迴圈開始時執行一次。

測試表示式（test）：檢查迴圈條件，只要為真就進行後續操作。

遞增表示式（increment）：完成後續操作，然後返回上一步，再一次檢查迴圈條件。

[JavaScript] 純文字檢視 複製程式碼
var x = 3;
for (var i = 0; i < x; i++) {
  console.log(i);
}
// 0
// 1
// 2

上面程式碼中，初始化表示式是var i = 0，即初始化一個變數i；

測試表示式是i < x，即只要i小於x，就會執行迴圈；遞增表示式是i++，即每次迴圈結束後，i增大1。

所有for迴圈，都可以改寫成while迴圈。上面的例子改為while迴圈。

程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
var x = 3;
var i = 0;
while (i < x) {
  console.log(i);
  i++;
}

for語句的三個部分（initialize，test，increment），可以省略任何一個，也可以全部省略。

[JavaScript] 純文字檢視 複製程式碼
for ( ; ; ){
  console.log('Hello World');
}

上面程式碼省略了for語句表示式的三個部分，結果就導致了一個無限迴圈。

do…while迴圈

do…while迴圈與while迴圈類似，唯一的區別就是先執行一次迴圈體，然後判斷迴圈條件。

[JavaScript] 純文字檢視 複製程式碼
do
  statement
while (expression);
// 或者
do {
  statement
} while (expression);

不管條件是否為真，do..while迴圈至少執行一次，這是這種結構最大的特點。另外，while語句後面的分號不能省略。

[JavaScript] 純文字檢視 複製程式碼
var x = 3;
var i = 0;
do {
  console.log(i);
  i++;
} while(i < x);

break語句和continue語句

break語句和continue語句都具有跳轉作用，可以讓程式碼不按既有的順序執行。

break語句用於跳出程式碼塊或迴圈。

[JavaScript] 純文字檢視 複製程式碼
var i = 0;
while(i < 100) {
  console.log('i當前為：' + i);
  i++;
  if (i === 10) break;
}

上面程式碼只會執行10次迴圈，一旦i等於10，就會跳出迴圈。

for迴圈也可以使用break語句跳出迴圈。

[JavaScript] 純文字檢視 複製程式碼
for (var i = 0; i < 5; i++) {
  console.log(i);
  if (i === 3)
    break;
}
// 0
// 1
// 2
// 3

上面程式碼執行到i等於3，就會跳出迴圈

continue語句用於立即終止本輪迴圈，返回迴圈結構的頭部，開始下一輪迴圈。

[JavaScript] 純文字檢視 複製程式碼
var i = 0;
while (i < 100){
  i++;
  if (i%2 === 0) continue;
  console.log('i當前為：' + i);
}

上面程式碼只有在i為奇數時，才會輸出i的值。如果i為偶數，則直接進入下一輪迴圈。

如果存在多重迴圈，不帶引數的break語句和continue語句都只針對最內層迴圈。

標籤（label）

JavaScript語言允許，語句的前面有標籤（label），相當於定位符，用於跳轉到程式的任意位置，標籤的格式如下:

[JavaScript] 純文字檢視 複製程式碼
label:
  statement

標籤可以是任意的識別符號，但是不能是保留字，語句部分可以是任意語句。

標籤通常與break語句和continue語句配合使用，跳出特定的迴圈。

[JavaScript] 純文字檢視 複製程式碼
top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      console.log('i=' + i + ', j=' + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0

上面程式碼為一個雙重迴圈區塊，break命令後面加上了top標籤（注意，top不用加引號），滿足條件時，直接跳出雙層迴圈。如果break語句後面不使用標籤，則只能跳出內層迴圈，進入下一次的外層迴圈。

continue語句也可以與標籤配合使用。

[JavaScript] 純文字檢視 複製程式碼
top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) continue top;
      console.log('i=' + i + ', j=' + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0
// i=2, j=0
// i=2, j=1
// i=2, j=2

上面程式碼中，continue命令後面有一個標籤名，滿足條件時，會跳過當前迴圈，直接進入下一輪外層迴圈。如果continue語句後面不使用標籤，則只能進入下一輪的內層迴圈。