javascript
黑马pink JavaScript笔记（7）-流程控制-循环
文章目錄
- 1.循環
- （1）循環目的
- （2）JS 中的循環
- 2.for循環
- （1）語法結構
- （2） for 循環重復相同的代碼
- （3） for 循環重復不相同的代碼
- （4） for 循環重復某些相同操作
- 案例： 求1-100之間所有整數的累加和
- 案例： 求學生成績
- 3.雙重for循環
- （1）雙重 for 循環語法
- （2）打印五行五列星星
- 案例： 打印 n 行 n 列的星星
- 案例 ：打印倒三角形
- 案例 ：打印正三角形
- 案例： 打印九九乘法表
- 4.while循環
- （1）語法結構
- （2）執行思路
- （3）循環案例
- 5.do while循環
- （1）語法結構
- （2）執行思路
- （3）循環案例
- 6.continue和break
- （1）continue 關鍵字
- （2）break 關鍵字
1.循環
（1）循環目的
在實際問題中，有許多具有規律性的重復操作，因此在程序中要完成這類操作就需要重復執行某些語句
（2）JS 中的循環
在Js 中，主要有三種類型的循環語句：
-
for 循環
-
while 循環
-
do…while 循環
2.for循環
在程序中，一組被重復執行的語句被稱之為循環體，能否繼續重復執行，取決于循環的終止條件。由循環體及循環的終止條件組成的語句，被稱之為循環語句
（1）語法結構
for(初始化變量; 條件表達式; 操作表達式 ){//循環體 }- 初始化變量 就是用var 聲明一個普通變量，通常用于作為計數器使用
- 條件表達式 就是用來決定每一次循環是否執行 就是終止的條件
- 操作表達式 是每次循環最后執行的代碼，經常用于我們計數器變量進行更新（遞增或者遞減）
執行過程
- 首先執行里面的計數器變量 var i= 1 但是這句話在for里面只執行一次
- 去 i <= 100 來判斷是否滿足條件，如果滿足條件 就去執行 循環體 不滿足條件 則退出循環
- 最后去執行i++ i++是單獨寫的代碼 遞增 第一輪結束
- 接著去執行i<= 100 如果滿足條件 就去執行循環體 不滿足條件 退出循環 第二輪
斷點調試：
斷點調試是指自己在程序的某一行設置一個斷點，調試時，程序運行到這一行就會停住，然后你可以一步一步往下調試，調試過程中可以看各個變量當前的值，出錯的話，調試到出錯的代碼行即顯示錯誤，停下。
斷點調試可以幫我們觀察程序的運行過程
瀏覽器中按 F12–> sources -->找到需要調試的文件–>在程序的某一行設置斷點Watch: 監視，通過watch可以監視變量的值的變化，非常的常用。
F11: 程序單步執行，讓程序一行一行的執行，這個時候，觀察watch中變量的值的變化。
代碼調試的能力非常重要，只有學會了代碼調試，才能學會自己解決bug的能力。初學者不要覺得調試代碼麻煩就不去調試，
知識點花點功夫肯定學的會，但是代碼調試這個東西，自己不去練，永遠都學不會。
（2） for 循環重復相同的代碼
for (var i =1; i <= 10; i++) {console.log('浩瀚宇宙'); }// 可以讓用戶控制輸出次數 var num = prompt('請輸入數字：'); for (var i = 1; i <= num; i++) {console.log('無盡虛空'); }（3） for 循環重復不相同的代碼
求輸出一個人1到100歲
for (var i = 1; i <= 100 ; i++) {console.log('這個人今年'+i+'歲了');} // for 里面是可以添加其他語句的for (var i = 1; i <= 100; i++) {if(i == 1) {console.log('今年你1歲了，你出生了');} else if(i ==100) {console.log('今年你100歲了，O了，穿越去了異界！');} else {console.log('今年你' + i + '歲了');}}（4） for 循環重復某些相同操作
for 循環因為有了計數器的存在，我們還可以重復的執行某些操作，比如做一些算術運算
案例： 求1-100之間所有整數的累加和
<script>// ① 需要循環100次，我們需要一個計數器 i // ② 我們需要一個存儲結果的變量 sum ，但是初始值一定是 0 // ③ 核心算法：1 + 2 + 3 + 4 .... ，sum = sum + i;var num = 0;//求和的變量for (var i = 1; i <= 100; i++) {num = num + i;}console.log(num);</script>求1-100之間所有數的平均值
求1-100之間所有偶數和 奇數的和
求1-100之間所有能被3整除的數字的和
<script>// 1.求1-100之間所有數的平均值var sum = 0;//和變量var average = 0;//積變量for(var i = 1; i <= 100;i++ ) {sum = sum + i;}average = sum / 100;console.log(average);// 2.求1-100之間所有 偶數和 奇數和var even = 0;var odd = 0;for(var i = 1; i <= 100; i++) {if (i % 2 == 0) {even = even + i;} else {odd = odd + i;}}console.log('1-100之間所有偶數和' + even);console.log('1-100之間所有奇數和' + odd);var even1 = 0;var odd1 = 0;for(var i = 1; i <= 100; i++) {i % 2 ==0 ? even1 += i :odd1 += i;}console.log('1-100之間所有偶數和' + even1);console.log('1-100之間所有奇數和' + odd1);// 3.求1-100之間所有能被3整除的數字的和var result = 0;for (var i = 1; i <= 100; i++) {if (i % 3 ==0) {result += i;}}console.log('1-100之間所有能被3整除的數字的和為：' + result);</script>案例： 求學生成績
要求用戶輸入班級人數，之后依次輸入每個學生的成績，最后打印出該班級總的成績以及平均成績。
<script>// ① 彈出輸入框輸入總的班級人數 ( num )// ② 依次輸入學生的成績（保存起來 score），此時我們需要用到 for 循環，彈出的次數跟班級總人數有關系 條件表達式 i <= num// ③ 進行業務處理: 計算成績。 先求總成績（sum），之后求平均（average） // ④ 彈出結果var num = prompt('請輸入班級的總人數');var sum = 0;//求和的變量var average = 0;//求平均數的變量for(var i = 1; i <= num; i++) {var score = prompt('請輸入第'+i+'個學生的成績');// 因為從prompt取過來的數據是 字符串型的 需要轉換為數字型sum = sum + parseInt(score);}average = sum / num;alert('班級的總成績是' + sum);alert('班級的總平均分是' + average);</script>一行打印五個星星
<script>console.log('★★★★★');for (var i = 1; i <= 10; i++) {console.log('★');}var str = '';for (var i = 1; i <= 10; i++) {str = str + '★';}console.log(str);var num = prompt('請輸入打印星星的數量');var str1 = '';for (var i = 1; i <= num; i++) {str1 = str1 + '★';}console.log(str1);</script>3.雙重for循環
循環嵌套是指在一個循環語句中再定義一個循環語句的語法結構，例如在for循環語句中，可以再嵌套一個for 循環，這樣的 for 循環語句我們稱之為雙重for循環。
（1）雙重 for 循環語法
for (外循環的初始; 外循環的條件; 外循環的操作表達式) {for (內循環的初始; 內循環的條件; 內循環的操作表達式) { 需執行的代碼;} }- 我們把里面的循環看做是外層循環的語句
- 內層循環執行的順序也要遵循 for 循環的執行順序
- 外層循環循環一次，里面的循環執行全部
（2）打印五行五列星星
var str = ''; // 2. 外層循環負責打印五行 for (var i = 1; i <= 5; i++) {// 1. 內層循環負責一行打印五個星星for (var j = 1; j <= 5; j++) {str = str + '★';} // 每次滿 5個星星 就 加一次換行str = str + '\n'; } console.log(str);案例： 打印 n 行 n 列的星星
要求用戶輸入行數和列數，之后在控制臺打印出用戶輸入行數和列數的星星。
var rows = prompt('請輸入行數：'); var cols = prompt('請輸入列數：'); var str = ''; for (var i = 1; i <= rows; i++) {for (var j = 1; j <= cols; j++) {str = str + '★';}str = str + '\n'; } console.log(str);案例 ：打印倒三角形
//① 一共有10行，但是每行的星星個數不一樣，因此需要用到雙重 for 循環 //② 外層的 for 控制行數 i ，循環10次可以打印10行 ③ 內層的 for 控制每行的星星個數 j //④ 核心算法： 每一行星星的個數 j = i ; j <= 10; j++ //⑤ 每行打印完畢后，都需要重新換一行 // 打印倒三角形 var str = ''; for (var i = 1; i <= 10; i++) {for (var j = i; j <= 10; j++) {str = str + '★';}str += '\n'; } console.log(str);案例 ：打印正三角形
var str = ''; for (var i = 1; i <= 10; i++) {for (var j = 1; j <= i; j++) {str = str + '★';}str += '\n'; } console.log(str); //控制輸入的行列數量 ，打印倒三角形 var rows = prompt('請輸入行數'); var cols = prompt('請輸入列數'); var str = ''; if (rows == cols) {for (var i = 1; i <= rows; i++) {for (var j = i; j <= cols; j++) {str = str + '★';}str += '\n';}console.log(str); } else {alert('請再次輸入，行數和列數必須相等！'); }案例： 打印九九乘法表
👻跟打印正三角形是一樣的操作
// 1.一共有9行，但是每行的個數不一樣，因此需要用到雙重 for 循環 // 2.外層的 for 循環控制行數 i ，循環9次 ，可以打印 9 行 // 3.內層的 for 循環控制每行公式 j // 4.核心算法：每一行 公式的個數正好和行數一致， j <= i; // 5.每行打印完畢，都需要重新換一行 ⑥ 把公式用 i 和 j 替換 var str = ''; for (var i = 1; i <= 9; i++) {//外層循環控制行數for (var j = 1; j <= i; j++) {//內層循環控制每一行的數目 j <= i// str = str +'★';str = str + j + '×' + i + '=' + i * j + '\t';}str += '\n'; } console.log(str);4.while循環
（1）語法結構
while (條件表達式) {// 循環體代碼 }（2）執行思路
① 先執行條件表達式，如果結果為 true，則執行循環體代碼；如果為 false，則退出循環，執行后面代碼
② 執行循環體代碼
③ 循環體代碼執行完畢后，程序會繼續判斷執行條件表達式，如條件仍為true，則會繼續執行循環體，直到循環條件為 false 時，整個循環過程才會結束
注意：
-
使用 while 循環時一定要注意，它必須要有退出條件（操作表達式），否則會成為死循環
-
while 循環和 for 循環的不同之處在于 while 循環可以做較為復雜的條件判斷，比如判斷用戶名和密碼
（3）循環案例
// 1. 打印人的一生，從1歲到100歲 var age = 1; while (age <= 100) {console.log('老夫今年'+age+'歲了');age++; } // 2. 計算 1 ~ 100 之間所有整數的和 var sum = 0; var num = 1; while (num <= 100) {sum = sum +num;num++; } console.log('1 ~ 100 之間所有整數的和=' + sum); // 3.彈出一個提示框， 你愛我嗎？ 如果輸入我愛你，就提示結束，否則，一直詢問。 // 進階版 var message = prompt('你愛我嗎？'); while (message !== '我愛你' && message !== '愛' && message !== '愛你') {message = prompt('你愛我嗎？'); } alert('Me too!');5.do while循環
（1）語法結構
do {// 循環體代碼 - 條件表達式為 true 時重復執行循環體代碼 } while(條件表達式);（2）執行思路
跟while不同的地方在于，do while先執行一次循環體 再判斷條件,如果條件表達式結果為真，則繼續執行循環體，否則退出循環
var i = 1; do {console.log('盜天魔尊');i++; } while (i <=100)（3）循環案例
// 1.打印人的一生，從1歲到100歲 var age = 1; do {console.log('老夫今年' + age + '歲了');age++; } while (age <= 100) // 2.計算 1 ~ 100 之間所有整數的和 var sum = 0; var num = 1; do {sum += num;num++; } while (num <= 100) console.log('1 ~ 100 之間所有整數的和=' + sum); // 3.彈出一個提示框， 你愛我嗎？ 如果輸入我愛你，就提示結束，否則，一直詢問。 do {var message = prompt('你愛我嗎？'); } while (message !== '我愛你') alert('登錄成功！');循環小結
-
JS 中循環有 for 、while 、 do while
-
三個循環很多情況下都可以相互替代使用
-
如果是用來計次數，跟數字相關的，三者使用基本相同，但是我們更喜歡用 for
-
while 和 do…while 可以做更復雜的判斷條件，比 for 循環靈活一些
-
while 和 do…while 執行順序不一樣，while 先判斷后執行，do…while 先執行一次，再判斷執行
-
while 和 do…while 執行次數不一樣，do…while 至少會執行一次循環體， 而 while 可能一次也不執行
-
實際工作中，我們更常用for 循環語句，它寫法更簡潔直觀， 所以這個要重點學習
6.continue和break
（1）continue 關鍵字
退出本次（當前次的循環） 繼續執行剩余次數的循環
吃5個包子，第3個有蟲子，就扔掉第3個，繼續吃第4個第5個包子，其代碼實現如下：
//吃5個包子，第3個有蟲子，就扔掉第3個，繼續吃第4個第5個包子 for (var i =1; i <=5; i++) {if (i == 3) {continue;//只要遇見 continue就退出本次循環，直接跳到 i++}console.log('我正在吃第' + i + '個包子'); } // 求1~100之間，除了能被7整除之外的整數和 var sum = 0; for (var i =1; i <=100; i++) {if (i % 7 ==0) {continue;}sum += i; } console.log(sum);（2）break 關鍵字
break 關鍵字用于立即跳出整個循環（循環結束）。
吃5個包子，吃到第3個發現里面有半個蟲子，其余的不吃了，其代碼實現如下：
// 吃5個包子，吃到第3個發現里面有半個蟲子，其余的不吃了 for (var i = 1; i<= 5; i++) {if (i == 3) {console.log('嘔，吃到蟲子了');break;}console.log('我正在吃' + i + '個包子'); }總結
以上是生活随笔為你收集整理的黑马pink JavaScript笔记（7）-流程控制-循环的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微软的现实困难：产品需要再次变“酷”
- 下一篇： 134. 加油站（JS实现）