JS中的for...in和for...of迴圈語句有什麼區別

for...in 和 for...of 語句都可以用來遍歷一個變數，下面分別使用 for...in 和 for...of 來遍歷一個普通物件和陣列，結合具體的示例程式碼來進行比較兩者之間的異同點。

（1）使用 for...in 來迴圈遍歷一個普通物件

for...in 語句可以用來迴圈一個物件所有可列舉的屬性，下面的程式碼是用來列印 obj 物件所有的屬性欄位和屬性值：

let obj = {type: 1, keyword: "js"};
for (let key in obj) {
    console.log(key, obj[key])
}

輸出結果如下：

type 1
keyword js

（2）使用 for...in 來迴圈遍歷一個陣列

如果使用 for...in 語句來遍歷一個陣列，它遍歷的結果是陣列的下標，具體測試程式碼如下：

let obj = ['type', 'keyword']
for (let key in obj) {
    console.log(key, obj[key])
}

此時的 obj 是一個陣列物件，輸出結果如下：

0 type
1 keyword

因此可以得出以下的結論：

（1）使用 for...in 來迴圈遍歷一個普通物件

for...of 語句主要用來迴圈一個可迭代物件的屬性，要成為可迭代物件，一個物件必須實現 @@iterator 方法，這意味著物件（或者它原型鏈上的某個物件）必須有一個鍵為 @@iterator 的屬性，可通過常量 Symbol.iterator 訪問該屬性。

對於普通的物件，其實並不是可迭代物件，如果直接使用 for...of 遍歷的話，會報錯的，下面來測試一下：

let obj = {type: 1, keyword: "js"};
for (let key of obj) {
    console.log(key, obj[key])
}

執行後，出現下面的錯誤，直接提示 obj 不是可迭代物件，如下：

那麼如何使用 for...of 來遍歷物件屬性呢，首先需要做的就是將 obj 物件轉換成一個可迭代物件，這裡可以藉助 Object.keys() 方法，調整後的程式碼如下：

let obj = {type: 1, keyword: "js"};
for (let key of Object.keys(obj)) {
    console.log(key, obj[key])
}

輸出結果如下：

type 1
keyword js

（2）使用 for...in 來迴圈遍歷一個陣列

如果使用 for...in 語句來遍歷一個陣列，它遍歷的結果是陣列的元素值，具體測試程式碼如下：

let obj = ['type', 'keyword']
for (let key of obj) {
    console.log(key)
}

輸出的結果如下：

type
keyword

因此可以得出以下的結論：

（1）相同點

（2）不同點

參考資料

相關文章