JavaScript中`for...of`与`forEach`的区别详解

js for of 与 for each的区别

在JavaScript中，for...of 和 forEach 是两种常用的迭代数组或其他可迭代对象的方法。它们有一些关键的区别：

for...of

1. 语法:

   for (const element of iterable) {
       // 代码块
   }
   

2. 适用范围:

   • for...of 可以用于任何可迭代对象，包括数组、字符串、Map、Set、arguments 对象等。

3. 控制流:

   • 可以使用 break、continue 和 return 来控制循环的执行。

4. 示例:

   const array = [1, 2, 3, 4, 5];
   for (const num of array) {
       console.log(num);
   }
   

forEach

1. 语法:

   array.forEach(function(element, index, array) {
       // 代码块
   });
   

2. 适用范围:

   • forEach 主要用于数组。

3. 控制流:

   • 不能使用 break、continue 或 return 来控制循环的执行。如果需要提前退出循环，可以抛出一个异常。

4. 示例:

   const array = [1, 2, 3, 4, 5];
   array.forEach(function(num) {
       console.log(num);
   });
   

主要区别

1. 可迭代对象:

   • for...of 可以用于任何可迭代对象，而 forEach 仅适用于数组。

2. 控制流:

   • for...of 支持 break、continue 和 return，而 forEach 不支持这些控制流语句。

3. 回调函数:

   • forEach 需要一个回调函数作为参数，而 for...of 不需要。

4. 性能:

   • 在某些情况下，for...of 可能比 forEach 更高效，特别是在需要提前退出循环的情况下。

5. 上下文:

   • forEach 的回调函数会自动绑定 this，而 for...of 不会。

选择使用

• 如果你需要遍历一个数组并且不需要提前退出循环，forEach 是一个��洁的选择。
• 如果你需要遍历一个非数组的可迭代对象，或者需要在循环中使用 break、continue 或 return，for...of 是更好的选择。

希望这些信息能帮助你更好地理解 for...of 和 forEach 的区别，并在合适的场景中选择合适的工具。