for...in 和 for...of的区别

        今天是年前最后一天，然而还在公司上班，简单记录下for...in 和 for...of的区别；

首先是对数组的遍历：

//for...in
let arr = [1,2,3]
for(let item in arr) {
    console.log(item); // 索引
    // 0
    // 1
    // 2
}

//for...of
let arr = [1,2,3]
for(let key of arr) {
    console.log(key);
    // 1
    // 2
    // 3
}

总结： for…in 返回key（索引）值， for…of返回value值

对对象的遍历：

// for...in
let obj1 = {
    name: 'kobe',
    height: 180
}

for(let key in obj) {
    console.log(key)
    //name
    //height
}

// for...of
let obj2 = {
    name: 'kobe',
    height: 180
}

for(let key of obj) {
    console.log(key)
    // 报错：obj2 is not iterable
}

总结二： for…in 遍历对象，返回key值，for…of 遍历对象，会直接报错， 因为缺少Symbol.iterable

注意：假如某个对象设置了不可枚举（enumerable: false）属性，那么就不能被for...in 遍历。可迭代对象包括: Array，Map，Set，String，TypedArray，arguments等等。

3、添加原型上添加属性（for…in）或者手动添加属性

Array.prototype.key1 = function() {}
let a = [1,2,3]
a.foo = 'kobe'
for(let key in a) {
    console.log(key);
    //0
    //1
    //2
    //kobe
    //key1    key1是可以被枚举的，就会被打印出来
}

Array.prototype.key1 = function() {}
//设置key1为不可枚举
Object.defineProperty(Array.prototype, 'key1', {
    enumerable: false
})  
let a = [1,2,3]
for(let key in a) {
    console.log(key);
    //0
    //1
    //2
}

总结： for…in会遍历可枚举的属性(包括在原型链上)。for…of不会遍历原型链上。