JavaScript - For...of 循环

欢迎，有抱负的程序员们！今天，我们将深入探讨JavaScript最实用的特性之一：for...of 循环。作为你友好的计算机科学老师，我很高兴能引导你们开启这段旅程。所以，拿起你最喜欢的饮料，舒服地坐好，让我们一起开始这次编程冒险吧！

for...of 循环是什么？

在我们深入了解之前，先来了解一下for...of 循环是什么。想象一下，你有一个装满彩色水果的篮子，你想一个接一个地检查每个水果。for...of 循环就像你的助手，它会从篮子中拿起每个水果，一次一个地递给你，直到篮子空了。

在编程术语中，for...of 循环允许我们遍历（ Iterate，即“逐个走遍”）像数组、字符串和其他我们将稍后学习的数据结构这样的可迭代对象。

语法

现在，让我们来看看如何编写一个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(`班级平均分是 ${average}`);

这个脚本将计算并打印平均分数。我们使用for...of 循环来累加所有分数并计算数量。

示例 4：跳出循环

有时，你可能想在循环完成之前停止它。我们可以使用 break 关键字。假设我们在寻找特定的水果：

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

for (let fruit of fruits) {
if (fruit === searchFor) {
console.log(`找到 ${searchFor}！`);
break;
}
console.log(`检查 ${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