for in与for of的区别

for in 和 for of 经常用，却没有个小结，那么先看下面的一个例子:

例1

  const obj = {
        a: 1,
        b: 2,
        c: 3
    }
    for (let i in obj) {
        console.log(i)
        // a
        // b
        // c
    }
    for (let i of obj) {
        console.log(i)
        // Uncaught TypeError: obj is not iterable 报错了
    }

以上代码通过 for in 和 for of 对一个obj对象进行遍历,for in 正常的获取了对象的 key值,分别打印 a、b、c,而 for of却报错了。

注意：
一、使用for in循环遍历对象的属性时，原型链上的所有属性都将被访问；

Object.prototype.say="cgl";   // 修改Object.prototype  
    var person ={ age: 18 };
    for (var key in person) {
        console.log(key, person[key]);//这里用person.key得不到对象key的值，用person[key] 或者 eval("person."+key);
    }   //结果： age 18                 say cgl

二、只遍历对象自身的属性，而不遍历继承于原型链上的属性，使用hasOwnProperty 方法过滤一下。

Object.prototype.say="cgl";
    var person ={
        age: 18
    };
    for (var key in person) {
        if(person.hasOwnProperty(key)){
            console.log(key, eval("person."+key));
        }
    }  //结果：age 18

二.Object.keys()

Object.keys() 方法会返回一个由给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 （两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性）。返回值是这个对象的所有可枚举属性组成的字符串数组。
for in可遍历原型链上扩展的属性，Object.keys() 只遍历自身属性

Object.prototype.say="cgl";
var person ={ age: 18};
console.log(Object.keys(person));//结果  ["age"] 

小技巧：object对象没有length属性，可以通过Object.keys(person).length，来获取person的长度了。

例2:
以上是遍历对象,下面再看一个遍历数组的例子。

    const arr = ['a', 'b', 'c']
    // for in 循环
    for (let i in arr) {
        console.log(i)
        // 0
        // 1
        // 2
    }
    
    // for of
    for (let i of arr) {
        console.log(i)
        // a
        // b
        // c
    }

以上代码是对一个数组进行遍历, for in 返回的值为 0、1、2,这不是数组的下标吗? 而 for of 返回的是 a、b、c,这一次没有报错,为什么呢?

例3

 const arr = ['a', 'b']
    // 手动给 arr数组添加一个属性
    arr.name = 'qiqingfu'
    
    // for in 循环可以遍历出 name 这个键名
    for (let i in arr) {
        console.log(i)
        // a
        // b
        // name
    }

for in 的特点
结合上面的两个例子,分析得出:

for … in 循环返回的值都是数据结构的 键值名。
遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。

for … in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。如——例3

特别情况下, for … in 循环会以任意的顺序遍历键名

总结一句: for in 循环特别适合遍历对象。

for of 特点
for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名

一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。

例1这个对象,没有 Symbol.iterator这个属性,所以使用 for of会报 obj is not iterable

for of 不同与 forEach, 它可以与 break、continue和return 配合使用,也就是说 for of 循环可以随时退出循环。

提供了遍历所有数据结构的统一接口

哪些数据结构部署了 Symbol.iteratoer属性了呢?
只要有 iterator 接口的数据结构,都可以使用 for of循环。

数组 Array
Map
Set
String
arguments对象
Nodelist对象, 就是获取的dom列表集合

以上这些都可以直接使用 for of 循环。 凡是部署了 iterator 接口的数据结构也都可以使用数组的 扩展运算符(…)、和解构赋值等操作。

我也想让对象可以使用 for of循环怎么办?使用 Object.keys() 获取对象的 key值集合后,再使用 for of

以例1为例

    const obj = {
        a: 1,
        b: 2,
        c: 3
    }

    for (let i of Object.keys(obj)) {
        console.log(i)
        // 1
        // 2
        // 3
    }

也可以给一个对象部署 Symbol.iterator属性。