1 - 循環(huán)
1.1 for循環(huán)
- 語法結(jié)構(gòu)
for(初始化變量; 條件表達(dá)式; 操作表達(dá)式 ){
//循環(huán)體
}
| 名稱 | 作用 |
|---|---|
| 初始化變量 | 通常被用于初始化一個計數(shù)器，該表達(dá)式可以使用 var 關(guān)鍵字聲明新的變量，這個變量幫我們來記錄次數(shù)。 |
| 條件表達(dá)式 | 用于確定每一次循環(huán)是否能被執(zhí)行。如果結(jié)果是 true 就繼續(xù)循環(huán)，否則退出循環(huán)。 |
| 操作表達(dá)式 | 用于確定每一次循環(huán)是否能被執(zhí)行。如果結(jié)果是 true 就繼續(xù)循環(huán)，否則退出循環(huán)。 |
執(zhí)行過程：
- 初始化變量，初始化操作在整個 for 循環(huán)只會執(zhí)行一次。
- 執(zhí)行條件表達(dá)式，如果為true，則執(zhí)行循環(huán)體語句，否則退出循環(huán)，循環(huán)結(jié)束。
- 執(zhí)行操作表達(dá)式，此時第一輪結(jié)束。
- 第二輪開始，直接去執(zhí)行條件表達(dá)式（不再初始化變量），如果為 true ，則去執(zhí)行循環(huán)體語句，否則退出循環(huán)。
- 繼續(xù)執(zhí)行操作表達(dá)式，第二輪結(jié)束。
- 后續(xù)跟第二輪一致，直至條件表達(dá)式為假，結(jié)束整個 for 循環(huán)。
斷點調(diào)試：
斷點調(diào)試是指自己在程序的某一行設(shè)置一個斷點，調(diào)試時，程序運行到這一行就會停住，然后你可以一步一步往下調(diào)試，調(diào)試過程中可以看各個變量當(dāng)前的值，出錯的話，調(diào)試到出錯的代碼行即顯示錯誤，停下。斷點調(diào)試可以幫助觀察程序的運行過程
斷點調(diào)試的流程：
1、瀏覽器中按 F12--> sources -->找到需要調(diào)試的文件-->在程序的某一行設(shè)置斷點
2、Watch: 監(jiān)視，通過watch可以監(jiān)視變量的值的變化，非常的常用。
3、摁下F11，程序單步執(zhí)行，讓程序一行一行的執(zhí)行，這個時候，觀察watch中變量的值的變化。
-
for 循環(huán)重復(fù)相同的代碼
比如輸出10句“媳婦我錯了”
// 基本寫法 for(var i = 1; i <= 10; i++){ console.log('媳婦我錯了~'); } // 用戶輸入次數(shù) var num = prompt('請輸入次數(shù):')； for ( var i = 1 ; i <= num; i++) { console.log('媳婦我錯了~'); } -
for 循環(huán)重復(fù)不相同的代碼
例如，求輸出1到100歲：
// 基本寫法
for (var i = 1; i <= 100; i++) {
console.log('這個人今年' + i + '歲了');
}
例如，求輸出1到100歲，并提示出生、死亡
// for 里面是可以添加其他語句的
for (var i = 1; i <= 100; i++) {
if (i == 1) {
console.log('這個人今年1歲了， 它出生了');
} else if (i == 100) {
console.log('這個人今年100歲了，它死了');
} else {
console.log('這個人今年' + i + '歲了');
}
}
for循環(huán)因為有了計數(shù)器的存在，還可以重復(fù)的執(zhí)行某些操作，比如做一些算術(shù)運算。
<script>
// 求 1~100 之間的整數(shù)累加和
// 需要循環(huán)100次，我們需要一個計數(shù)器 i
// 我們需要一個存儲結(jié)果的變量 sum ，但是初始值一定是 0
// 核心算法：1 + 2 + 3 + 4 .... ，sum = sum + i;
var sum = 0; // 求和 的變量
for (var i = 1; i <= 100; i++) {
// sum = sum + i;
sum += i;
}
console.log(sum); // 5050
</script>
// 1. 求1-100之間所有數(shù)的平均值 需要一個 sum 和的變量 還需要一個平均值 average 變量
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之間所有偶數(shù)和奇數(shù)的和 我們需要一個偶數(shù)的和變量 even 還需要一個奇數(shù) odd
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 之間所有的偶數(shù)和是' + even);
console.log('1~100 之間所有的奇數(shù)和是' + odd);
// 3. 求1-100之間所有能被3整除的數(shù)字的和
var result = 0;
for (var i = 1; i <= 100; i++) {
if (i % 3 == 0) {
// result = result + i;
result += i;
}
}
console.log('1~100之間能夠被3整數(shù)的數(shù)字的和是：' + result);
</script>
- 求學(xué)生成績案例
<script>
// 彈出輸入框輸入總的班級人數(shù)(num)
// 依次輸入學(xué)生的成績（ 保存起來 score）， 此時我們需要用到
// for 循環(huán)， 彈出的次數(shù)跟班級總?cè)藬?shù)有關(guān)系 條件表達(dá)式 i <= num
// 進(jìn)行業(yè)務(wù)處理: 計算成績。 先求總成績（ sum）， 之后求平均成績（ average）
// 彈出結(jié)果
var num = prompt('請輸入班級的總?cè)藬?shù):'); // num 總的班級人數(shù)
var sum = 0; // 求和的變量
var average = 0; // 求平均值的變量
for (var i = 1; i <= num; i++) {
var score = prompt('請您輸入第' + i + '個學(xué)生成績');
// 因為從prompt取過來的數(shù)據(jù)是 字符串型的需要轉(zhuǎn)換為數(shù)字型
sum = sum + parseFloat(score);
}
average = sum / num;
alert('班級總的成績是' + sum);
alert('班級平均分是：' + average);
</script>
1.2 雙重for循環(huán)
-
雙重 for 循環(huán)概述
循環(huán)嵌套是指在一個循環(huán)語句中再定義一個循環(huán)語句的語法結(jié)構(gòu)，例如在for循環(huán)語句中，可以再嵌套一個for 循環(huán)，這樣的 for 循環(huán)語句我們稱之為雙重for循環(huán)。
-
雙重 for 循環(huán)語法
for (外循環(huán)的初始; 外循環(huán)的條件; 外循環(huán)的操作表達(dá)式) { for (內(nèi)循環(huán)的初始; 內(nèi)循環(huán)的條件; 內(nèi)循環(huán)的操作表達(dá)式) { 需執(zhí)行的代碼; } }- 內(nèi)層循環(huán)可以看做外層循環(huán)的循環(huán)體語句
- 內(nèi)層循環(huán)執(zhí)行的順序也要遵循 for 循環(huán)的執(zhí)行順序
- 外層循環(huán)執(zhí)行一次，內(nèi)層循環(huán)要執(zhí)行全部次數(shù)
-
打印n行n列的星星
var rows = prompt('請您輸入行數(shù):'); var cols = prompt('請您輸入列數(shù):'); var str = ''; for (var i = 1; i <= rows; i++) { for (var j = 1; j <= cols; j++) { str = str + '★'; } // 每次滿 cols個星星 就 加一次換行 \n str += '\n'; } console.log(str);核心邏輯：
1.內(nèi)層循環(huán)負(fù)責(zé)一行打印多少個星星
2.外層循環(huán)負(fù)責(zé)打印多少行
打印倒三角形案例
<script>
var str = '';
for (var i = 1; i <= 10; i++) { // 外層循環(huán)控制行數(shù)
for (var j = i; j <= 10; j++) { // 里層循環(huán)打印的個數(shù)不一樣 j = i
str = str + '★';
}
str += '\n';
}
console.log(str);
</script>
- 九九乘法表案例
<script>
// 一共有9行，但是每行的個數(shù)不一樣，因此需要用到雙重 for 循環(huán)
// 外層的 for 循環(huán)控制行數(shù) i ，循環(huán)9次 ，可以打印 9 行
// 內(nèi)層的 for 循環(huán)控制每行公式 j
// 核心算法：每一行 公式的個數(shù)正好和行數(shù)一致， j <= i;
// 每行打印完畢，都需要重新?lián)Q一行
var str = '';
for (var i = 1; i <= 9; i++) { // 外層循環(huán)控制行數(shù)
for (var j = 1; j <= i; j++) { // 里層循環(huán)控制每一行的個數(shù) j <= i
// 1 × 2 = 2
// str = str + '★';
str += j + '×' + i + '=' + i * j + '\t'; // 每個公式之間間隔一個tab鍵
}
str += '\n';
}
console.log(str);
</script>
-
for 循環(huán)小結(jié)
- for 循環(huán)可以重復(fù)執(zhí)行某些相同代碼
- for 循環(huán)可以重復(fù)執(zhí)行些許不同的代碼，因為我們有計數(shù)器
- for 循環(huán)可以重復(fù)執(zhí)行某些操作，比如算術(shù)運算符加法操作
- 隨著需求增加，雙重for循環(huán)可以做更多、更好看的效果
- 雙重 for 循環(huán)，外層循環(huán)一次，內(nèi)層 for 循環(huán)全部執(zhí)行
- for 循環(huán)是循環(huán)條件和數(shù)字直接相關(guān)的循環(huán)
1.3 while循環(huán)
while語句的語法結(jié)構(gòu)如下：
while (條件表達(dá)式) {
// 循環(huán)體代碼
}
執(zhí)行思路：
- 1 先執(zhí)行條件表達(dá)式，如果結(jié)果為 true，則執(zhí)行循環(huán)體代碼；如果為 false，則退出循環(huán)，執(zhí)行后面代碼
- 2 執(zhí)行循環(huán)體代碼
- 3 循環(huán)體代碼執(zhí)行完畢后，程序會繼續(xù)判斷執(zhí)行條件表達(dá)式，如條件仍為true，則會繼續(xù)執(zhí)行循環(huán)體，直到循環(huán)條件為 false 時，整個循環(huán)過程才會結(jié)束
注意：
使用 while 循環(huán)時一定要注意，它必須要有退出條件，否則會成為死循環(huán)
while循環(huán)案例
<script>
// 1. 打印人的一生，從1歲到100歲
var i = 1;
while (i <= 100) {
console.log('這個人今年' + i + '歲了');
i++;
}
// 2. 計算 1 ~ 100 之間所有整數(shù)的和
var sum = 0;
var j = 1;
while (j <= 100) {
sum += j;
j++
}
console.log(sum);
// 3. 彈出一個提示框， 你愛我嗎？ 如果輸入我愛你，就提示結(jié)束，否則，一直詢問。
var message = prompt('你愛我嗎?');
while (message !== '我愛你') {
message = prompt('你愛我嗎?');
}
alert('我也愛你啊！');
</script>
1.4 do-while循環(huán)
do... while 語句的語法結(jié)構(gòu)如下：
do {
// 循環(huán)體代碼 - 條件表達(dá)式為 true 時重復(fù)執(zhí)行循環(huán)體代碼
} while(條件表達(dá)式);
執(zhí)行思路
1 先執(zhí)行一次循環(huán)體代碼
-
2 再執(zhí)行條件表達(dá)式，如果結(jié)果為 true，則繼續(xù)執(zhí)行循環(huán)體代碼，如果為 false，則退出循環(huán)，繼續(xù)執(zhí)行后面代碼
注意：先再執(zhí)行循環(huán)體，再判斷，do…while循環(huán)語句至少會執(zhí)行一次循環(huán)體代碼
1.5 continue、break
continue 關(guān)鍵字用于立即跳出本次循環(huán)，繼續(xù)下一次循環(huán)（本次循環(huán)體中 continue 之后的代碼就會少執(zhí)行一次）。
例如，吃5個包子，第3個有蟲子，就扔掉第3個，繼續(xù)吃第4個第5個包子，其代碼實現(xiàn)如下：
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log('這個包子有蟲子，扔掉');
continue; // 跳出本次循環(huán)，跳出的是第3次循環(huán)
}
console.log('我正在吃第' + i + '個包子呢');
}
運行結(jié)果：
- 求1~100 之間， 除了能被7整除之外的整數(shù)和
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
continue;
}
sum += i;
}
console.log(sum);
break 關(guān)鍵字用于立即跳出整個循環(huán)（循環(huán)結(jié)束）。
例如，吃5個包子，吃到第3個發(fā)現(xiàn)里面有半個蟲子，其余的不吃了，其代碼實現(xiàn)如下：
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整個for 循環(huán)，跳到整個for下面的語句
}
console.log('我正在吃第' + i + '個包子呢');
}
運行結(jié)果：
