iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
自我挑戰組

JavaScript基礎介紹 for 30天系列 第 9

第九天 JavaScript 迴圈

  • 分享至 

  • xImage
  •  

迴圈

當想要重複做某件事情的時候,數值會依照次數有 “遞增” 或 “遞減”時,來滿足退出迴圈的條件。
如果我們想要印 1 到 10 在不用迴圈的情況下:

console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)

需要重複五遍。

接下來我們要介紹 JavaScript 裡面的兩種迴圈

  1. For 迴圈
for(i = 1: i < 5: i++) {
 console.log(i) // 印出 1 到 5
}

我們來分析括號裡面的內容,最左邊的 i 是初始值,代表一開始的狀態,中間是條件,初始的狀態滿足這個條件之後、就會跳出迴圈,最右邊的代表,每一次迴圈結束之後,要做的變動。而也有些人會像下面的例子一樣寫:

for (var i = 0; i < 5; i++) {
  // 想做的事情
}

這邊使用 var 來宣告變數的時候要小心,因為 var 的作用域跟 for 迴圈一樣。

  1. while 迴圈
    我們把上面的 for 迴圈寫法改成 while 會變成怎樣呢?
var i = 1
while ( i < 5 ) {
  console.log(i);
  i++;
}

跟 for 迴圈比起來是不是看起來比較簡潔一點呢? 其實兩者差異不大,其實迴圈最重要的就是 “條件”,如果條件沒有設定好,非常容易掉入無窮迴圈裡哦!

如果你今天想要跳過幾次迴圈或者是提早離開迴圈,應該要怎麼辦呢?這個時候我們就會遇到 break 與 continue。
這兩者的功用是:

  • break 會直接跳離迴圈
  • continue 會跳過一次,然後繼續執行迴圈

如果我們今天想要跳過 3 的倍數的話,會像是:

var i = 0
while ( i < 10 ){
  i++
  if ( i % 3 === 0){
    continue
  }
  console.log(i) // 1 2 4 5 7 8 10
}

今天迴圈就介紹到這裡啦~ 希望大家都可以有所收穫~ 我們明天見囉~~


上一篇
第八天 JavaScript 流程判斷
下一篇
第十天 JavaScript 函式
系列文
JavaScript基礎介紹 for 30天24
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言