目錄：我們在迴圈遍歷陣列或者物件的時候都會用到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() 來檢查一下，避免導致不需要的狀態發生；