ES8 浅谈 forEach() 和 for...of 循环的区别-JavaScript中文网-JavaScript教程资源分享门户

前言

前端开发现在已经不再是单纯的写 HTML、CSS 和 JavaScript 这种狭隘的领域，而成为了一个完整的领域。ES6 提供了许多新特性，让 JavaScript 语言的表达力得到了极大的提升。而 ES8 又将这一推向更高的水平。在 ES8 版本中，提供了两种新的循环方式：forEach() 和 for...of。虽然看似很类似，但在细节上却有所不同。本文主要从代码实例分析这两种循环的区别。

forEach() 和 for...of 的基本概念

在开始以前，我们先来看一下 forEach() 和 for...of 两个关键字的基本概念。

forEach()

forEach() 是一种数组遍历迭代器，该方法可用于替代传统的 for 循环。forEach() 在处理数组时非常有用，因为它可以比普通 for 循环更快、更简洁地完成任务。

for...of

for...of 是一种用于遍历可迭代对象的新循环语法。在 ES8 中被引入，它可以循环遍历迭代器对象、字符串、Map、Set 等数据类型，而不仅仅是像 for...in 循环那样只适用于对象和数组。

两种循环的区别

虽然两种循环语法都有类似的功能，但它们之间仍有几点区别。

区别一：返回值

在使用 forEach() 方法时，在回调函数中返回任何值是没有任何效果的。换句话说，无论您在回调中返回什么，它都不会影响 forEach() 的返回值。而在 for...of 中，则可以使用 return 语句来提前停止循环，并在循环外部添加任意值的 yield 等表达式。

区别二：使用 continue 和 break

在 forEach() 方法中，我们没有办法使用 continue 或 break 关键词来直接控制循环过程。但是，在 for...of 循环中，我们可以使用 continue 和 break 来跳过循环的某些部分。

区别三：返回值的方式

在使用 for...of 时，可以通过反过来使用 generator 函数来返回数据，并在每次循环时依次返回新值。而在 forEach() 中，我们不可以使用此种方法来返回数据。

例如，我们可以使用以下代码在控制台上输出两个数组中的元素：

const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
for (let el of arr1) console.log(el); // 1 2 3
for (let el of arr2) console.log(el); // 'a' 'b' 'c'

arr1.forEach(el => console.log(el)); // 1 2 3
arr2.forEach(el => console.log(el)); // 'a' 'b' 'c'

区别四：变量类型

forEach() 方法只接受一个匿名函数，而 for...of 则在声明循环变量时只会接受定义的变量名。

总结

forEach() 和 for...of 循环的主要区别是它们在返回值、使用 continue 和 break、返回值的方式和变量类型方面有所不同。使用这两种语法时，因为它们的差异而避开一些问题也是很重要的。与 for in 语法相比，这两种语法为开发人员提供了更广泛的可能性。如果需要使用 continue 或 break 关键词，或者想要在自己的回调函数中返回自己的数据表达式，则应该使用 for...of 循环。如果只是需要快速而简便地处理一些数组元素，那么 forEach() 可以是比较好的选择。

示例代码

`forEach()` 循环

let arr = ['a', 'b', 'c'];
arr.forEach((val, index, whole) => console.log(`Value = ${val}, Index = ${index}, Whole Array = `, whole));

`for...of` 循环

let arr = ['a', 'b', 'c'];
for (let val of arr) console.log(`Value = ${val}, Type = ${typeof(val)}`);

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/646f0b49968c7c53b0d6dba6

ES8 浅谈 forEach() 和 for...of 循环的区别

前言