for...of 循環(huán)
一個數(shù)據(jù)結(jié)構(gòu)只要部署了Symbol.iterator屬性岸更,就被視為具有 iterator 接口溺蕉,就可以用for...of循環(huán)遍歷它的成員偎箫。也就是說明吩,for...of循環(huán)內(nèi)部調(diào)用的是數(shù)據(jù)結(jié)構(gòu)的Symbol.iterator方法蔑舞。
for...of循環(huán)可以使用的范圍包括數(shù)組拒担、Set 和 Map 結(jié)構(gòu)、某些類似數(shù)組的對象(比如arguments對象攻询、DOM NodeList 對象)从撼、 Generator 對象,以及字符串钧栖。
let arr = [1,2,3,"1","2","3",{a:'a'},{b:'b'}]
for (let key in arr){
console.log(key)
}
for (let value of arr){
console.log(value)
}
0
1
2
3
4
5
6
7
1
2
3
1
2
3
{a: "a"}
{b: "b"}
注意
對于普通的對象低零,for...of結(jié)構(gòu)不能直接使用婆翔,會報錯,必須部署了 Iterator 接口后才能使用
也可以結(jié)合key來使用
var student={
name:'xiaohui',
age:22,
locate:{
country:'china',
city:'hangzho',
}
}
console.log(Object.keys(student))
for(var key of Object.keys(student)){
//使用Object.keys()方法獲取對象key的數(shù)組
console.log(key+": "+student[key]);
}
["name", "age", "locate"]
"name: xiaohui"
"age: 22"
"locate: [object Object]"
總結(jié):
1.推薦在循環(huán)對象屬性的時候掏婶,使用for...in,在遍歷數(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)普通的對象纺腊,需要通過和Object.keys()搭配使用