for...in與for...of都是循環(huán)語(yǔ)句，二者的區(qū)別是什么，分別對(duì)應(yīng)什么使用場(chǎng)景呢？

目錄

• 遍歷范圍

• 遍歷的值

• 遍歷順序
  

• 適用場(chǎng)景
  

  
  

遍歷范圍

for...in：可遍歷對(duì)象的可枚舉屬性（enumerable=true），包括自身的與繼承的；

const test = {  key1: 'value1',  key2: 'value2',  key3: 'value3'}for(const key in test) {  console.log('key：', key)}

輸出：

若將key2置為不可枚舉：

const test = {  key1: 'value1',  key2: 'value2',  key3: 'value3'}Object.defineProperty(test, 'key2', {  enumerable: false})for(const key in test) {  console.log('key：', key)}

輸出：

for...of：用于遍歷可迭代對(duì)象；

例1：數(shù)組

const test = [1, 2, 3]for(const value of test) {  console.log('value：', value)}

輸出：

例2：字符串

const test = 'hello'for(const value of test) {  console.log('value：', value)}

輸出：

遍歷的值

for...in：遍歷對(duì)象的鍵名（例子同上）；

for...of：遍歷對(duì)象的鍵值（訪(fǎng)問(wèn)對(duì)象的Symbol.iterator屬性）（例子同上）；

遍歷順序

for...in：遍歷順序是不確定的，會(huì)先遍歷對(duì)象的整數(shù)屬性，然后的遍歷順序依賴(lài)于對(duì)象屬性的插入順序；

for...of：遍歷順序依賴(lài)于對(duì)象迭代器定義的順序，通常是元素插入的順序。

適用場(chǎng)景

for...in：適用于遍歷對(duì)象的屬性，若用于遍歷數(shù)組時(shí)需謹(jǐn)慎，因?yàn)橐矔?huì)遍歷到原型鏈上的可枚舉屬性（見(jiàn)此篇文章）；

for...of：適用于遍歷數(shù)組、字符串、Map等具有迭代器的可迭代對(duì)象，不可用于遍歷普通對(duì)象，因?yàn)槠胀▽?duì)象沒(méi)有內(nèi)置的迭代器；

遍歷普通對(duì)象時(shí)：

const test = {  key1: 'value1',  key2: 'value2',  key3: 'value3'}for(const value of test) {  console.log('value：', value)}

輸出：

查看普通對(duì)象的Symbol.iterator：

const test = {  key1: 'value1',  key2: 'value2',  key3: 'value3'}console.log(test[Symbol.iterator])

輸出：

可見(jiàn)，普通對(duì)象沒(méi)有內(nèi)置迭代器。

查看字符串的Symbol.iterator：

const test = 'hello'console.log(test[Symbol.iterator])

輸出：

可見(jiàn)，字符串是具有迭代器的可迭代對(duì)象。