---
# System prepended metadata

title: ✰ JavaScript for 迴圈 ✰
tags: [前端養成, forEach, for, switch, 迴圈教學, JavaScript, loop, 新手筆記]

---

# JavaScript｜早安午安晚安我是迴圈💞 用 for 迴圈~~勇敢追愛~~💞

JavaScript for / forEach / switch 新手筆記：用「第幾天愛你/第幾天決定不愛你」和「打包早安午安晚安濃情蜜意」的範例，帶你從初始化、條件判斷到迭代條件，一次搞懂迴圈邏輯 🚀


### ✰ for 陳述式 - 傳統迴圈
```javascript!
for (初始化 initialization; 條件 condition; 條件後動作 afterthought) {
    /*
     (針對這次達成目的做法)
     每天一句早安午安晚安，直到你愛上我為止。
    */
}
```
initialization ( 初始化 - init ):
在迴圈開始前執行一次，通常用於初始化迴圈的計數器。

🪬今天開始嘗試第一天
let i=0;

condition ( 條件 ):
每次迴圈迭代前，會檢查這個條件。 如果條件為 true，則執行迴圈主體；如果為 false，則終止迴圈。

🪬設定止損點：第十天後你還沒愛上我，終止騷擾行為
i<=10;

afterthought (結束條件 (condition) 時的變動):
在每次迴圈主體執行完畢後執行，通常用於更新計數器或其他變數。

🪬每過一天，就計算一次
i++;

↓ 跑看看吧，看有沒有被我愛(騷)到(擾)
```javascript!

→ 把愛你的流程組裝起來 〠

let = 1; //準備愛(騷)你(擾)的第一天
for(; i<=10; i++){ //超過第十天，每天愛(騷)你(擾)一次，超過第十天我就不煩你ㄌ
  console.log(`第 ${i} 天：早安 🌞`);
  console.log(`第 ${i} 天：午安 🍱`);
  console.log(`第 ${i} 天：晚安 🌙`);//表達式
}

```
![image](https://hackmd.io/_uploads/ByhHzgytgg.png)
還挺...~~認~~ (擾) ~~真~~ (民)ㄉ...

↑ 很難看出每一天做了什麼
#### → 把每一天都裝起來！（for+for)

♞ 騷擾起手式：
把每一天拆出來 → 跑第一個 for
再把~~愛~~(騷)~~你~~(擾)全部列一遍  → 跑第二個 for

```javascript!

let call = ['早安 🌞', '午安 🍱','晚安 🌙']; // call.length=3
let day = 1;//騷擾從第一天開始


for(; day<=10; day++){
    console.log(`今天是第 ${day} 天喔～ 🫶`);
    
    for(let i=0; i<call.length; i++){
        console.log(`${call[i]}`);
    }
   }
    /*
     step 1 宣告 i = 0;(初始化→從引索0(早安 🌞)開始跑)
     step 2 判斷是否為 true ; call.length=3
     第一次 i=0 i(0)<3 → true ✓跑 印出{call[i]} → {call[0]} → 早安 🌞 
     第二次 i=1 i(1)<3 → true ✓跑 印出{call[i]} → {call[1]} → 午安 🍱
     第三次 i=2 i(2)<3 → true ✓跑 印出{call[i]} → {call[2]} → 晚安 🌙
     第四次 i=3 i(3)<3 → false ✘不跑 3不可能大於3 因此到此結束loop* /
     
```
![image](https://hackmd.io/_uploads/rJCMgeZtgx.png)


這樣忽然嘎然而止，好像有點意外
我要宣告不愛你，讓你後悔！！！！〠

#### → 宣告第十一天不愛你！(for+if else)

```javascript!

let call = ['早安 🌞', '午安 🍱','晚安 🌙'];
let day = 1; //從第一天算起

for(; day<=11; day++){ // 第十一天還要動作，所以要劃到第十一天
    if(day<=10){ //十天內包含十天我都還愛你
        console.log(`今天是第 ${day} 天喔～ 🫶`);
        for(let i=0; i<call.length; i++){
            console.log(`${call[i]}`);
        }
    }else{ //剩下的日子就不愛ㄌ
        console.log(`第 ${day} 天：你不愛我，那我也不愛你`); 
    }
}

```
![image](https://hackmd.io/_uploads/BkGSggbYel.png)





好像已經有點太長ㄌ
剩下ㄉ咱下篇見～yahoo～✰ 



---

📺 JS 新手宇宙 - EP . 02  

 [ 🩷 EP1 《 函式和參數名稱、傳值再也不會搞混！ 》](https://hackmd.io/pPUQiXn2TgGJrDTSLJR6sw) 
 ###### （ 你在這裡 ↓ ）
 [🩷 EP2 《  for 迴圈：愛你 10 天計畫 》](https://hackmd.io/@Ph6kL2hVQeu-dSTdobpoJw/rJF-uhgOll)

 [🩷 EP3 《 陣列 Array：push、pop、splice 魚塘管理💅 》](https://hackmd.io/@Ph6kL2hVQeu-dSTdobpoJw/ByqK9u-Klx)
 
 [🩷 EP4 《 物件 Object：80s 畢業紀念冊大曝光，二十年後我還記得你 💘 》](https://hackmd.io/@Ph6kL2hVQeu-dSTdobpoJw/SkkxzBY9ee)

