iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 16
2
Modern Web

JavaScript 初心者筆記系列 第 16

JavaScript 初心者筆記: 在迴圈中 take a "break"

當我們在執行迴圈時,不一定要從頭到尾都做完,有時候只要找到一個符合條件的值,後面就可以不用跑程式碼了。如果是這種情形,那就可以用關鍵字 break 退出迴圈。


break 應該寫在哪裡?

以下兩個範例程式碼,都是 iffor 迴圈一起使用,差別在於 break 放置位置的不同。

breakif 裡:

for (var i=0; i<farm.length; i++) {
  if (farm[i].chick>50) {
    console.log(farm[i].farmer + '的小雞有超過50個')
    break;
  }
  console.log('小雞不夠多'); // 因為在 break 後面故不執行
}

break 放在 if 裡的意思是,當條件滿足 chick > 50 時整個迴圈就會終止,此時 break 後方的程式碼都不會執行。

breakif 的外面、for 的裡面:

for (var i=0; i<farm.length; i++) {
  if (farm[i].chick>50) {
    console.log(farm[i].farmer + '的小雞有超過50個')
  }
  break;
}

break 放在 if 外面 for 迴圈裡面,是指不管條件是否成立 for 迴圈都只執行一次。它讓迴圈在 if 撈出符合條件的第一筆資料後就會停止,甚至 if 條件沒成立時,也會執行一次,只不過輸出的結果是 undefined

撈資料的各種情境

那麼,當我們需要用 break 讓迴圈只執行一次時,為何不單用 if 去撈出資料就好呢?
「單用 if」 及 「使用迴圈搭配 if」兩者的意義跟效果又有什麼不同?

其實 breakif 以及 for 迴圈的搭配方式,要看使用狀況而定,在此用一些範例來輔助說明。
先看陣列資料:

var farms = [
  {
    dog: "casper",
    vegetable: ["青椒", "花椰菜"],
    farmer: "卡斯柏",
    chick:120,
  },
  {
    dog: "casper",
    vegetable: ["青椒", "花椰菜"],
    farmer: "由先生",
     chick:50,
  },
  {
    dog: "雷達",
    vegetable: ["青椒", "花椰菜"],
    farmer: "老樹會",
     chick:200,
  }
]

單用 if

if(farms.length) {
  console.log('有'+farms.length+'間農場');
}
// "有3間農場"

如果單使用 if,在此範例只能判斷是否有撈到陣列資料,會使用迴圈是因為要從陣列去撈資料出來顯示

for 迴圈 + break

var str='';
for(var i=0; i<farms.length; i++){     
str += '農夫:'+farms[i].farmer+'有'+farms[i].chick+'隻小雞';
  break;
}
console.log(str);
// "農夫:卡斯柏有120隻小雞"

如果只是想撈一筆農夫資料,就在迴圈中直接加上 break,讓程式只跑一次迴圈。

for 迴圈 + if

var str2='';
for(var i=0; i<farms.length; i++){ 
  if(farms[i].chick > 100) {
    str2 += '農夫:'+farms[i].farmer+'有'+farms[i].chick+'隻小雞';
  }
}
console.log(str2);
// "農夫:卡斯柏有120隻小雞 農夫:老樹會有200隻小雞"

想知道哪些農場的小雞有 100 隻以上,就在迴圈中加入 if 判斷,就能跑出相應的資料。

for 迴圈 + if + break

var str3='';
for(var i=0; i<farms.length; i++){ 
  if(farms[i].chick > 100) {
    str3 += '農夫:'+farms[i].farmer+'有'+farms[i].chick+'隻小雞';
  }
  break;
}
console.log(str3);
// "農夫:卡斯柏有120隻小雞"

只列出 1 筆有符合有養 100 隻小雞以上的農場。


以上列出各種情境下,可以怎麼去使用 break
另外也補充一下這篇文章,裡面有提到為何需要 break:「如果一個循環的終止條件非常複雜,那麼使用 break 語法來實現某些條件比用一個循環表達式所有的條件容易得多。」


上一篇
JavaScript 初心者筆記: 迴圈如何加總
下一篇
JavaScript 初心者筆記: 迴圈 + JSON 練習
系列文
JavaScript 初心者筆記30

尚未有邦友留言

立即登入留言