ECMAScript 2017（通常简称 ES2017）引入了一个新的循环结构，即 for…of 循环。与传统的 for 循环和 forEach() 方法不同，for…of 循环提供了一种更加简洁明了的方法来遍历数组和其他可迭代对象，以及访问它们的每个元素。
基本语法
for…of 循环的基本语法如下：
for (variable of iterable) {
// code block to be executed
}其中，variable 是用来存储当前迭代的元素的变量，iterable 是指一个可迭代对象，例如数组、字符串、Map 和 Set 等。在循环体中，我们可以通过 variable 来访问当前迭代的元素。
支持的可迭代对象
for…of 循环支持的可迭代对象包括：
- 数组（Array）
- 字符串（String）
- Map 和 Set
- 类数组对象（例如 arguments 对象、DOM NodeList 对象等）
- 生成器对象（Generator）
优点
相较于传统的 for 循环和 forEach() 方法，for…of 循环具有以下一些优点：
- 语法更加简洁明了，易于理解和使用。
- 可以访问到当前迭代的元素本身，而不是它的下标或属性名。
- 对于具有迭代器的对象（例如 Map 和 Set），可以直接遍历其中的元素，而无需先转换成数组。
示例代码
下面是一个使用 for…of 循环遍历数组和字符串的示例代码：
-- -------------------- ---- ------- -- ------ ----- ----- - --- -- -- --- --- ------ ------- -- ------ - --------------------- - -- ------- ----- ------ - ------- -------- --- ------ --------- -- ------- - ----------------------- -
输出结果如下：
-- -------------------- ---- ------- - - - - - - - - - - - - - - - -
案例分析
下面是一个应用 for…of 循环的案例分析，以展示它的使用方法：
// 求数组中所有元素的和
const array = [10, 20, 30, 40];
let sum = 0;
for (const element of array) {
sum += element;
}
console.log(sum); // 输出 100在上述示例中，我们使用 for…of 循环遍历数组 array，并将每个元素加到 sum 变量中。最终，sum 变量的值将会是数组中所有元素的和。
总结
通过本文的介绍，我们可以看出，for…of 循环在遍历可迭代对象方面具有很多优点，如语法简洁、易于理解、能够直接访问元素等。它可以大大简化循环的控制，提高编写 JavaScript 代码的效率和舒适度。因此，在日常的前端开发中，我们可以结合实际需要灵活使用 for…of 循环，以提高自己的编码效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f3f619f6b2d6eab3d2b0eb