for of 和 for in 的区别介绍

1.共性

for of 和 for in都是用来遍历的属性

2.区别

• for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
• for in得到对对象的key或数组,字符串的下标
• for of和forEach一样,是直接得到值
• 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却报错了。

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
   }

3.特点

①. for in 特点

• for … in 循环返回的值都是数据结构的 键值名(即下标)。
• 遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。
• for … in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。
• 特别情况下, for … in 循环会以看起来任意的顺序遍历键名
• for in 的 常规属性和 排序属性
• 在ECMAScript规范中定义了 「数字属性应该按照索引值⼤⼩升序排列，字符串属性根据创建时的顺序升序排列。」在这⾥我们把对象中的数字属性称为 「排序属性」，在V8中被称为 elements，字符串属性就被称为 「常规属性」， 在V8中被称为 properties。

function Foo() {
 this[100] = 'test-100'
 this[1] = 'test-1'
 this["B"] = 'bar-B'
 this[50] = 'test-50'
 this[9] = 'test-9'
 this[8] = 'test-8'
 this[3] = 'test-3'
 this[5] = 'test-5'
 this["A"] = 'bar-A'
 this["C"] = 'bar-C'
}
var bar = new Foo()
for(key in bar){
 console.log(`index:${key} value:${bar[key]}`)
}

//输出：
index:1 value:test-1
index:3 value:test-3
index:5 value:test-5
index:8 value:test-8
index:9 value:test-9
index:50 value:test-50
index:100 value:test-100
index:B value:bar-B
index:A value:bar-A
index:C value:bar-C

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

①. for of

• for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名
• 一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。
• for of 不同与 forEach, 它可以与 break、continue和return 配合使用,也就是说 for of 循环可以随时退出循环。

知识点补充：

简述for in 和 for of 的区别

1、推荐在循环对象属性的时候使用 for...in，在遍历数组的时候的时候使用 for...of 
2、for...in 循环出的是 key，for...of 循环出的是 value 
3、注意，for...of 是 ES6 新引入的特性。修复了 ES5 引入的 for...in 的不足 
4、for...of 不能循环普通的对象（如通过构造函数创造的），需要通过和 Object.keys()搭配使用

 for in遍历数组的毛病：

1.index索引为字符串型数字，不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性
所以for in更适合遍历对象，不要使用for in遍历数组。

那么除了使用for循环，如何更简单的正确的遍历数组达到我们的期望呢（即不遍历method和name），ES6中的for of更胜一筹.

遍历对象

遍历对象 通常用for in来遍历对象的键名