大家好，我是一名菜鳥工程師，Chris，今天來到第 26 天，JS 的迴圈和迭代 (上)

迴圈簡單來說，它就是重複執行類似的程式碼，直到滿足某個特定條件

以下是JavaScript中常見的迴圈類型：

1 while : 根據條件決定是否要重複執行程式區塊。通常不知道要運行幾次，會使用while迴圈

let n = 0;

while (n < 3) {
  console.log(n);
  n++;
}
// 會依序印出 0 1 2

2 for : 跟while 類似。通常知道運行幾次，會使用for迴圈

for (let n = 0; n < 3; n++) {
  console.log(n);
}
// 同樣會依序印出 0 1 2

3 do...while : 在條件為true下，重複執行一段程式碼

• 基本語法

do {
  // 程式碼
} while (條件);

• 範例

let sum = 0;
let n = 1;

do {
  sum += n;
  n++;
} while (n <= 4);

console.log(sum); // 印出 10 (1+2...+5 = 10)

先執行 do 區塊中的加法和遞增，接著，檢查 n 是否小於等於4，而當 n 變成 5 時，條件變為 false，結束迴圈

4 for...in : 重複一個指定的變數，來循環一個物件所有可枚舉的屬性

• 基本語法

for (variable in object) {
  // 處理物件的屬性
}

• 範例

const person = {
  myName: "Chris",
  age: 30,
  city: "New York",
};

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

// 印出以下
myName: Chris
age: 30
city: New York

在每次迭代中將屬性名稱存儲在key變數中，接著，使用person[key]存取相對應的值

5 for...of : 在可以迭代的物件(陣列、字串、Set、Map等)上建立循環，在每次迭代中使用物件中的值

• 基本語法

for (variable of iterable) {
  // 處理 iterable 中的值
}

• 範例 (陣列)

const colors = ["red", "green", "blue"];

for (const color of colors) {
  console.log(color);
}

// 印出以下
red
green
blue

• 範例 (字串)

const text = "Chris";

for (const char of text) {
  console.log(char);
}

// 印出以下
C
h
r
i
s

• 範例 (set)

const mySet = new Set([1, 2, 3]);

for (const value of mySet) {
  console.log(value);
}

// 印出以下
1
2
3

• 範例 (map)

const myMap = new Map([
  ["myName", "Chris"],
  ["age", 30]
]);

for (const [key, value] of myMap) {
  console.log(key + ": " + value);
}


// 印出以下
myName: Chris
age: 30

而在 JavaScript，break 和 continue 是用來控制迴圈的關鍵字

- break : 強迫中斷迴圈，並跳出迴圈

let n = 0;

while (n < 5) {
  if (n == 2) {
    break;
  }
  console.log(n);
  n++;
}
// 會依序印出 0 1 

- continue : 強迫跳到迴圈開頭，進入下一圈

for (let n = 0; n < 5; n++) {
  if (n == 2) {
    continue;
  }
  console.log(n);
}
// 會依序印出 0 1 3 4

★總結 : 以上就是關於迴圈和迭代 (上)的說明

今天就介紹到這邊，那我們明天見囉～～

明天預計內容：JS 的迴圈和迭代 (下)!!!