---
type: slide
---

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

---

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

---

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

---

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

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

---


---

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

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 的寫法就是

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

---


[請試著操作看看](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 的寫法就是

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 迴圈
「結束的條件」是很重要的

---

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

// 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迴圈的寫法

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寫法

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

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

---

forEach 和 jQuery each
有點相似

// jQuery each
 $("li").each(function(){
    console.log($(this).text())
  });

// 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>