JavaScript 的迴圈


Posted by saffran on 2021-02-05

在 JS 裡面,迴圈有幾種形式:

  • do...while...

先做再說:do...while...

因為程式碼是從上到下執行,所以

無論如何,「do 大括號」一定會先執行一次,才會去判斷「while 的條件」

也就是說,就算「while 的條件」從一開始就不成立,「do 大括號」還是會被執行一次

記住!

  • 小括號 裡面放「條件」
  • 大括號 代表「一個區塊」,裡面放「要執行的程式碼」

語法

  • do 後面接「大括號」(因為大括號就代表“一個區塊 block”)
  • while 後面接「小括號」,裡面放「條件」
var i = 1

do {
  console.log(i)
  i++
} while (i <= 100)

console.log('finished!')

另一種寫法:
i > 100 就會 break(跳出 do...while... 的區塊)

var i = 1

do {
  console.log(i)
  i++
  if(i > 100){
    break
  }
} while (true)

console.log('finished!')

使用 break 跳出整個迴圈

使用 continue 直接進入下一圈

var i = 1

do {
  console.log(i)
  i++
  if(i % 2 === 1){
    continue
  }
  console.log('這個 i 是偶數')
} while (i <= 100)

console.log('finished!')

使用 continue 就代表「直接跳到下一圈」(還是會先檢查 while 的條件是否成立)

所以,只要 i % 2 === 1 是 true(代表 i 是奇數),就不會往下執行到 console.log('這個 i 是偶數') 這行,而會直接跳到「while 的條件判斷」,當條件是 true 就進入下一圈

output:

1
這個 i 是偶數
2
3
這個 i 是偶數
4
5
這個 i 是偶數
6
7
這個 i 是偶數
...

while 迴圈

「while 迴圈」跟「do...while...迴圈」的執行順序剛好相反

先判斷 while 條件,條件成立再去執行大括號的程式碼

「while 迴圈」跟 for loop 有一樣的「結構 & 執行順序」

結構都是「先一個小括號,再接一個大括號」

while () {

}

for () {

}
var i = 1

while (i <= 100) {
  console.log(i)
  i++
}

console.log('finished!')

另一種寫法:

i++ 直接寫在 console.log() 裡面

var i = 1

while (i <= 100) {
  console.log(i++)
}

console.log('finished!')

因為,console.log(i++) 這句的執行順序會是:

  1. 先執行 console.log(i)
  2. 再執行 i++

    可參考 把 ++ 放在“後面”跟放在“前面”的差別在哪呢?

while 迴圈也可以使用 continuebreak

無窮迴圈

如果不小心寫出無窮迴圈,可以按 ctrl + C 來中斷執行程式,否則電腦會當機(資源都被吃光了)

下面兩種方式可以寫出無窮迴圈:

  1. while 小括號裡面寫 true
var i = 1

while (true) {
  console.log(i)
  i++
}

console.log('finished!')
  1. while 小括號裡面寫 1 (因為 1 就是 true 的意思)
var i = 1

while (1) {
  console.log(i)
  i++
}

console.log('finished!')

使用時機

在多數情況下,都會使用「while 迴圈」,因為可以先判斷條件

除非,你很確定「第一次一定會執行」,才會用到「do…while…迴圈」

for loop

for loop 使用時機

for loop 通常會用在:我已經知道會有多少圈

for loop 語法

最常見的迴圈,會需要這三個要素:

  1. 初始值
  2. 終止條件
  3. i 每一圈要做的事情

所以,for loop 的語法就是這樣:

for (初始值; 終止條件; i 每一圈要做的事情){

}
for(var i=1; i<=100; i++){
  console.log(i)
}

把初始值寫在外面

也可以這樣寫:
把初始值 var i = 1 寫在外面

注意!小括號的最前面還是要寫一個「分號 ;」,因為小括號裡面一定要有三個條件,否則程式會出錯

var i = 1
for(; i<=10; i++){
  console.log(i)
}

「for loop」跟「while 迴圈」的執行順序一樣

執行順序是:

  1. var i=1
  2. 檢查條件 i<=100
  3. 如果條件成立,才會執行 console.log(i)
  4. 然後 i++
  5. 檢查條件 i<=100
  6. 如果條件成立,才會再次執行 console.log(i)

for loop 也可以使用 continuebreak

continue

範例一:印出 1~10 的偶數
i % 2 === 1 (i 是奇數)就不會執行到 console.log(i) 這行

for(var i=1; i<=10; i++){
  if(i % 2 === 1) continue
  console.log(i)
}

也可以寫成:
因為 1 就是 true

for(var i=1; i<=10; i++){
  if(i % 2) continue
  console.log(i)
}

output:

2
4
6
8
10

範例二:
i === 3 就不會執行到 console.log(i) 這行

for(var i=1; i<=5; i++){
  if(i === 3) continue
  console.log(i)
}

output:

1
2
4
5

break

for(var i=1; i<=5; i++){
  if(i === 3) break
  console.log(i)
}

output:

1
2

#javascript







Related Posts

Day06 SharePrefernce+滑動刪除+Update功能(上)

Day06 SharePrefernce+滑動刪除+Update功能(上)

Web開發學習筆記08 — prototype、__proto__、constructor、Prototype Chain(原型鏈)

Web開發學習筆記08 — prototype、__proto__、constructor、Prototype Chain(原型鏈)

5. Prototype

5. Prototype


Comments