技術標籤：前端學習記錄javascript

我前面剛寫過一篇關於if-else優化的記錄，現在突然想起來，在那裡不能全部使用return，有時候也需要使用break或者continue，就這樣再記一下三者的區別。

continue、break、return

• continue：跳過所在迴圈的本次迴圈，本次迴圈後面的語句不執行了，接著執行下一次迴圈
• break：結束所在迴圈，繼續剩下的函式
• return：結束所在函式（無論是在多少層的巢狀下）

我還是以一段雙重迴圈的程式碼來說明好了

ifElse()
function ifElse() {
  console.log("ifElse")
  const arr = ['第一個', '第二個', '第三個']
  const arr2 = ['〇', '一', '二']
  for (let i = 0; i < arr.length; i ++) {
    console.log(arr[i])
    for (let j = 0; j < arr2.length; j ++) {
      console.log(arr2[j])
    }
  }
  console.log("迴圈結束")
}
 

看一下程式碼應該是怎麼的：

首先列印一次“ifElse”；在列印第一個陣列的第一個值後，依次列印第二個陣列的三個值；然後列印第一個陣列的第二個值，再然後依次列印第二個陣列的三個值；再列印第一個陣列的第三個值後，隨後再一次依次列印第二個陣列的三個值；最後列印“迴圈結束”。

執行一下：

沒有問題，我們繼續

return

這時候我們在console.log(arr2[j])的上方加入一個判斷：if (j == 1) return（程式碼我就不貼了，太佔篇幅）；因為我們用的是return那麼結合上面所說，return是結束所在函式，會直接結束整個函式，所以這次列印的順序應該是：列印ifElse

continue

我們將if (j == 1) return中的return換成continue，意思簡單來說就是從continue往下的語句不執行了，直接進行下一次迴圈吧，所以這次列印的順序應該是：列印ifElse -> 列印地一個數組的第一個值 -> 依次列印第二個陣列的第一個值和第三個值（因為第二個值被continue跳過了） -> 列印第一個陣列的第二個值… ->列印“迴圈結束”。圖：

break

最後我們把if (j == 1) return中的return換成break，它的意思是結束所在迴圈。我們可以看到，break所在的迴圈是在第二層迴圈，所以，一旦遇到判斷條件成立的時候，第二層迴圈就會直接結束，接著執行外層迴圈剩下的語句及迴圈，過程就不再寫了，直接看圖吧：

最後

關於return，有一個小點需要注意的是，return結束的是所在的函式，如果是函式套函式，結束的僅僅是最裡層的函式（也可以理解為就近結束吧），比如：

test()
function test() {
  console.log("開始")
  let a = function () {
    console.log("函式")
    return
    console.log("函式結束")
  }
  a()
  console.log("使用完函式")
  return
  console.log("結束")
}

像a函式中的return，結束的僅僅是a函式，並不會結束test，而a()之後的return結束的就是test了