[JS101] JavaScript 迴圈

loop

概念

• 重複一直做一樣的事情
• 若執行無窮迴圈，會一直吃電腦資源，按 clt + c 終止程式
• 別的程式有 label & goto 這兩個語法

do while

• 範例：

  var i = 1
  do {
  console.log(i)
  i++ 
  } while(i<=100)
  console.log('i=', i)
  

• 如果 while(true) 則會回到 do，變成無窮迴圈

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

• break 跳出迴圈

var i = 1
do {
  console.log(i)
  i++
  if(i % 2 === 0) {
  continue
  }
  console.log('this is a odd number')
} while(i <= 50)
console.log('i=', i)

• continue 直接進到下一個 loop（在符合 while 的條件下）

去瀏覽器上 debug

• 可以視覺化的知道電腦怎麼跑程式的，也對 debug 很有幫助

  <script>
  debugger
  var i = 1
  do {
    console.log(i)
    i++
  } while (i < 10)
  console.log('i=', i)
  </script>
  

  

while

• 和 do while 的差別是因為 do 在前面，所以 {} 裡面的內容一定會被執行一次

  先執行才去判斷條件

• while 為先判斷條件才去執行，較常使用

• 範例

  var i = 1
  while(i <= 100){
    console.log(1)
    1++
  }
  console.log('i=', i)
  

for

• 先檢查結束條件，再執行迴圈，和 while 比較像
• 通常用在已經知道有多少迴圈的情況下
• 常見的迴圈，例如：while，會有初始值、終止條件、每一圈都要做的事情，這三個元素

  var i = 1 //初始值
    while(i <= 100){ //終止條件
      console.log(i)
      i++ // 每一圈都要做的事情
  }
  

• 範例

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

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

  • 順序：
    1. var i = 1
    2. i<=100
    3. console.log(i)
    4. i++
• 範例二：和陣列結合

  var height = [170, 163, 150]
  for(var i = 0; i<=2; i++){
    console.log(height[i])
  }
  

  var height = [170, 163, 150]
  for(var i = 0; i<height.length; i++){
    console.log(height[i])
  }