for in 和 for of 的區(qū)別?

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。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末猪狈,一起剝皮案震驚了整個(gè)濱河市箱沦,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌雇庙,老刑警劉巖谓形,帶你破解...
    沈念sama閱讀 217,084評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異疆前,居然都是意外死亡寒跳,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門竹椒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來童太,“玉大人,你說我怎么就攤上這事∈槭停” “怎么了翘贮?”我有些...
    開封第一講書人閱讀 163,450評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)征冷。 經(jīng)常有香客問我择膝,道長(zhǎng),這世上最難降的妖魔是什么检激? 我笑而不...
    開封第一講書人閱讀 58,322評(píng)論 1 293
  • 正文 為了忘掉前任肴捉,我火速辦了婚禮,結(jié)果婚禮上叔收,老公的妹妹穿的比我還像新娘齿穗。我一直安慰自己,他們只是感情好饺律,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,370評(píng)論 6 390
  • 文/花漫 我一把揭開白布窃页。 她就那樣靜靜地躺著,像睡著了一般复濒。 火紅的嫁衣襯著肌膚如雪脖卖。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,274評(píng)論 1 300
  • 那天巧颈,我揣著相機(jī)與錄音畦木,去河邊找鬼。 笑死砸泛,一個(gè)胖子當(dāng)著我的面吹牛十籍,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播唇礁,決...
    沈念sama閱讀 40,126評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼勾栗,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了盏筐?” 一聲冷哼從身側(cè)響起围俘,我...
    開封第一講書人閱讀 38,980評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎琢融,沒想到半個(gè)月后界牡,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,414評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡吏奸,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,599評(píng)論 3 334
  • 正文 我和宋清朗相戀三年欢揖,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片奋蔚。...
    茶點(diǎn)故事閱讀 39,773評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡她混,死狀恐怖烈钞,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情坤按,我是刑警寧澤毯欣,帶...
    沈念sama閱讀 35,470評(píng)論 5 344
  • 正文 年R本政府宣布,位于F島的核電站臭脓,受9級(jí)特大地震影響酗钞,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜来累,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,080評(píng)論 3 327
  • 文/蒙蒙 一砚作、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嘹锁,春花似錦葫录、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至摔竿,卻和暖如春面粮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背继低。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工熬苍, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人郁季。 一個(gè)月前我還...
    沈念sama閱讀 47,865評(píng)論 2 370
  • 正文 我出身青樓冷溃,卻偏偏與公主長(zhǎng)得像钱磅,于是被迫代替她去往敵國(guó)和親梦裂。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,689評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 對(duì)數(shù)組的遍歷大家最常用的就是for循環(huán)盖淡,ES5的話也可以使用forEach年柠,ES5具有遍歷數(shù)組功能的還有map、f...
    筱筱岳閱讀 14,721評(píng)論 0 0
  • 1 遍歷數(shù)組通常用for循環(huán) ES5的話也可以使用forEach褪迟,ES5具有遍歷數(shù)組功能的還有map冗恨、filter...
    Haiya_32ef閱讀 170,076評(píng)論 12 129
  • 注:for...of是ES6新引入的特性。修復(fù)了ES5引入的for...in的不足先定義一個(gè)數(shù)組:let aArr...
    尤雨溪的大迷弟閱讀 2,181評(píng)論 0 0
  • 我來自木棉天堂味赃, 帶了一身芳香掀抹。 在春天開花—— 一樹橙黃。 在夏天繁葉—— 滿冠幻想心俗。 在秋天枯萎—— 干枝搖晃...
    郭小四2閱讀 428評(píng)論 0 0
  • 沒有感情基礎(chǔ)的告白傲武,只是為了自己感動(dòng)自己蓉驹。
    dasgrab閱讀 163評(píng)論 0 0