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只會枚舉出數組的項