for-in

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

for (variable in object){
	...
}

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

for ... in更适合遍历对象，不建议与数组一起使用，因为遍历顺序有可能不是按照实际数组的索引顺序。

for ... in会遍历所有的可枚举属性，包括原型：

const obj = { a: 1, b: 2, c: 3 };

function myObj() {
    this.name = 'Jack';
}

myObj.prototype = obj;

const user = new myObj();

for (const prop in user) {
    console.log(`user.${prop} = ${user[prop]}`);
}
// user.name = Jack
// user.a = 1
// user.b = 2
// user.c = 3

如果想仅迭代自身的属性，需要使用hasOwnProperty()方法判断某个属性是否是该对象的实例属性：

const obj = { a: 1, b: 2, c: 3 };

function myObj() {
    this.name = 'Jack';
}

myObj.prototype = obj;

const user = new myObj();

for (const prop in user) {
    if (user.hasOwnProperty(prop)) {
        console.log(`user.${prop} = ${user[prop]}`);
    }
}
// user.name = Jack

for-of

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

for (variable of iterable) {
	...
}

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

迭代数组：

const arr = [10, 20, 30];

for (const value of arr) {
    console.log(value);
}
// 10
// 20
// 30

迭代Map：

const map = new Map([
    ['a', 1],
    ['b', 2],
    ['c', 3],
]);

for (const entry of map) {
    console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for (const [key, value] of map) {
    console.log(value);
}
// 1
// 2
// 3

迭代arguments对象：

(function () {
    for (const argument of arguments) {
        console.log(argument);
    }
})(1, 2, 3);

// 1
// 2
// 3

总结

• for...in语句以任意顺序迭代对象的键，包括原型。不建议与数组一起使用。
• for...of 语句遍历可迭代对象的值。