1.共性

for of 和 for in都是用來(lái)遍歷的屬性

2.區(qū)別

• for...in 語(yǔ)句用于遍歷數(shù)組或者對(duì)象的屬性（對(duì)數(shù)組或者對(duì)象的屬性進(jìn)行循環(huán)操作）。
• for in得到對(duì)對(duì)象的key或數(shù)組,字符串的下標(biāo)
• for of和forEach一樣,是直接得到值
• for of不能用于對(duì)象

1.兩者對(duì)比例子(遍歷對(duì)象)

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 報(bào)錯(cuò)了
    }

說(shuō)明： for in 和 for of 對(duì)一個(gè)obj對(duì)象進(jìn)行遍歷,for in 正常的獲取了對(duì)象的 key值,分別打印 a、b、c,而 for of卻報(bào)錯(cuò)了。

2.兩者對(duì)比例子(遍歷數(shù)組)

   const arr = ['a', 'b', 'c']
   // for in 循環(huán)
   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.特點(diǎn)

①. for in 特點(diǎn)

• for … in 循環(huán)返回的值都是數(shù)據(jù)結(jié)構(gòu)的 鍵值名(即下標(biāo))。
• 遍歷對(duì)象返回的對(duì)象的key值,遍歷數(shù)組返回的數(shù)組的下標(biāo)(key)。
• for … in 循環(huán)不僅可以遍歷數(shù)字鍵名,還會(huì)遍歷原型上的值和手動(dòng)添加的其他鍵。
• 特別情況下, for … in 循環(huán)會(huì)以看起來(lái)任意的順序遍歷鍵名
• for in 的 常規(guī)屬性和 排序?qū)傩?/li>
• 在ECMAScript規(guī)范中定義了 「數(shù)字屬性應(yīng)該按照索引值??升序排列，字符串屬性根據(jù)創(chuàng)建時(shí)的順序升序排列?！乖谶@?我們把對(duì)象中的數(shù)字屬性稱為 「排序?qū)傩浴?，在V8中被稱為 elements，字符串屬性就被稱為 「常規(guī)屬性」， 在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

總結(jié)一句: for in 循環(huán)特別適合遍歷對(duì)象。

①. for of

• for of 循環(huán)用來(lái)獲取一對(duì)鍵值對(duì)中的值,而 for in 獲取的是 鍵名
• 一個(gè)數(shù)據(jù)結(jié)構(gòu)只要部署了 Symbol.iterator 屬性, 就被視為具有 iterator接口, 就可以使用 for of循環(huán)。
• for of 不同與 forEach, 它可以與 break、continue和return 配合使用,也就是說(shuō) for of 循環(huán)可以隨時(shí)退出循環(huán)。

知識(shí)點(diǎn)補(bǔ)充：

簡(jiǎn)述for in 和 for of 的區(qū)別

1、推薦在循環(huán)對(duì)象屬性的時(shí)候使用 for...in，在遍歷數(shù)組的時(shí)候的時(shí)候使用 for...of 
2、for...in 循環(huán)出的是 key，for...of 循環(huán)出的是 value 
3、注意，for...of 是 ES6 新引入的特性。修復(fù)了 ES5 引入的 for...in 的不足 
4、for...of 不能循環(huán)普通的對(duì)象（如通過(guò)構(gòu)造函數(shù)創(chuàng)造的），需要通過(guò)和 Object.keys()搭配使用

 for in遍歷數(shù)組的毛?。?/strong>