# 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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/javascript/ji-chu/3.12-hui-quan.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.