【笔记】for...of相关，和for...in的区别

什么是for...of?

for…of 是ES6新增的遍历方式，允许遍历一个含有iterator接口的数据结构（数组、对象等）并且返 回各项的值。

for...of和ES3中的for…in的区别

• for…of 遍历获取的是对象的键值，for…in 获取的是对象的键名；

• for… in 会遍历对象的整个原型链，性能非常差不推荐使用，而 for … of 只遍历当前对象不会 遍历原型链；

• 对于数组的遍历，for…in 会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for… of 只返回数组的下标对应的属性值；

总结： for...in 循环主要是为了遍历对象而生，不适用于遍历数组；for...of 循环可以用来遍历数 组、类数组对象，字符串、Set、Map 以及 Generator 对象。

如何使用for...of?

for…of是作为ES6新增的遍历方式，允许遍历一个含有iterator接口的数据结构（数组、对象、字符串等）并且返回各项的值，普通的对象用for..of遍历是会报错的。

1.如果需要遍历的对象是类数组对象，用Array.from转成数组即可。

var obj = {
    0:'one',
    1:'two',
    length: 2
};
obj = Array.from(obj);
for(var k of obj){
    console.log(k)
}

1. 如果不是类数组对象，就给对象添加一个[Symbol.iterator]属性，并指向一个迭代器即可。

var obj = {
    a:1,
    b:2,
    c:3
};
obj[Symbol.iterator] = function(){
var keys = Object.keys(this);
var count = 0;
return {
            next(){
                if(count<keys.length){
                    return {value: obj[keys[count++]],done:false};
                }else{
                    return {value:undefined,done:true};
                }
        }
    }
};

for(var k of obj){
    console.log(k);
}

TIPS:

• for...of用于遍历iterrable的值，for...in用于遍历对象的键。

• for...of不能用于遍历对象，for... in可以遍历可迭代数组和字符串，但应避免将其用于遍历iterable的对象。