概念

ES6引入了for...of循环作为遍历所有数据结构的统一方法。

一个数据结构只要部署了Symbol.iterator属性，就被视为具有iterator接口，就可以用for...of循环遍历它的成员，也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。

for...of循环可以使用的范围：

• 字符串；
• 数组；
• Set和Map结构；
• 某些类似数组的对象（比如arguments对象、DOM NodeList对象）；
• Generator对象。

实例

1.数组

数组原生具备iterator接口（即默认部署了Symbol.iterator属性），for...of循环本质就是调用这个接原由网口产生的遍历器。

for...of循环可以代替数组实例的forEach方法。

J//www.58yuanyou.comava原有的for...in循环只能获取对象的键名，不能直接获取键值。ES6提供的yvbptfor...of循环运行遍历获得键值（可以借助数组实例的entries方法和keys方法）。

2.Set和Map结构

Set和Map结构原生具有Iterator接口，可以直接使用for...of循环。

3.计算生成的数据结构

有些数据结构是在现有数据结构的基础上计算生成的。比如ES6的数组、Set、Map都部署了以下三个方法，调用后都返回遍历器对象。

entries()：返回一个遍历器对象，用于遍历键值，键名组成的数组。（对于数组，键名就是索引值；对于Set键名和键值相同；Map结构的iterator接口默认就是调用entries方法。）

keys()：返回一个遍历器对象，用于遍历所有键名。

values()：返回一个遍历器对象，用于遍历所有的键值。

4.类似数组的对象

a.字符串：

b.DOM NodeList对象

c.arguments对象

d.其他

并不是所有类似数组的对象都具有Iterator接口，一个简便的方法就是使用Array.from方法将其转为数组。

5.对象

对于普通的对象，for...of结构不能直接使用，否则会报错，必须部署了Iterator接口才能够使用。但这样的情况下，仍然可以用for...of循环遍历键名。

一种解决方式是，使用Object.keys()将对象的键名生成一个数组，然后遍历这个数组。

另一种解决方法是，Generator函数将对象重新包装一下

与其他遍历语法比较

1.与数组for循环和f原由网orEach对比

以数组为例，for循环写法较麻烦，因此数组提供了内置forEach方法，而forEach循环，无法中途跳出循环，break或return命令都不行。

2.与for...in循环对比

for...in循环可以遍历数组的键名，但是缺点也有。

缺点：

数组的键名是数字，但for...in循环是以字符串作为键名

for...in循环不仅可以遍历数字键名，还会遍历手动添加的其他键www.58yuanyou.com，甚至包括原型链上的键

某些情况下，for...in循环会以任意顺序遍历键名

总之：for...in循环主要为遍历对象而设计，不适用遍历数组

3.for...of优势

有着同for...in一样简洁的语法，但没有for...in的那些缺点

不同forEach方法，可以用break,continue,return配合使用

提供了变量所有数据结构的统一操作接口