在对数组或对象进行遍历时，我们经常会使用到两种方法：for...in 和 for...of，那么这两种方法之间的区别是什么呢？
第一：for...in
for...in 循环只遍历可枚举属性。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性，例如 String 的 indexOf() 方法或 Object的toString()方法。循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性（更接近原型链中对象的属性覆盖原型属性）。
下面我们简单的使用for...in分别对对象和数组在谷歌的控制台进行遍历：
首先遍历对象：
接着遍历数组：
我们发现，使用for...in进行遍历时，item值为对象的key，为数组的index。
我们知道，数组索引只是具有整数名称的枚举属性，并且与通用对象属性相同，因此不能保证for...in以某种固定的顺序返回索引，因此，不推荐使用for...in进行数组的遍历
下面，我们在上面代码的基础上，在arr数组上增加一个自定义属性，再次遍历，查看结果。
我们发现，for...in不仅会遍历数组中的元素，还会遍历自定义属性
第二：for...of
for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。
同样的，我们还是使用与for...in相同的代码进行测试
我们可以看出，使用for...of对对象进行遍历时，报了TypeError: obj is not iterable错误，对数组进行遍历时，item直接是数组每一项的值。
我们再为arr增加自定义属性，查看效果。
总结
根据以上测试结果并参考了相关资料，我们得出了以下结论：
- 遍历对象时推荐使用
for...in，其中item为对象的key。使用for...of会报错。 - 遍历数组时推荐使用
for...of，其中item为数组每一项的值。使用for...in则不能保证遍历顺序且会遍历出自定义属性。 for...in是ES5特性，for...of是ES6特性，因此需要注意兼容性。- 如果要使用
for...of遍历普通对象，需要配合Object.keys()一起使用