for of 与 for in 的区别

for in

for in 可以获取到对象的属性名但是获取不到属性值，遍历数组时得到的是下标。

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

 const arr = [6, 7, 8];

 for (const key in obj) {
     console.log(key, 'key');
 }

 for (const key in arr) {
    console.log(key, 'key66');
 }

for in 可以得到对象的原型上的属性名，通过hasOwnProperty来进行过滤

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

function myObj() {
   this.d = 4;
}

myObj.prototype = obj;

const testObj = new myObj();

for (const key in testObj) {
   console.log(key);
}

for (const key in testObj) {
   if (object.hasOwnProperty(key)) {
       console.log(key, 'key');
   }
}

for of

for of 对于普通的对象使用会直接报错

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

for (const key of obj) {
   console.log(key, 'key');
}

for of 可以遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象

const arr = [1, 2, 3];

for (const key of arr) {
    console.log(key, 'arr');
}

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

console.log(mapData, 'mapData');

for (const key of mapData) {
    console.log(key, 'map')
}

(function() {
    for (const key of arguments) {
        console.log(key, 'argument');
    }
})(4,5,6)

总结

for...in 循环主要是为了遍历对象而生，并且可以遍历到原型上的属性，不适用于遍历数组

for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象