---
# System prepended metadata

title: 迴圈
tags: [HyUI4.0]

---

---
type: slide
---

# 迴圈 
#### (forEach ／while / for)
###### tags: `HyUI4.0`

---

所謂「迴圈」指的是，想要重複做某件事，
而數值會依次數有「遞增」或「遞減」的變化
來完成退出的條件

---

迴圈的常見語法有 for 以及 while 兩種

---

## for 迴圈
一個簡單的 for 迴圈語法會是這樣

```javascript=
for (var i = 0; i < 10; i++) {
  // 做某件事
}
```

---

![](https://i.imgur.com/Yrfg9Pi.png)

---

雖然在這裡用 var 來宣告變數，
但這裡的變數並不是專屬 for 迴圈內的變數
變數 i 的有效範圍其實跟 for 迴圈是相同的

```javascript [1|2-4]
var i;
for (i = 0; i < 10; i++) {
  // 做某件事
}
```
[請試著操作看看](https://www.freecodecamp.org/chinese-traditional/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops)

---

###  while 迴圈

---

把 1 印到 10，改用 while 的寫法就是

```javascript=
var i = 1;
while ( i <= 10 ){
  console.log( i );
  i++;
}
```

---

![](https://i.imgur.com/NFQq4xI.png)

[請試著操作看看](https://www.freecodecamp.org/chinese-traditional/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops)

Note:
括號 () 內代表的是「執行迴圈的條件」，
當結果為 true 的時候，
就會進入大括號 { } 的區塊，
然後執行內部程式

---

do...while 迴圈

---

與while一樣，但會先執行一次後再進入迴圈，所以可以再增加判斷去決定是否要進行迴圈
把 1 印到 10，改用do... while 的寫法就是

```javascript=
var i = 0;
var check=false
do {
  console.log(i);
  i++;
  check = true;
} while (i <= 10 && check);

```
[請試著操作看看](https://www.freecodecamp.org/chinese-traditional/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do---while-loops)

---


不管 for 或 while 迴圈
「結束的條件」是很重要的

---

在執行迴圈的時候，
若是「執行條件」沒有設定好
很容易變成「無窮迴圈」在裡面無限空轉

```javascript=

// i 不管怎麼樣都會大於等於 0
for (var i = 0; i >= 0; i++) {
  console.log(i);
}

//var q = 1;
// 結束迴圈時， q 的值仍然是 1
while ( q <= 10 ){
  console.log( q );
}
```

---

### 兩者區別



| 方式| for | while |
| -------- | -------- | -------- |
| 兩者區別    | 大多是用在迴圈<br>執行次數「明確」| 當迴圈執行次數<br>「不確定」    |

---

### 陣列處理方法

forEach

---

for迴圈的寫法

```javascript

var array = ['小明', '杰倫', '漂亮阿姨', '小美']

// 從 0 開始跑 ,直到 i 的長度 大於 陣列長度
for (var i = 0; i < array.length; i++) {
  const item = array[i];
  console.log(i, item);
}

// 分別印出
// 0 "小明"
// 1 "杰倫"
// 2 "漂亮阿姨"
// 3 "小美"

```

---

使用的陣列處理方法 forEach寫法

```javascript 

var array = ['小明', '杰倫', '漂亮阿姨', '小美']
array.forEach((item,idx)=>{
  console.log(idx,item)
})

// 分別印出
// 0 "小明"
// 1 "杰倫"
// 2 "漂亮阿姨"
// 3 "小美"

```

---

forEach 和 jQuery each
有點相似
```javascript=
// jQuery each
 $("li").each(function(){
    console.log($(this).text())
  });
```

```javascript=
// forEach
array.forEach(function(item, i) {
  console.log(i, item)
});
```

---

課程參考
5.1_for 寫法

---

# 參考資料

[運算式與運算子](https://ithelp.ithome.com.tw/articles/10191180)
[for 迴圈與 forEach 有什麼不同](https://www.casper.tw/development/2020/10/05/js-for-loop-vs-for-each/)



<style>
    .reveal h1{
        font-size:2em;
    }
    .reveal h1,.reveal h2 {
         color:#c9f2ff;
}
</style>