前言
在 ECMAScript 2015 中，引入了 for...of 循环，它是一个新的迭代语句，用于遍历可迭代对象。而在之前，我们通常使用 forEach 方法来遍历数组。那么，for...of 循环和 forEach 方法有什么区别呢？本文将为大家详细介绍它们的区别和用法。
for...of 循环
for...of 循环是一个新的迭代语句，用于遍历可迭代对象，比如数组、Set、Map、字符串等等。它的语法如下：
for (let value of iterable) {
// 执行的代码块
}其中，iterable 是可迭代对象，value 是每次迭代的值。for...of 循环可以替代传统的 for 循环和 forEach 方法，它有以下几个优点：
- 语法简洁：for...of 循环的语法比传统的 for 循环和 forEach 方法更简洁易懂。
- 适用范围广：for...of 循环可以遍历任何可迭代对象，而 forEach 方法只能遍历数组。
- 支持 break 和 continue：for...of 循环支持 break 和 continue，可以更灵活地控制循环。
下面是一个使用 for...of 循环遍历数组的示例代码：
const arr = [1, 2, 3];
for (const value of arr) {
console.log(value);
}
// 输出：1 2 3forEach 方法
forEach 方法是数组的一个方法，用于遍历数组。它的语法如下：
array.forEach(callback(currentValue [, index [, array]]) {
// 执行的代码块
}[, thisArg]);其中，callback 是回调函数，它接收三个参数：当前元素的值、当前元素的索引和数组本身。thisArg 是可选的，它指定了回调函数内部的 this 对象。forEach 方法有以下几个特点：
- 不能中途停止：forEach 方法无法中途停止，只能遍历完整个数组。
- 不能使用 break 和 continue：forEach 方法不支持 break 和 continue，只能使用 return 来跳出循环。
- 无法遍历非数组对象：forEach 方法只能遍历数组，不能遍历 Set、Map 等非数组对象。
下面是一个使用 forEach 方法遍历数组的示例代码：
const arr = [1, 2, 3];
arr.forEach((value, index) => {
console.log(value);
});
// 输出：1 2 3区别和用法
for...of 循环和 forEach 方法都可以用于遍历数组，但它们有以下几个区别：
- 语法不同：for...of 循环的语法比 forEach 方法更简洁易懂。
- 支持 break 和 continue：for...of 循环支持 break 和 continue，可以更灵活地控制循环，而 forEach 方法不支持。
- 适用范围不同：for...of 循环可以遍历任何可迭代对象，而 forEach 方法只能遍历数组。
因此，对于数组的遍历，我们可以根据实际需求选择使用 for...of 循环或 forEach 方法。如果需要更灵活地控制循环，或者需要遍历非数组对象，可以使用 for...of 循环；如果只需要遍历数组，可以使用 forEach 方法。
下面是一个使用 for...of 循环和 forEach 方法遍历数组的示例代码：
-- -------------------- ---- ------- ----- --- - --- -- --- -- -- -------- ------ --- ------ ----- -- ---- - ------------------- - -- ---- - - -- -- ------- ------ ------------------- ------ -- - ------------------- --- -- ---- - -
结语
本文介绍了 ECMAScript 2019 中的 for...of 循环和 forEach 方法的区别和用法。for...of 循环是一个新的迭代语句，可以替代传统的 for 循环和 forEach 方法，它语法简洁，适用范围广，支持 break 和 continue；而 forEach 方法只能遍历数组，不能遍历非数组对象，也不支持 break 和 continue。在实际开发中，我们可以根据实际需求选择使用 for...of 循环或 forEach 方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3aa07a941bf71346ff819
