如何在 ECMAScript 2015 中使用 for-of 循环
在 ECMAScript 2015 (ES6) 中，引入了一种新的循环语句 for-of 循环。与传统的 for 循环和 forEach 循环相比，for-of 循环更加简单，可读性更强，而且它可以循环任意可迭代对象。
什么是可迭代对象？
在 ES6 中，可迭代对象是指实现了 @@iterator 方法（也可以说是一个迭代器）的对象。这个方法返回一个迭代器对象，迭代器对象包含一个 next 方法，每次调用 next 方法都会返回一个包含 value 和 done 两个属性的对象，分别表示当前迭代到的值和是否迭代完成。
通俗点说，就是只要对象实现了 @@iterator 方法，并且这个方法返回的是一个迭代器，那么这个对象就是可迭代对象。
for-of 循环的语法
for-of 循环的语法非常简单，其语法如下：
--- ---- ----- -- --------- - -- ------ -
其中，value 表示当前迭代到的值，iterable 表示可迭代对象。
下面是一个简单的 for-of 循环的示例代码：
----- --- - --- -- -- -- --- --- ------ ----- -- ---- - ------------------- -
上面的代码会输出 1, 2, 3, 4, 5。这里的 arr 是一个数组，它是一个可迭代对象，因为数组自带有 @@iterator 方法，因此我们可以使用 for-of 循环来迭代数组。
使用 for-of 循环迭代字符串
除了迭代数组之外，我们还可以使用 for-of 循环来迭代字符串。这里的字符串也是一个可迭代对象，它会将每一个字符作为一个迭代器返回。
下面是一个使用 for-of 循环迭代字符串的示例代码：
----- --- - ------ ------- --- ------ ---- -- ---- - ------------------ -
上面的代码会输出每一个字符 "H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"。
使用 for-of 循环遍历 Map 对象
Map 对象是 ES6 中新增的数据结构，它能够记录每一个键值对。我们也可以使用 for-of 循环来迭代 Map 对象。
下面是一个使用 for-of 循环迭代 Map 对象的示例代码：
----- --- - --- ------ --------------- ---------- --------------- ---------- --------------- ---------- --- ------ ----- ------ -- ---- - ---------------- ------- -
上面的代码会输出：
---- ------ ---- ------ ---- ------
使用 for-of 循环遍历 Set 对象
Set 对象也是 ES6 中新增的数据结构，它能够存储任意类型的唯一值，并且能够保持它们的顺序。我们也可以使用 for-of 循环来迭代 Set 对象。
下面是一个使用 for-of 循环迭代 Set 对象的示例代码：
----- --- - --- ------ ----------- ----------- ----------- --- ------ ----- -- ---- - ------------------- -
上面的代码会输出 1, 2, 3。
使用 for-of 循环的注意事项
for-of 循环只能循环可迭代对象，否则会抛出 TypeError 异常。
如果需要获取迭代器中的索引值，则可以使用数组的 entries 方法返回一个包含索引值和元素值的迭代器。
下面是一个使用 entries 方法获取数组索引值和元素值的代码示例：
----- --- - ----- ---- ----- --- ------ ------- ------ -- -------------- - ------------------ ------- -
上面的代码会输出：
- - - - - -
总结
使用 for-of 循环可以让我们更加方便地迭代数组、字符串、Map 对象和 Set 对象。在使用 for-of 循环时，需要注意迭代对象必须是可迭代对象。对于需要获取索引值和元素值的情况，可以使用数组的 entries 方法获取迭代器。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64cdad6b1519ea946c17bb1b