for in 和for of的区别

for in 和 for of 相对于大家肯定都不陌生,都是用来遍历属性的, 首先看几个例子.

遍历对象：

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

 for (let i in obj) {
     console.log(i) // //打印属性:a,b,c
     console.log(obj[i]); //打印属性值1,2,3
  }
 for (let i of obj) {
        console.log(i)
        // Uncaught TypeError: obj is not iterable 报错了
  }
如果一定要用for of 遍历对象，我们可以用Object.keys()
for(i of Object.keys(obj)){ 
     console.log(i); // 打印属性 a,b,c
     console.log(obj[i]);// 打印属性值1,2,3
} 

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

遍历数组:

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,这一次没有报错,为什么呢?

增加属性:

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

案例：

data:{
    listParams:{           
     '光大':[  
          { name:'光大---保通',brandUuid:'223' },     
          {name:'光大---华通',  brandUuid:'123' } 
     ],           
     '华贵':[             
           { name:'华贵----阳光',  brandUuid:'453' },             
           { name:'华贵----复兴',  brandUuid:'678' },         
           { name:'华贵----联合',  brandUuid:'670' }        
      ]     
     }
}
如果后端返回的数据解构是这种的，我们就可以用最简单的for in 和for of 来获取具体的值
created(){
   for(var i in this.listParams){     
      console.log('object:>> ', this.listParams); // 整个listParams对象     
   for(var key of this.listParams[i]){         
      console.log('key :>> ', key.name); //每一个name值    
    }   
  }
}

for in 的特点

结合上面的两个例子,分析得出:

1.for ... in 循环返回的值都是数据结构的 键值名。

2.遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。

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

如——增加属性的特别情况下, for ... in 循环会以任意的顺序遍历键名

总结一句: for in 循环特别适合遍历对象。
for in遍历数组得到的是数组的下标，for of遍历数组得到的是数组的元素，for in遍历键 ， for of遍历值

for of 特点

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

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

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

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

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