重學JS（八）—— 跳出迴圈

遇到過幾個迴圈的問題，寫篇文章總結下。

語法

break：立即退出迴圈，強制執行迴圈後面的語句。
continue：立即退出迴圈，回到迴圈頂部繼續執行程式碼。
寫個例子感受下

let num = 0;
for(let i=0;i<10;i++){
  if(i == 3)
    break;
  num++;
}
console.log(num);  //3

num = 0;
for(let i=0;i<10;i++){
  if(i == 3)
    continue;
  num++;
}
console.log(num);  //9

差距明顯了，break跳出所有迴圈，continue只跳過當前迴圈，所以只減少了1次 num自加的過程。

跳出多層迴圈

有時會有跳出多層迴圈的需求，內層迴圈滿足某個條件時，立刻退出。

let num = 0;
for(let i=0;i<10;i++){
  for(let j=0;j<10;j++){
      if(j == 3)
        break;
      num++;
   }
}
console.log(num);  //30

在內層迴圈中使用break，只會跳出內層迴圈，外層的迴圈還在繼續工作。
如果想要跳出全部迴圈，該怎麼辦？
可以使用label語句。它可以在程式碼中新增標籤，以便將來使用。

let num = 0;
outer:    //這裡就是label語句了
for(let i=0;i<10;i++){
  for(let j=0;j<10;j++){
      if(j == 3)
        break outer;
      num++;
   }
}
console.log(num);  //3。只有3，顯然連外層迴圈都跳出了。

break和continue語句都可以與label語句聯合使用，從而返回程式碼中特定的位置。

let num = 0;
outer: 
for(let i=0;i<10;i++){
  for(let j=0;j<10;j++){
      if(j == 3)
        continue outer;
      num++;
   }
}
console.log(num);  //30

上述情況下，continuet語句會強制繼續執行迴圈——退出內部迴圈，執行外部迴圈。此時和內部迴圈中使用break效果一致。

return

程式碼中經常會出現這樣的句子

//如果未通過校驗就返回，下面的程式碼將不會再執行
if(!checkResult)
  return

那麼他能用來跳出迴圈嗎？理論上是可行的，畢竟它是把整個函式結束了，試試。

let num = 0;
function test(){
  for(let i=0;i<10;i++){
    if(i == 3)
      return;
    num++;
  }
  console.log('finish');
}
test();
console.log(num);  //3

可見他跳出了迴圈。注意，return語句就是用於指定函式返回的值。return語句只能出現在函式體內，出現在程式碼中的其他任何地方都會造成語法錯誤。因為return直接把函式返回了，所以finish沒有被列印出來。如果是break或者continue就會列印出來。
再試試跳出多層迴圈。

let num = 0;
function test(){
  for(let i=0;i<10;i++){
    for(let j=0;j<10;j++){
      if(j == 3)
        return;
      num++;
     }
  }
}
test();
console.log(num);  //3

可以。如果將需要用到多層迴圈的這部分程式碼封裝到一個函式中，不失為一個好辦法。

其他迴圈

break continue也可以用於for in，for of,while迴圈。

let obj = {
  a:1,
  b:2,
  c:3,
  d:4
}
let num = 0;
for(let key in obj){
  if(key == "b")
    break;
  num++;
}
console.log(num);  //1

num = 0;
for(let key in obj){
  if(key == "b")
    continue;
  num++;
}
console.log(num);  //3

forEach迴圈，break、continue、return命令都不能奏效。