JS 迴圈 (JS 教學) (for 迴圈 , Foreach 迴圈 ) 可以說是 JS 基礎用法 , 程序編寫的基本功.
運用LOOPING可以減少程式碼, 只需透過for內的BLOCK, 就可把程式碼重用, 避免要不停把程序碼重覆.
以下我會介紹迴圈的結構, 運行方式, 如何離開迴圈, 以及迴圈的種類.
1) 迴圈的結構, 運行方式, 以及如何離開迴圈
先看以下例子:
for (int i =0; i< 10; i++){
//Block Of Code
}
首先有關鍵字, for, 表明用途.
第一格為初始化, 把i設定為0數值.
第二格為條件句, 即STATEMENT. 條件句主要由Variable, 運算符號, 比較數值組成
第三格為加數器, i++ 即把 i 加上 1
條件句, 如:
x < 10;
只要x比10少, 就會返回true, 反之返回False
運行方式
首先會行第一格, 把i設定為0數值
之後會執行第二格, i++, 即把i值加1.
再之後會執行第二格, 即i<10.
如i比10小, 就會執行Block, 行完Block後再行i++, 再行條件句把x繼續比較, 直至i等如10, 離開LOOP.
結束迴圈: break (只跳出迴圈), return(跳出Method)
跳過迴圈: continue(怱略餘下for Block內的程式碼, 返回for 的第三格, 即例中的 i++)
2) 迴圈的種類
最基本分類, for, foreach, while, do-while, 在本文會介紹for及for each
3) 迴圈的用法
for loop的用法重在LOOP 內 BLOCK的重用, 加上if, Array, Collection, Interface等, 可重用當中的FLow, METHOD.
3) 迴圈的用法一覽表
本篇暫時只以基礎的介紹, 以下為一些例子顯示出for loop的用法.
| 句型 | 次序: |
| for (statement 1; statement 2; statement 3) { // code block to be executed } | statement 1 (只行一次) code block to be executed statement 3 statement 2 code block to be executed statement 3 statement 2 …… 直至statement 2條件不乎合, 跳出LOOP |
| 例子 | 次序: |
| for (i = 0; i <= 20; i++) { console.log(i) } // 0 // 1 // …. // 19 // 20 | int i = 0 (只行一次) Console.log(i) i++ (即i=1) i < 20 (條件乎合, 繼續) Console.log(i) i++ (即i=2) i < 20 (條件乎合, 繼續) Console.log(i) …… i++ (即i=20, 條件不乎合, 跳出LOOP) 直至 i 大於 20 |
| 例子 | 次序: |
| for (i = 5; i <= 20; i+=5) { console.log(i); } //5 //10 //15 //20 | int i = 5 (只行一次) Console.log(i) i+=5 (即i=10)i < 20 (條件乎合, 繼續) Console.log(i) i+=5 (即i=15) i < 20 (條件乎合, 繼續) Console.log(i)…… i+=5 (即i=20, 條件不乎合, 跳出LOOP) 直至 i 大於 20 |
| 句型 | 次序: | |
| array.foreach (function(item) { // code block to be executed }); | 拿出第一個item在items中 行BLOCK拿出第二個item在items中 行BLOCK …… 直至items所有的Item也拿完, 跳出LOOP | |
| 例子 | ||
| names = [“John”, “Mary”, “Peter”]; names.forEach(function (item) { console.log(item); }); //John //Mary //Peter | 等同 | names = [“John”, “Mary”, “Peter”] for (i = 0; i < names.length; i++) { name = names[i]; console.log(name); } //John //Mary //Peter |
相關頁面:
JS 條件句 – 學會 if 的基礎用法 – Control flow 的流程
JS While – While 迴圈的基礎用法 – BLOCK內重用 JS Code
參考資料: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for