文章目錄

• • • 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 聲明一個普通變量，通常用于作為計數器使用
• 條件表達式 就是用來決定每一次循環是否執行 就是終止的條件
• 操作表達式 是每次循環最后執行的代碼，經常用于我們計數器變量進行更新（遞增或者遞減）

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

執行過程

• 首先執行里面的計數器變量 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 循環的執行順序
• 外層循環循環一次，里面的循環執行全部

for (var i = 1; i <= 3; i++) {console.log(' 這是外層循環第'+i+'次');for (var j = 1; j <= 3; j++) {console.log('這是外層循環第'+j+'次');} }

（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 循環可以做較為復雜的條件判斷，比如判斷用戶名和密碼

var num = 1; while (num <= 100) {console.log('繁華一剎');num++; }

（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）-流程控制-循环的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。