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

﹏ヽ暗。殇╰゛Y 2024-03-26 09:49 3阅读 0赞

## 什么是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\]属性，并指向一个迭代器即可。

### TIPS: ###

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