ES6 中使用 for...of 遍历迭代
JavaScript 作为最流行的编程语言之一，其核心语言规范 ECMA-262 也在不断的更新迭代。ES6（ECMAScript 2015）是 JavaScript 中的一次较大版本更新。其特性涵盖了许多方面，其中包括函数、类和模块等功能的改进。本文将重点介绍ES6中新增的 for...of 循环。
for...of 循环
在 ES6 之前，JavaScript 中常用的遍历语法包括 for 循环和 forEach() 函数等。然而，在处理一些集合类的数据结构时，这些语法会出现一些问题。例如，使用 for 循环时，需要手动维护循环计数器，且无法直接遍历 ES6 新增的 Set 和 Map 等集合类数据结构。使用 forEach() 函数需要回调一个函数且无法 break 和 return，因此失去了一些灵活性。
ES6 提供的 for...of 循环语法正式为这些问题提供了解决方案。与 for 循环一样，for...of 循环同样遍历一个集合中的所有元素，但在语法和应用上都有了很大的改进。for...of 循环的语法如下所示：
--- --------- -- --------- - --------- -
其中，variable 是一个代表每次迭代返回的元素值的变量，而 iterable 是一个要迭代的对象。需要注意的是，在 for...of 循环中，变量 variable 是可选的，也就是说我们可以忽略这个变量，写成如下的形式：
--- ---- ----- -- --------- - --------- -
在 for...of 循环中，我们只要指定要迭代的数据结构即可，即使在循环内部也不需要维护计数器。同时，在使用 for...of 循环时，我们可以 break 和 continue 跳出循环，这与 for 循环相同。下面，我们对 for...of 循环的应用做详细介绍。
for...of 循环的应用
1.遍历数组
在 ES6 中，可以使用 for...of 循环直接遍历数组元素。下面的示例代码演示了如何使用 for...of 循环输出数组中所有的元素：
--- --- - --------- --------- ---------- --- ---- ----- -- ---- - ------------------- - -- ------- -- ----- -- ------ -- ------
2.遍历集合类对象
在 ES6 中，新增了一些集合类数据结构，如 Set、Map 等。for...of 循环可以直接遍历这些集合类对象。下面的示例代码展示了如何使用 for...of 循环遍历 Set 对象：
--- ----- - --- ------------- --------- ----------- --- ---- ----- -- ------ - ------------------- - -- ------- -- ----- -- ------ -- ------
3.遍历字符串
在 ES6 中，可以使用 for...of 循环直接遍历字符串的每一个字符。下面的示例代码展示了如何使用 for...of 循环遍历字符串：
--- --- - ------ ------- --- ---- ----- -- ---- - ------------------- - -- ------- -- - -- - -- - -- - -- - -- -- - -- - -- - -- - -- -
4.遍历 Generator 对象
在 ES6 中，Generator 对象可以用来生成具有迭代器协议的迭代器。可以使用 for...of 循环遍历这样的 Generator 对象。下面的示例代码演示了如何使用 for...of 循环遍历 Generator 对象：
--------- ----------- -
--- ------ ----- - --- ---
----- ------ -
----- -----
------ ----- - ------ ---- - ------
-
-
--- ---- ----- -- ------------ -
-- ------ - ----- -
------
-
-------------------
-
-- -------
-- -
-- -
-- -
-- -
-- -
-- -
-- --
-- --
-- --
-- --
-- --
-- ---
-- ---
-- ---
-- ---
-- ---总结
通过本文的介绍，我们可以看出，在 ES6 中，for...of 循环的应用范围相当广泛，涵盖了遍历数组、集合类对象、字符串、Generator 对象等多方面的应用场景。在实践中，我们可以根据实际情况灵活运用 for...of 循环，简化我们的代码实现，并提高代码的可读性和维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65213c1d95b1f8cacd8bfbea