Js中for...in Vs for...of

概述

Js中for...in和for...of都可以用來遍歷，今天來對比一下它們的異同。
測試程式碼地址：github.com/fanxuewen/e…

一，遍歷物件

let obj = { name: '張三', 1: 'Sencond', age: 19, 0: 'First' }
console.log('----------for...in-----------');
for (item in obj) {
    console.log(item, '-----', obj[item]);
}
console.log('----------for...of-----------');
for (item of obj) {
    console.log(item, '-----', obj[item]);
}
複製程式碼

從以上執行結果可以得出以下結論：

1.for...in可以用來遍歷物件，但是不能保證遍歷順序(遍歷的順序是先按數字鍵排序遍歷，再按加入物件的順序遍歷)
2.for...of不能遍歷物件，從報錯的資訊可以看出for...of只能遍歷iterable物件。順便提一下iterable物件：就是實現了Iterator介面的物件，只要一個物件有Symbol.iterator屬性，並且這個屬性指向一個返回值包含next方法的物件的函式，那麼就說明這個物件實現了Iterator介面，如下所示：

const obj = {
    count: 0,
    [Symbol.iterator]: function () {
        return {
            next: function () {
                if (obj.count <= 2) {
                    return { value: obj.count++,done: false};
                } else {
                    return {  value: 0, done: true };
                } }
        };
    }
};
for (item of obj) {
    console.log(item); //0,1,2
}
複製程式碼

如果要讓for...of遍歷物件需要用Object.keys()/Object.values()/Object.entries()方法轉換一下

let obj = { name: '張三', 1: 'Sencond', age: 19, 0: 'First' }
 for(const [key, value] of Object.entries(obj)){
    console.log('key:',key,' value:',value);
}
複製程式碼

最後一點for...in除了可以遍歷自身的屬性外還可以遍歷原型鏈上可列舉的屬性(若只需要列舉自身上的屬性需要通過Object.hasOweProperty篩選)，通過Object.entries()轉換後的物件只能列舉出物件自身的屬性

let obj = { name: '張三', 1: 'Sencond', age: 19, 0: 'First' }
Object.prototype.theacher = '花花'
Reflect.defineProperty(Object.prototype, 'class', {
    value: '一班',
    enumerable: false,
    configurable: true,
    writable: true

})
console.log('**************for...in************');
for (key in obj) {
    console.log(`key:${key}-----value:${obj[key]}`);
}
console.log('**************for...of************');
for (const [key, value] of Object.entries(obj)) {
    console.log('key:', key, ' value:', value);
}
複製程式碼

二，遍歷陣列

var arr=[6,7,8];
    arr.name='王八蛋';
console.log('*************for...in*********');
for(key in arr){
    console.log(`key:${key}`);
}
console.log('*************for...of*********');
for(key of arr){
    console.log(`key:${key}`);
}
複製程式碼

這裡有兩點區別：
1.for..in出來的是陣列的下標，for...of列舉出來的是陣列的值
2.for..in會列舉出陣列物件上可列舉的其他屬性，for...of只會列舉出陣列的項