for...in和 for...of

在对数据或者对象进行遍历时，经常使用的两种方法是 for...in和 for...of，那么这两种方法有什么区别呢？

for…in

for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

语法：

for (variable in object) {
	// statement
}

说明：

• variable
  在每次迭代时，variable会被赋值为不同的属性名。
• object
  非Symbol类型的可枚举属性被迭代的对象。

for…in 循环只遍历可枚举属性（包括它的原型链上的可枚举属性）。像 Array 和 Object 使用内置构造函数所创建的对象都会继承自 Object.prototype 和 String.prototype 的不可枚举属性，例如 String 的 indexOf() 方法或 Object的toString()方法。
循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性（更接近原型链中对象的属性覆盖原型属性）。

for…in 与数组迭代

数组索引只是具有整数名称的枚举属性，并且与通用对象属性相同。不能保证 for … in 将以任何特定的顺序返回索引。

for … in 循环语句将返回所有可枚举属性，包括非整数类型的名称和继承的那些。因为迭代的顺序是依赖于执行环境的，所以数组遍历不一定按次序访问元素。

因此当迭代访问顺序很重要的数组时，最好用整数索引去进行for循环（或者使用 Array.prototype.forEach() 或 for…of 循环）。

查看 MDN 对 for…in 的解释

---

for…of

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。
语法：

for (variable of iterable) {
    //statements
}

说明：

• variable
  在每次迭代中，将不同属性的值分配给变量。
• iterable
  被迭代枚举其属性的对象。

查看 MDN 文档对 for…of 的解释

---

总结

for...in和 for...of语句都可以迭代一些东西。它们之间的主要区别在于它们的迭代方式。

• for...in语句以任意顺序迭代对象的可枚举属性。
  其中item为迭代数据的Key，如果迭代的是对象，则item为对象的属性，如果迭代的是数组，则item为数组的下标。
• for...of语句遍历可迭代对象定义要迭代的数据。
  其中的item为迭代数据的value。

简而言之，for…in 遍历键名，for…of 遍历键值。

---

—— END ——