for in 和 for of 相對於你們確定都不陌生,都是用來遍歷屬性的沒錯。那麼先看下面的一個例子:javascript
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卻報錯了。html
以上是遍歷對象,下面再看一個遍歷數組的例子。java
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
}
以上代碼是對一個數組進行遍歷, for in 返回的值爲 0、一、2,這不是數組的下標嗎? 而 for of 返回的是 a、b、c,這一次沒有報錯,爲何呢?數組
const arr = ['a', 'b']
// 手動給 arr數組添加一個屬性
arr.name = 'qiqingfu'
// for in 循環能夠遍歷出 name 這個鍵名
for (let i in arr) {
console.log(i)
// a
// b
// name
}
結合上面的兩個例子,分析得出:數據結構
for ... in 循環返回的值都是數據結構的 鍵值名。
遍歷對象返回的對象的key值,遍歷數組返回的數組的下標(key)。dom
for ... in 循環不只能夠遍歷數字鍵名,還會遍歷原型上的值和手動添加的其餘鍵。如——例3ui
特別狀況下, for ... in 循環會以任意的順序遍歷鍵名spa
總結一句: for in 循環特別適合遍歷對象。
for of 循環用來獲取一對鍵值對中的值,而 for in 獲取的是 鍵名code
一個數據結構只要部署了 Symbol.iterator 屬性, 就被視爲具備 iterator接口, 就能夠使用 for of循環。htm
例1這個對象,沒有 Symbol.iterator這個屬性,因此使用 for of會報 obj is not iterable
for of 不一樣與 forEach, 它能夠與 break、continue和return 配合使用,也就是說 for of 循環能夠隨時退出循環。
提供了遍歷全部數據結構的統一接口
只要有 iterator 接口的數據結構,均可以使用 for of循環。
以上這些均可以直接使用 for of 循環。 凡是部署了 iterator 接口的數據結構也均可以使用數組的 擴展運算符(...)、和解構賦值等操做。
我也想讓對象能夠使用 for of循環怎麼辦?使用 Object.keys() 獲取對象的 key值集合後,再使用 for of
以例1爲例
const obj = {
a: 1,
b: 2,
c: 3
}
for (let i of Object.keys(obj)) {
console.log(i)
// 1
// 2
// 3
}
也能夠給一個對象部署 Symbol.iterator屬性。
來源:https://www.cnblogs.com/qiqingfu/archive/2018/11/28/10035554.html