for in 和 for of

for ... in

概念

for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。
循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性（更接近的原型链中对象的属性会覆盖远的原型属性）。

语法

for (variable in object)

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

注意点

• 数组索引只是具有整数名称的枚举属性，并且与通用对象属性相同。不能保证for ... in将以任何特定的顺序返回索引。for ... in循环语句将返回所有可枚举属性，包括非整数类型的名称和继承的那些。
• 如果你只要考虑对象本身的属性，而不是它的原型，那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性（也能使用propertyIsEnumerable）。

for ... of

概念

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

语法

for (variable in object)

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

注意点

• Map 可以使用解构赋值

            let myMap =new Map();
            myMap.set('id',1001);
            myMap.set('name','kevin');
            myMap.set('address','shanghai');
            for (const [key,value] of myMap) {
                console.log(key,value);
            }

区别

无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

for...in 语句以任意顺序迭代对象的可枚举属性。

for...of 语句遍历可迭代对象定义要迭代的数据。