停止使用 .ForEach:使用For...of 循环改造你的代码

开发 前端
本文将探讨为什么应该考虑使用for...of循环,以及它如何提高代码效率和表达能力。

在JavaScript和TypeScript开发中,数组迭代是一项常见任务。许多开发者习惯性地使用.forEach方法,因为它简单直观。然而,ES6引入的for...of循环提供了更强大、更灵活的迭代方式。本文将探讨为什么应该考虑使用for...of循环,以及它如何提高代码效率和表达能力。

基础对比:.forEach vs for...of

.forEach方法:

const colors = ['红', '蓝', '绿'];
colors.forEach(shade => console.log(shade));
  • 1.
  • 2.

for...of循环:

const seasons = ['春', '夏', '秋', '冬'];
for (const time of seasons) {
  console.log(time);
}
  • 1.
  • 2.
  • 3.
  • 4.

为什么选择for...of

1. 更好的异步处理

在处理异步操作时,for...of循环表现出色。.forEach方法不能很好地与async/await配合使用,因为它不能原生处理Promise。例如:

使用.forEach的异步代码(存在问题):

const urls = ['url1', 'url2', 'url3'];
urls.forEach(async (url) => {
  const data = await fetch(url);
  console.log(data);
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

这段代码不会等待每个fetch操作完成就开始下一个,可能导致竞态条件和意外结果。

使用for...of的异步代码(正确处理):
const urls = ['url1', 'url2', 'url3'];
for (const url of urls) {
  const data = await fetch(url);
  console.log(data);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

这个例子中,每个fetch操作会等待前一个完成,确保顺序执行和可预测的行为。

2.支持break和continue语句

.forEach方法不支持break和continue语句,这限制了它在某些场景下的灵活性。

使用for...of中断循环:
const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
  if (num === 3) break;
  console.log(num);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
使用for...of继续循环:
const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
  if (num === 3) continue;
  console.log(num);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

3.提高可读性和可维护性

for...of循环可以提高代码可读性,特别是在处理嵌套结构或复杂操作时。例如,遍历多维数组:

使用for...of进行嵌套迭代:

const matrix = [[1, 2], [3, 4], [5, 6]];
for (const row of matrix) {
  for (const item of row) {
    console.log(item);
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

高级使用技巧

1.遍历对象

使用Object.entries()可以让for...of遍历对象:

const person = { name: 'Alice', age: 30 };
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}
  • 1.
  • 2.
  • 3.
  • 4.

2.与生成器函数配合使用

function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

for (const num of fibonacci()) {
  if (num > 100) break;
  console.log(num);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

3.结合解构使用

const people = [['Alice', 30], ['Bob', 25], ['Charlie', 35]];
for (const [name, age] of people) {
  console.log(`${name} is ${age} years old.`);
}
  • 1.
  • 2.
  • 3.
  • 4.

结论

从.forEach切换到for...of可以为JavaScript/TypeScript项目带来诸多好处,包括更好的异步代码处理、更灵活的循环控制和增强的可读性。在下次需要迭代数组时,不妨尝试使用for...of循环。它可能会成为你处理数组迭代的新宠。

通过采用for...of循环,开发者可以编写出更加高效、灵活和易于维护的代码。这不仅提高了开发效率,还能在处理复杂数据结构和异步操作时提供更大的便利性。在现代JavaScript开发中,掌握并合理使用for...of循环将成为提升代码质量的重要技能之一。

责任编辑:姜华 来源: 大迁世界
相关推荐

2024-09-28 10:13:14

2023-05-05 00:03:29

forEach函数开发

2024-03-11 01:00:00

jsfor循环

2024-06-17 08:04:23

2024-05-10 12:29:30

接口类型

2020-10-23 09:57:23

TypeScriptany代码

2020-04-14 12:12:20

JavaScriptIIFE函数

2024-06-03 00:01:00

2024-05-11 18:48:40

技巧代码技能

2023-08-29 17:47:02

嵌套 if开发

2013-09-22 17:08:37

RSA加密组件

2017-09-18 13:34:44

Facebook

2022-03-16 00:07:55

OAuth2授权框架

2020-07-15 10:32:34

5G网络华为

2024-08-16 09:05:26

CSSmarginpadding

2024-09-03 08:36:21

2023-08-11 17:13:39

JavaScrip

2023-02-24 09:38:22

UbuntuFlatpak

2020-12-28 14:22:33

GoogleChromiumWindows 7

2012-09-19 15:30:59

点赞
收藏

51CTO技术栈公众号