为什么建议使用 for…of 循环而不是 foreach 循环呢

前端达人

于 2024-07-25 12:41:00 发布

阅读量386

点赞数 3

本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/140711380

版权

在 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 属性，并输出信息。