1 - 循環
1.1 for循環
- 語法結構
for(初始化變量; 條件表達式; 操作表達式 ){
//循環體
}
| 名稱 | 作用 |
|---|---|
| 初始化變量 | 通常被用於初始化一個計數器，該表達式可以使用 var 關鍵字聲明新的變量，這個變量幫我們來記錄次數。 |
| 條件表達式 | 用於確定每一次循環是否能被執行。如果結果是 true 就繼續循環，否則退出循環。 |
| 操作表達式 | 用於確定每一次循環是否能被執行。如果結果是 true 就繼續循環，否則退出循環。 |
執行過程：
- 初始化變量，初始化操作在整個 for 循環只會執行一次。
- 執行條件表達式，如果爲true，則執行循環體語句，否則退出循環，循環結束。
- 執行操作表達式，此時第一輪結束。
- 第二輪開始，直接去執行條件表達式（不再初始化變量），如果爲 true ，則去執行循環體語句，否則退出循環。
- 繼續執行操作表達式，第二輪結束。
- 後續跟第二輪一致，直至條件表達式爲假，結束整個 for 循環。
-
斷點調試：
斷點調試是指自己在程序的某一行設置一個斷點，調試時，程序運行到這一行就會停住，然後你可以一步一步往下調試，調試過程中可以看各個變量當前的值，出錯的話，調試到出錯的代碼行即顯示錯誤，停下。斷點調試可以幫助觀察程序的運行過程 -
斷點調試的流程：
1、瀏覽器中按 F12–> sources -->找到需要調試的文件–>在程序的某一行設置斷點
2、Watch: 監視，通過watch可以監視變量的值的變化，非常的常用。
3、摁下F11，程序單步執行，讓程序一行一行的執行，這個時候，觀察watch中變量的值的變化。
- for 循環重複相同的代碼
比如輸出10句“媳婦我錯了”
```js
// 基本寫法
for(var i = 1; i <= 10; i++){
console.log('媳婦我錯了~');
}
// 用戶輸入次數
var num = prompt('請輸入次數:')；
for ( var i = 1 ; i <= num; i++) {
console.log('媳婦我錯了~');
}
-
for 循環重複不相同的代碼
例如，求輸出1到100歲：
// 基本寫法
for (var i = 1; i <= 100; i++) {
console.log(‘這個人今年’ + i + ‘歲了’);
}
例如，求輸出1到100歲，並提示出生、死亡
```js
// 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循環因爲有了計數器的存在，還可以重複的執行某些操作，
比如做一些算術運算。
1.2 雙重for循環
-
雙重 for 循環概述
循環嵌套是指在一個循環語句中再定義一個循環語句的語法結構，例如在for循環語句中，可以再嵌套一個for 循環，這樣的 for 循環語句我們稱之爲雙重for循環。 -
雙重 for 循環語法
for (外循環的初始; 外循環的條件; 外循環的操作表達式) { for (內循環的初始; 內循環的條件; 內循環的操作表達式) { 需執行的代碼; } }- 內層循環可以看做外層循環的循環體語句
- 內層循環執行的順序也要遵循 for 循環的執行順序
- 外層循環執行一次，內層循環要執行全部次數
-
打印三行三列星星
var star = ''; for (var j = 1; j <= 3; j++) { for (var i = 1; i <= 3; i++) { star += '☆' } // 每次滿 3個星星 就 加一次換行 star += '\n' } console.log(star);核心邏輯：
1.內層循環負責一行打印3個星星
2.外層循環負責打印3行
-
for 循環小結
- for 循環可以重複執行某些相同代碼
- for 循環可以重複執行些許不同的代碼，因爲我們有計數器
- for 循環可以重複執行某些操作，比如算術運算符加法操作
- 隨着需求增加，雙重for循環可以做更多、更好看的效果
- 雙重 for 循環，外層循環一次，內層 for 循環全部執行
- for 循環是循環條件和數字直接相關的循環
1.3 while循環
while語句的語法結構如下：
while (條件表達式) {
// 循環體代碼
}
執行思路：
- 1 先執行條件表達式，如果結果爲 true，則執行循環體代碼；如果爲 false，則退出循環，執行後面代碼
- 2 執行循環體代碼
- 3 循環體代碼執行完畢後，程序會繼續判斷執行條件表達式，如條件仍爲true，則會繼續執行循環體，直到循環條件爲 false 時，整個循環過程纔會結束
注意：
- 使用 while 循環時一定要注意，它必須要有退出條件，否則會成爲死循環
1.4 do-while循環
do… while 語句的語法結構如下：
do {
// 循環體代碼 - 條件表達式爲 true 時重複執行循環體代碼
} while(條件表達式);
執行思路
-
1 先執行一次循環體代碼
-
2 再執行條件表達式，如果結果爲 true，則繼續執行循環體代碼，如果爲 false，則退出循環，繼續執行後面代碼
注意：先再執行循環體，再判斷，do…while循環語句至少會執行一次循環體代碼
1.5 continue、break
continue 關鍵字用於立即跳出本次循環，繼續下一次循環（本次循環體中 continue 之後的代碼就會少執行一次）。
例如，喫5個包子，第3個有蟲子，就扔掉第3個，繼續喫第4個第5個包子，其代碼實現如下：
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log('這個包子有蟲子，扔掉');
continue; // 跳出本次循環，跳出的是第3次循環
}
console.log('我正在喫第' + i + '個包子呢');
}
運行結果：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-E0irB9yb-1584787001492)(images\圖片1.png)]
break 關鍵字用於立即跳出整個循環（循環結束）。
例如，喫5個包子，喫到第3個發現裏面有半個蟲子，其餘的不吃了，其代碼實現如下：
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整個for 循環，跳到整個for下面的語句
}
console.log('我正在喫第' + i + '個包子呢');
}
2 - 代碼規範
2.1 標識符命名規範
- 變量、函數的命名必須要有意義
- 變量的名稱一般用名詞
- 函數的名稱一般用動詞
2.2 操作符規範
// 操作符的左右兩側各保留一個空格
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整個 for 循環，跳到整個for循環下面的語句
}
console.log('我正在喫第' + i + '個包子呢');
}
2.3 單行註釋規範
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 單行註釋前面注意有個空格
}
console.log('我正在喫第' + i + '個包子呢');
}
2.4 其他規範
關鍵詞、操作符之間後加空格