1颊乘、for...of
ES6 借鑒 C++参淹、Java、C# 和 Python 語(yǔ)言乏悄,引入了for...of循環(huán)浙值,作為遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一的方法。
一個(gè)數(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ù)組的對(duì)象(比如arguments對(duì)象瓦戚、DOM NodeList 對(duì)象)沮尿、后文的 Generator 對(duì)象,以及字符串较解。
2畜疾、for...in
以任意順序遍歷一個(gè)對(duì)象自有的、繼承的印衔、可枚舉的啡捶、非Symbol的屬性。對(duì)于每個(gè)不同的屬性奸焙,語(yǔ)句都會(huì)被執(zhí)行瞎暑。
3、區(qū)別
JavaScript 原有的for...in循環(huán)忿偷,只能獲得對(duì)象的鍵名金顿,不能直接獲取鍵值臊泌。ES6 提供for...of循環(huán)鲤桥,允許遍歷獲得鍵值。
var arr = ['a', 'b', 'c', 'd'];
for (let a in arr) {
?????console.log(a); // 0 1 2 3
}
for (let a of arr) {
?????console.log(a); // a b c d
}
for...of循環(huán)調(diào)用遍歷器接口渠概,數(shù)組的遍歷器接口只返回具有數(shù)字索引的屬性茶凳。這一點(diǎn)跟for...in循環(huán)也不一樣。
let arr = [3, 5, 7];
arr.foo = 'hello';
for (let i in arr) {
? ? console.log(i); // "0", "1", "2", "foo"
}
for (let i of arr) {
? ? console.log(i); // "3", "5", "7"
}
for...of循環(huán)不會(huì)返回?cái)?shù)組arr的foo屬性播揪。?
推薦在循環(huán)對(duì)象屬性的時(shí)候贮喧,使用for...in,在遍歷數(shù)組的時(shí)候的時(shí)候使用for...of。