一、遍历数组

①、for...in是ES5的标准语法；for...of是ES6新出的语法。

通过上述代码我们可以发现for in遍历的是下标，而for of遍历的是属性值；
for...in所遍历的下标是Strign类型而不是Number类型。

②、for...in 遍历时可以遍历到当前数组的所有属性名和方法名。也能拿到原型链上定义的属性名和方法



而使用for...of遍历时则不会遍历原型链上的属性和方法



二、遍历对象

①、for...in本来就是用来遍历对象的，这没什么问题，需要注意的是它也会遍历出原型链上面的属性和方法；如果不想遍历原型链上面的属性可以配合使用obj.hasOwnProperty(prop)方法



而使用 for...of 遍历对象时则会报错：TypeError: 'x' is not iterable；MDN上截图如下：



这是为什么呢？

这是因为能够被 for...of 正常遍历的数据类型都需要实现一个遍历器Iterator。而数组、字符串、Set、Map结构，早就内置好了Iterator（迭代器），它们的原型中都有一个Symbol.iterator方法，而Object对象并没有实现这个接口，使得它无法被for...of遍历。

如果想要 for of 遍历对象，做为替代你必须使用 Object.keys来配合：



三、总结

for...in适合遍历对象，for...of适合遍历数组。for...in遍历的是数组的索引，对象的属性，以及原型链上的属性。
for...of除了能够遍历真数组、字符串、ES6的Set、Map集合还能遍历伪数组（NodeList）；