for in 和 for of的區別詳解

2021-10-20 22:35:13 字數 1734 閱讀 1892

for in 和 for of 相對於大家肯定都不陌生,都是用來遍歷屬性的沒錯。那麼先看下面的乙個例子:

例1

const obj =

for(

let i in obj)

for(

let i of obj)

以上**通過 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)

// for of

for(

let i of arr)

以上**是對乙個陣列進行遍歷, for in 返回的值為 0、1、2,這不是陣列的下標嗎? 而 for of 返回的是 a、b、c,這一次沒有報錯,為什麼呢?

例3const arr = [『a』, 『b』]

// 手動給 arr陣列新增乙個屬性

arr.name = 『qiqingfu』

// for in 迴圈可以遍歷出 name 這個鍵名

for(

let i in arr)

結合上面的兩個例子,分析得出:

for … in 迴圈返回的值都是資料結構的 鍵值名。

遍歷物件返回的物件的key值,遍歷陣列返回的陣列的下標(key)。

for … in 迴圈不僅可以遍歷數字鍵名,還會遍歷原型上的值和手動新增的其他鍵。如——例3

特別情況下, for … in 迴圈會以任意的順序遍歷鍵名

總結一句: for in 迴圈特別適合遍歷物件。

for of 迴圈用來獲取一對鍵值對中的值,而 for in 獲取的是 鍵名

乙個資料結構只要部署了 symbol.iterator 屬性, 就被視為具有 iterator介面, 就可以使用 for of迴圈。

例1這個物件,沒有 symbol.iterator這個屬性,所以使用 for of會報 obj is not iterable

for of 不同與 foreach, 它可以與 break、continue和return 配合使用,也就是說 for of 迴圈可以隨時退出迴圈。

提供了遍歷所有資料結構的統一介面

只要有 iterator 介面的資料結構,都可以使用 for of迴圈。

陣列 array

mapset

string

arguments物件

nodelist物件, 就是獲取的dom列表集合

以上這些都可以直接使用 for of 迴圈。 凡是部署了 iterator 介面的資料結構也都可以使用陣列的 擴充套件運算子(…)、和解構賦值等操作。

我也想讓物件可以使用 for of迴圈怎麼辦?使用 object.keys() 獲取物件的 key值集合後,再使用 for of

以例1為例

const obj =

for(

let i of object.

keys

(obj)

)

也可以給乙個物件部署 symbol.iterator屬性。

for of 和 for in 的區別

var obj for var key of obj 出錯 uncaught typeerror obj is not iterablevar obj for var key in obj 結果是 a b cvar arr 3 5,7 for var i in arr 結果是 0 1 2var ar...

for in 和for of的區別

es5的話也可以使用foreach,es5具有遍歷陣列功能的還有map filter some every reduce reduceright等,只不過他們的返回結果不一樣。但是使用foreach遍歷陣列的話,使用break不能中斷迴圈,使用return也不能返回到外層函式。array.proto...

for in 和for of 的區別

最近在學習es6的知識,看到了for of 這新的迴圈方法,所以就測試一下和以前for in有什麼不同,一下是一些不同地方,當然還有其他不同的,暫時還沒有發現 for in迴圈由於歷史遺留問題,它遍歷的實際上是物件的屬性名稱。乙個array陣列實際上也是乙個物件,它的每個元素的索引被視為乙個屬性。當...