for-in/of 对象遍历的区别

Object 遍历的方法

for  in

用于对象的可访问属性的遍历，for-in 读取键名，适合处理对象

     遍历数字键，也会遍历非数字键或其他属性

     返回key在迭代中不保证返回顺序

 

for of

用于读取可迭代属性的value，for-of 读取键值

      数据结构有Symbol.iterator属性，表示有 iterator 接口，可以使用 for-of 循环

   for-of 内部调用数据结构的Symbol.iterator方法

      直接取值简洁高效

      和forEach不同，可以使用continue  break   return

      可以遍历大部分的数据结构，可以处理【类数组】

     

      类数组

      String                  字符串

      DOM NodeList      节点列表

      arguments            函数参数

      set                       Set

      map                     Map

 

      使用  for-of 处理对象  需要先进行预处理

      entries() 转为迭代器对象 用of访问，返回值带有index

      Object.prototype.toString.call( arr.entries())

      //   "[object Array Iterator]"  类型名称特殊

      keys() 先获取一个key的数组，基于数组进行对象遍历

 

       特殊处理，使用生成器将迭代器或者数组循环中的值，分步返回，在用循环迭代，迭代器方式返回key。

       function* entries(obj) {

            for (let key of Object.keys(obj)) {

                 yield [key, obj[key]];

            }

       }

      

对比

      Object.keys(obj)    自身可枚举属性   (不含Symbol属性，不包括原型链上的属性)

      for in                   自身可枚举属性 （包括原型链上的属性）

      hasOwnProperty   是否是自身属性，不包括数组的empty，不包括原型链的属性

      

      Object.getOwnPropertyNames(obj)       自身属性名列表

      Object.getOwnPropertySymbols(obj)    自身Symbol属性

 

      Reflect.ownKeys(obj)   包含对象自身所有属性，属性名是Symbol或字符串，或者是否可枚举.