for...of vs for...in

1、for...of

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

const array = ['a', 'b', 'c'];

for (const element of array) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

注意：for...of 的循环相比 forEach 来说，可以通过 break，throw continue 或 return 将迭代器关闭，而 forEach 循环无法中途跳出，break 命令或 return 命令都不能奏效。

2、for...in

for...in 是为遍历 对象 属性而构建的，不建议与数组一起使用，数组可以用 Array.prototype.forEach（）或 for.…of，而 for…in 最常用的是去检查对象属性。MDN 文档

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

3、简单总结

• forEach 循环无法中途跳出，break 命令或 return 命令都不能奏效。
• for...of 适用遍历 字符串 / 数组 / Map / Set 等，但是不能遍历对象。它可以正确响应 break、continue 和 return 语句。
• for...in 适用于遍历 对象，但是它会遍历原型链上的属性，最好结合 hasownProperty() 使用。

用 for...of 迭代对象的时候，直接输出了数组的值，而不输出数组的索引。我们可以用 Object.keys() 方法来迭代一个对象的属性，来获取其索引。

// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']