目录：我们在循环遍历数组或者对象的时候都会用到for in （es5）和for of（es6）；在使用上感觉效果都差不多；那他们到底有什么差别呢？那我们就通过代码的方式来验证他们的不同吧！

数组

    var arr = ['A','B','C']
    
    for(var key in arr){
        console.log(arr); // 输出结果  ["A", "B", "C"]
        console.log(key); // 输出结果 0 1 2
    }

    for(var i of arr){
        console.log(arr); // 输出结果 [ 'A', 'B', 'C' ]
        console.log(i); // 输出结果 A B C
    }

对象

var obj = {
    id:1,
    name:'张三'
}

for(var key in obj){
    console.log(key); // 输出结果 id name
    console.log(obj); // 输出结果 { id: 1, name: '张三' } { id: 1, name: '张三' }
}

for(var i of obj) {
    console.log(i); // 输出结果 obj is not iterable （obj不是可迭代的）
}

for(var i of Object.keys(obj)) {
    console.log(i); // id name
    console.log(obj); // {id: 1, name: "张三"} {id: 1, name: "张三"}
}

原型链/继承-数组

     var arr = ['A','B','C']
     
    Object.prototype.test = function() {}; 
    Array.prototype.item = function() {};
    
    for(var key in arr){
        console.log(arr); // 输出结果 [ 'A', 'B', 'C' ]
        console.log(key); // 输出结果 0 1 2 item test
    }
    for(var key in arr){
        if(arr.hasOwnProperty(key)){
          console.log(arr); // 输出结果 [ 'A', 'B', 'C' ]
            console.log(key); // 输出结果 0 1 2
        }
    }

    for(var i of arr){
        console.log(arr); // 输出结果 [ 'A', 'B', 'C' ]
        console.log(i); // 输出结果 A B C
    }

原型链/继承-对象

var obj = {
    id:1,
    name:'张三'
}
     
Object.prototype.test = function() {}; 
Array.prototype.item = function() {};

for(var key in obj){
    console.log(obj); // 输出结果 { id: 1, name: '张三' } { id: 1, name: '张三' } { id: 1, name: '张三' }
    console.log(key); // 输出结果 id name test
}
for(var key in obj){
    if(obj.hasOwnProperty(key)){ // 检查
        console.log(key); // 输出结果 id name
        console.log(obj); // 输出结果 { id: 1, name: '张三' }
    }
}

for(var i of obj){
    console.log(i); // 输出结果 obj is not iterable
}
for(var i of Object.keys(obj)){
    console.log(i); // 输出结果 id name
}

for...in 循环的是可迭代对象key的值，而for...of 循环的是可迭代对象value的值，由此可见在面对普通对象的时候推荐使用for...in；如果就是喜欢用for of 的话就需要使用Object.keys(obj)；还有就是继承和原型链的原因会导致对象 arr 继承item和test；所以在使用的时候可以用 obj.hasOwnProperty() 来检查一下，避免导致不需要的状态发生；

如果有什么不对的地方；欢迎大家补充；相互学习、共勉