使用 .forEach与for...of 循环区别

       具体看到一篇文章，然后记录一下，在JavaScript和TypeScript开发中，数组迭代是一项常见任务。许多开发者习惯性地使用.forEach方法，因为它简单直观。但是，ES6引入的for...of循环提供了更强大、更灵活的迭代方式。

.forEach方法：

const userArr = ['张三', '王五', '小明'];
userArr.forEach(user => console.log(user ));

for...of循环：

const monthArr = ['1月', '2月', '3月'];
for (const time of monthArr) {
  console.log(time);
}

for...of有什么好处：

1. 更好的异步处理

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

使用.forEach的异步代码（存在问题）：这段代码不会等待每个fetch操作完成就开始下一个，可能导致竞态条件和意外结果。

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

使用for...of的异步代码（正确处理）：这个例子中，每个fetch操作会等待前一个完成，确保顺序执行和可预测的行为。

const urls = ['url1', 'url2', 'url3'];
for (const url of urls) {
  const data = await fetch(url);
  console.log(data);
}

2.支持break和continue语句

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

下面是使用for...of继续循环：

const numbers = [1, 2, 3, 4, 5，7，8];
for (const num of numbers) {
  if (num === 3) break;
  console.log(num);
}

const numbers = [1, 2, 3, 4, 5，7，8];
for (const num of numbers) {
  if (num === 3) continue;
  console.log(num);
}

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);
  }
}

高级使用技巧

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

const person = { name: '小米', age: 10 };
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

第二：与生成器函数配合使用

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);
}

第三：结合解构使用

const peopleArr = [['小明', 30], ['小红', 25], ['小兰', 35]];
for (const [name, age] of people) {
  console.log(`${name} 有 ${age} 岁了`);
}