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只会枚举出数组的项