在 JavaScript 和 TypeScript 的世界里，遍历数组是一项常见任务。许多开发者因为 .forEach 的简单和熟悉而习惯使用它。
然而，有一个更强大且更灵活的替代方案：for…of 循环。🔮
本文将深入探讨为什么你应该考虑切换到 for…of 以及它如何使你的编码过程更高效、更具表达力。
基础知识：.forEach 与 for...of 🔧
在 JavaScript 和 TypeScript 中，遍历数组的方法有很多，其中最常见的是 .forEach 方法和 for...of 循环。下面我们通过两个简单的示例来介绍这两种方法的使用。
.forEach 方法
.forEach 方法是一种直接遍历数组的方式。它接收一个回调函数，并对数组中的每个元素执行该函数。以下是一个基本示例：
const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => {
console.log(fruit);
});在这个例子中，我们定义了一个包含三种水果的数组 fruits，然后使用 .forEach 方法遍历这个数组，并将每个水果的名字输出到控制台。
for...of 循环
for...of 循环是在 ES6 中引入的，它提供了一种更灵活的方式来遍历可迭代对象（包括数组）。以下是一个使用 for...of 循环的示例：
const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
console.log(fruit);
}在这个例子中，我们同样定义了一个包含三种水果的数组 fruits，然后使用 for...of 循环遍历这个数组，并将每个水果的名字输出到控制台。
为什么选择 for...of？🌼
虽然 .forEach 方法简洁易用，但 for...of 循环提供了几项优势，可以增强你的编码实践。
1. 更好的异步处理
在处理异步操作时，for...of 显得尤为出色。.forEach 方法无法很好地与 async/await 配合使用，因为它无法原生处理 promise。考虑以下示例：
使用 .forEach 进行异步代码处理
const fetchData = async (url: string) => {
const response = await fetch(url);
return response.json();
};
const urls = ['url1', 'url2', 'url3'];
urls.forEach(async url => {
const data = await fetchData(url);
console.log(data);
});这段代码不会等待每次 fetch 操作完成就开始下一个操作，可能会导致竞态条件和意外结果。
使用 for...of 进行异步代码处理
const fetchData = async (url: string) => {
const response = await fetch(url);
return response.json();
};
const urls = ['url1', 'url2', 'url3'];
for (const url of urls) {
const data = await fetchData(url);
console.log(data);
}在这个例子中，每次 fetch 操作会等待前一个操作完成，从而确保顺序执行和更可预测的行为。
2. 支持 break 和 continue 语句
.forEach 方法不支持 break 和 continue 语句，这在某些场景下会限制其灵活性。
使用 for...of 终止循环
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
if (number === 3) {
break;
}
console.log(number); // 输出 1, 2
}使用 for...of 跳过循环
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
if (number === 3) {
continue;
}
console.log(number); // 输出 1, 2, 4, 5
}这些特性使 for...of 更加强大和多功能，适用于复杂的迭代逻辑。
3. 提高可读性和可维护性
for...of 循环可以提高代码的可读性，特别是在处理嵌套结构或复杂操作时。👈
考虑下面这个遍历多维数组的示例：
使用 .forEach 进行嵌套迭代
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
matrix.forEach(row => {
row.forEach(cell => {
console.log(cell);
});
});使用 for...of 进行嵌套迭代
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
for (const row of matrix) {
for (const cell of row) {
console.log(cell);
}
}for...of 版本更简洁易懂，从而增强了代码的可维护性。
使用 for...of 的高级技巧
for...of 循环不仅适用于数组，还可以用于迭代对象、生成器等。以下是一些高级使用技巧：
使用 Object.entries 遍历对象
虽然 for...of 通常用于数组，但它也可以结合 Object.entries 方法来遍历对象：
const user = {
name: 'Alice',
age: 30,
job: 'developer'
};
for (const [key, value] of Object.entries(user)) {
console.log(`${key}: ${value}`);
}在这个例子中，我们使用 Object.entries 将对象转换为键值对数组，然后用 for...of 遍历这些键值对，并输出每个键值对的信息。
使用生成器与 for...of 结合
生成器提供了一种创建自定义可迭代对象的强大方式。以下是如何将 for...of 与生成器函数结合使用：
function* generateNumbers() {
yield 1;
yield 2;
yield 3;
}
for (const number of generateNumbers()) {
console.log(number);
}在这个例子中，我们定义了一个生成器函数 generateNumbers，它依次生成三个数字。然后我们使用 for...of 循环遍历这些生成的数字并输出。
结合解构简化迭代逻辑
解构可以进一步简化你的迭代逻辑，使代码更加简洁：
const users = [
{ name: 'Alice', age: 30 },
{ name: 'Bob', age: 25 }
];
for (const { name, age } of users) {
console.log(`${name} is ${age} years old`);
}在这个例子中，我们有一个包含用户对象的数组。通过在 for...of 循环中使用解构，我们可以直接获取每个用户的 name 和 age 属性，并输出信息。
结束
从 .forEach 切换到 for...of 可以为你的 JavaScript/TypeScript 项目带来许多好处，包括更好的异步代码处理、对循环执行的更多控制以及增强的可读性。
所以下次你要使用 .forEach 时，不妨试试 for...of。它可能会成为你新的数组迭代利器。
祝你编码愉快！
