> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/javascript/ji-chu/3.12-hui-quan.md).

# 3.12 迴圈(Loop)

在 `javascript/practice` 資料夾下，建立 `loop.html` 檔案，以便練習。

## for 迴圈

### 範例 1：基本形式

示意圖：

![for loop](/files/khOfvbX1OqMgfgKSHG0z)

```javascript
for(var i = 0; i < 3; i++){
  console.log("迴圈：" + i);
}
console.log("結束迴圈，i 的值：" + i);
```

### 範例 2：var 與 let

```javascript
for(let i = 0; i < 10; i++){
  console.log("迴圈：" + i);
}
console.log("結束迴圈，i 的值：" + i);
console.log("因為上一行出錯，js 被中斷執行了，所以不會在 console 中印出。");
```

錯誤訊息如下圖：

![](/files/-MCUVEKc81SEAS6g9m_a)

{% hint style="info" %}
因為 i 的可視範圍(scope)是區塊(Block)，也就是用大括號包含來的區域，所以此例來說，i 只存在於 for 迴圈之中。
{% endhint %}

{% hint style="info" %}
JS 因為在第 4 行的地方出錯，造成了後面的程式碼被中斷了。
{% endhint %}

### 範例 3：break

遇到 break，直接結束整個 for 迴圈：

```javascript
for(var i = 0; i < 10; i++){
  if(i == 3){
    console.log("迴圈：" + i);
    break;
  }
  console.log("迴圈：" + i);
}
console.log("結束迴圈，i 的值：" + i);

/*
迴圈：0
迴圈：1
迴圈：2
迴圈：3
結束迴圈，i 的值：3
*/
```

### 範例 4：continue

遇到 continue，結束當次的 for 迴圈，繼續執行下一次的迴圈。

```javascript
for(var i = 0; i < 10; i++){
  if(i == 3){
    continue;
  }
  console.log("迴圈：" + i);
}
console.log("結束迴圈，i 的值：" + i);

/*
迴圈：0
迴圈：1
迴圈：2
迴圈：4
迴圈：5
迴圈：6
迴圈：7
迴圈：8
迴圈：9
結束迴圈，i 的值：10
*/
```

### 範例 5：無窮迴圈(要避免此狀況)

```javascript
for(var i = 0; i < 10; i--){
  console.log("迴圈：" + i);
}
console.log("結束迴圈，i 的值：" + i);
```

{% hint style="warning" %}
瀏覽器是會當掉的……所以在寫任何的迴圈時，都要留意何時離開迴圈。
{% endhint %}

## for...of 迴圈：針對陣列、字串資料

陣例格式：

```javascript
var cars = ['BMW', 'Volvo', 'Mini']; // 中括號包起來就是陣列格式
var car;
for (car of cars) {
  console.log(car);
}

/*
BMW
Volvo
Mini
*/
```

字串格式：

```javascript
var text_string = "JavaScript";
var each_character;
for (each_character of text_string) {
  console.log(each_character);
}

/*
J
a
v
a
S
c
r
i
p
t
*/
```

## for...in 迴圈：針對物件資料

物件格式：

```javascript
var person = {
  fname: "John",
  lname: "Doe",
  age: 18
}; // 大括號包起來，就是物件格式

for (let key in person) {
  console.log(key + "：" + person[key]);
}

/*
fname：John
lname：Doe
age：18
*/
```

## while 迴圈

示意圖：

![while loop](/files/ec0soyc7qkDhrQ3sHght)

### 範例 1：基本形式

```javascript
var a = 0;
while(a < 10){
  console.log("迴圈 " + a);
  a++;
}
console.log("結束迴圈，a 的值：" + a);

/*
迴圈 0
迴圈 1
迴圈 2
迴圈 3
迴圈 4
迴圈 5
迴圈 6
迴圈 7
迴圈 8
迴圈 9
結束迴圈，a 的值：10
*/
```

### 範例 2：無窮迴圈(要避免此狀況)

```javascript
var a = 0;
while(a < 10){
  console.log("迴圈 " + a);
}
console.log("結束迴圈，a 的值：" + a);
```

{% hint style="danger" %}
此程式碼在進入 while 迴圈之後，變數 a 的值一直都是 0，則 a < 10 的判斷永遠都是 true，會造成無窮迴圈一直在跑 while 迴圈裡的程式，以致於瀏覽器當機。
{% endhint %}

## do...while 迴圈

示意圖：

![do while loop](/files/3je13mkGRqY8EOQTLHvP)

### 範例 1：基本形式

```javascript
var a = 0;
do{
  console.log("迴圈 " + a);
  a++;
}while(a < 10);
console.log("結束迴圈，a 的值：" + a);

/*
迴圈 0
迴圈 1
迴圈 2
迴圈 3
迴圈 4
迴圈 5
迴圈 6
迴圈 7
迴圈 8
迴圈 9
結束迴圈，a 的值：10
*/
```

{% hint style="info" %}
與 while 迴圈主要差在哪裡？ do 大括號裡的程式，至少一定會執行一次。
{% endhint %}

## 練習：九九乘法表

分別用 for 迴圈及 while 迴圈，撰寫九九乘法表。在 console 中，如下輸出(顯示部份)：

```javascript
/*

1 x 1 = 1
1 x 2 = 2
1 x 3 = 3
1 x 4 = 4
1 x 5 = 5
1 x 6 = 6
1 x 7 = 7
...
2 x 1 = 2
2 x 2 = 4
2 x 3 = 6
...
9 x 9 = 81

*/
```

參考作法：

for 迴圈寫法：

{% embed url="<https://codepen.io/carlos411/pen/GRowMXg>" %}

while 迴圈寫法：

{% embed url="<https://codepen.io/carlos411/pen/rNxQGRK>" %}