JavaScript - For...of Loop

歡迎，有抱負的程式設計師們！今天，我們將深入探討 JavaScript 最有用的功能之一：for...of 循環。作為你們親切友善的計算機科學老師，我興奮地要為你們指導這個旅程。所以，拿起你們最喜歡的飲料，放鬆身心，讓我們一起踏上這次編程冒險！

Javascript - For...of

for...of Loop 是什麼？

在我們深入了解之前，讓我們先了解一下 for...of 循環是關於什麼的。想像一下你有一籃子色彩繽紛的水果，你想一一檢查每個水果。for...of 循環就像你的得力助手，從籃子中拿起每個水果，一個接一個地遞給你，直到籃子空了。

在編程術語中，for...of 循環讓我們能夠迭代（一個花俏的詞，意思是“ traverse”）像數組、字符串和其他我們稍後會學到的數據結構這樣的可迭代對象。

語法

現在，讓我們看看如何寫一個 for...of 循環。別擔心一開始看起來有點奇怪——我們會一起分解它！

for (variable of iterable) {
// 要執行的代碼
}

讓我們剖析一下：

for：這個關鍵字告訴 JavaScript 我們正在開始一個循環。
variable：這是我們在迭代過程中存儲每個項目的地方。
of：這個關鍵字使得這成為一個 for...of 循環。
iterable：這是我們正在迭代的對象（就像我們的水果籃）。
花括號 {} 內的代碼是我們想要對每個項目做的操作。

範例

範例 1：遍歷一個數組

讓我們從一個簡單的範例開始。我們將創建一個水果數組並打印每一個。

let fruits = ['apple', 'banana', 'cherry', 'date'];

for (let fruit of fruits) {
console.log(fruit);
}

如果你運行這段代碼，你會看到：

apple
banana
cherry
date

這裡發生了什麼？我們的 for...of 循環正在從 fruits 數組中取出每個水果並將其存儲在 fruit 變量中。然後，我們使用 console.log() 打印每個水果。

範例 2：遍歷一個字符串

你知道字符串也是可迭代的嗎？讓我們拼出一句話：

let word = 'Hello';

for (let letter of word) {
console.log(letter);
}

這將輸出：

H
e
l
l
o

字符串中的每個字符都被視為一個可以迭代的獨立項目。酷炫吧？

範例 3：使用 for...of 與數字

現在，讓我們來得更實際一些。想像你是一個老師（像我一樣！），你想計算一個班的平均分數：

let scores = [85, 92, 78, 95, 88];
let total = 0;
let count = 0;

for (let score of scores) {
total += score;
count++;
}

let average = total / count;
console.log(`The class average is ${average}`);

這段腚本會計算並打印平均分數。我們使用 for...of 循環來加起所有的分數並計算有多少個。

範例 4：中斷循環

有時候，你可能想要在循環結束之前停止它。我們可以使用 break 關鍵字來做到這一點。讓我們說我們正在尋找一種特定的水果：

let fruits = ['apple', 'banana', 'cherry', 'date'];
let searchFor = 'cherry';

for (let fruit of fruits) {
if (fruit === searchFor) {
console.log(`Found ${searchFor}!`);
break;
}
console.log(`Checking ${fruit}...`);
}

這段腚本會在找到 'cherry' 後停止，而不會檢查其餘的水果。

範例 5：使用 continue 跳過項目

如果我們想跳過某些項目呢？我們可以使用 continue 關鍵字。讓我們只打印以 'a' 開頭的水果：

let fruits = ['apple', 'banana', 'apricot', 'cherry', 'avocado'];

for (let fruit of fruits) {
if (!fruit.startsWith('a')) {
continue;
}
console.log(fruit);
}

這將只打印 'apple'、'apricot' 和 'avocado'。

方法表格

這裡是一個我們在範例中使用過的方法的便捷表格：

方法	描述	範例
`console.log()`	將輸出打印到控制台	`console.log('Hello, World!')`
`startsWith()`	檢查字符串是否以指定的字符開頭	`'apple'.startsWith('a')` // true
`break`	離開循環	`if (condition) break;`
`continue`	跳過循環的當前迭代	`if (condition) continue;`

結論

好了，各位！我們已經穿越了 for...of 循環的領地，從簡單的數組到字符串，甚至學會了如何中斷或跳過項目。記住，熟練的關鍵在於練習，所以不要害怕嘗試這些概念。

在我多年的教學經驗中，我發現最好的學習方式就是實踐。所以，這裡有一點家庭作業給你們：嘗試使用不同類型的數據創建你自己的 for...of 循環。也許可以遍歷你喜歡的電影，或者你朋友的名字。可能性無限！

快樂編程，並記住——在編程的世界裡，每個循環都是發現的機會！

Credits: Image by storyset

上一教程:

JavaScript - For...in

下一教程:

JavaScript - 循環控制