for-in和for-on的区别

for of：遍历数组

ES6 中，如果我们要遍历一个数组，可以这样做：

let arr1 = [2, 6, 8, 5];

for (let value of arr1) {
console.log(value);
}
打印结果：

2
6
8
5
for … of 的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用 for…of 遍历数组。

注意，上面的数组中，for … of获取的是数组里的值；如果采用for … in遍历数组，则获取的是 index 索引值。

Map 对象的遍历

for … of既可以遍历数组，也可以遍历 Map 对象。

for in：遍历对象的属性

for … in主要用于遍历对象，不建议用来遍历数组。
语法：

for (const 变量 in 对象) {

}
解释：对象中有几个属性，循环体就会执行几次。每次执行时，会将对象中的每个属性的 属性名 赋值给变量。

语法举例：

for (var key in obj) {
console.log(key); // 这里的 key 是：对象属性的键（也就是属性名）
console.log(obj[key]); // 这里的 obj[key] 是：对象属性的值（也就是属性值）
}
举例：
const obj = {
name: ‘smyhvae’,
age: 28,
gender: ‘男’,
address: ‘shenzhen’,
sayHi: function () {
console.log(this.name);
},
};

        // 遍历对象中的属性
        for (const key in obj) {
            console.log('属性名:' + key);
            console.log('属性值:' + obj[key]); // 注意，因为这里的属性名 key 是变量，所以，如果想获取属性值，不能写成 obj.key，而是要写成 obj[key]
        }

打印结果：

属性名:name
属性值:smyhvae

属性名:age
属性值:26

属性名:gender
属性值:男

属性名:address
属性值:shenzhen

属性名:sayHi
属性值:function() {
console.log(this.name);
}
for in 遍历数组（不建议）

另外，for in 当然也可以用来遍历数组（只是不建议），此时的 key 是数组的索引。