Js中for in 和for of的區(qū)別

對(duì)數(shù)組的遍歷大家最常用的就是for循環(huán)惋鸥,ES5的話也可以使用forEach,ES5具有遍歷數(shù)組功能的還有map悍缠、filter卦绣、some、every飞蚓、reduce滤港、reduceRight等,只不過他們的返回結(jié)果不一樣趴拧。但是使用foreach遍歷數(shù)組的話溅漾,使用break不能中斷循環(huán),使用return也不能返回到外層函數(shù)著榴。

那么接下來我們一起看一下for in 和for of 的區(qū)別吧添履。

##### for in

看一個(gè)簡(jiǎn)單的例子

```

//for in 應(yīng)用于數(shù)組

Array.prototype.sayHello = function(){

? ? console.log("Hello")

}

Array.prototype.str = 'world';

var myArray = [1,2,10,30,100];

myArray.name='數(shù)組';

for(let index in myArray){

? ? console.log(index);

}

//輸出結(jié)果如下

0,1,2,3,4,name,str,sayHello

//for in? 應(yīng)用于對(duì)象中

Object.prototype.sayHello = function(){

? ? console.log('Hello');

}

Obeject.prototype.str = 'World';

var myObject = {name:'zhangsan',age:100};

for(let index in myObject){

? ? console.log(index);

}

//輸出結(jié)果

name,age,str,sayHello

//首先輸出的是對(duì)象的屬性名,再是對(duì)象原型中的屬性和方法脑又,

//如果不想讓其輸出原型中的屬性和方法暮胧,可以使用hasOwnProperty方法進(jìn)行過濾

for(let index in myObject){

? ? if(myObject.hasOwnProperty(index)){

? ? ? ? console.log(index)

? ? }

}

//輸出結(jié)果為

name,age

//你也可以用Object.keys()方法獲取所有的自身可枚舉屬性組成的數(shù)組锐借。

Object.keys(myObject)

```

可以看出for in 應(yīng)用于數(shù)組循環(huán)返回的是數(shù)組的下標(biāo)和數(shù)組的屬性和原型上的方法和屬性,而for in應(yīng)用于對(duì)象循環(huán)返回的是對(duì)象的屬性名和原型中的方法和屬性往衷。

使用for in 也可以遍歷數(shù)組钞翔,但是會(huì)存在以下問題:

1.index索引為字符串型數(shù)字,不能直接進(jìn)行幾何運(yùn)算

2.遍歷順序有可能不是按照實(shí)際數(shù)組的內(nèi)部順序

3.使用for in會(huì)遍歷數(shù)組所有的可枚舉屬性席舍,包括原型布轿。例如上栗的原型方法method和name屬性

##### for of

```

Object.prototype.sayHello = function(){

? ? console.log('Hello');

}

var myObject = {

? ? name:'zhangsan',

? ? age:10

}

for(let key of myObject){

? ? consoloe.log(key);

}

//輸出結(jié)果

//typeError

Array.prototype.sayHello = function(){

? ? console.log("Hello");

}

var myArray = [1,200,3,400,100];

for(let key of myArray){

? ? console.log(key);

}

//輸出結(jié)果

1,200,3,400,100

```

for in遍歷的是數(shù)組的索引(即鍵名),而for of遍歷的是數(shù)組元素值来颤。

所以for in更適合遍歷對(duì)象汰扭,不要使用for in遍歷數(shù)組。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末脚曾,一起剝皮案震驚了整個(gè)濱河市东且,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌本讥,老刑警劉巖珊泳,帶你破解...
    沈念sama閱讀 211,423評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異拷沸,居然都是意外死亡色查,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,147評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門撞芍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來秧了,“玉大人,你說我怎么就攤上這事序无⊙檎保” “怎么了?”我有些...
    開封第一講書人閱讀 157,019評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵帝嗡,是天一觀的道長(zhǎng)晶通。 經(jīng)常有香客問我,道長(zhǎng)哟玷,這世上最難降的妖魔是什么狮辽? 我笑而不...
    開封第一講書人閱讀 56,443評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮巢寡,結(jié)果婚禮上喉脖,老公的妹妹穿的比我還像新娘慕购。我一直安慰自己捞高,他們只是感情好鹅搪,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,535評(píng)論 6 385
  • 文/花漫 我一把揭開白布稚瘾。 她就那樣靜靜地躺著,像睡著了一般臭增。 火紅的嫁衣襯著肌膚如雪恤浪。 梳的紋絲不亂的頭發(fā)上劲腿,一...
    開封第一講書人閱讀 49,798評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音仇轻,去河邊找鬼。 笑死奶甘,一個(gè)胖子當(dāng)著我的面吹牛篷店,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播臭家,決...
    沈念sama閱讀 38,941評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼疲陕,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了钉赁?” 一聲冷哼從身側(cè)響起蹄殃,我...
    開封第一講書人閱讀 37,704評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎你踩,沒想到半個(gè)月后诅岩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,152評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡带膜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,494評(píng)論 2 327
  • 正文 我和宋清朗相戀三年吩谦,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片膝藕。...
    茶點(diǎn)故事閱讀 38,629評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡式廷,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出芭挽,到底是詐尸還是另有隱情滑废,我是刑警寧澤,帶...
    沈念sama閱讀 34,295評(píng)論 4 329
  • 正文 年R本政府宣布袜爪,位于F島的核電站蠕趁,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏饿敲。R本人自食惡果不足惜妻导,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,901評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望怀各。 院中可真熱鬧倔韭,春花似錦、人聲如沸瓢对。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽硕蛹。三九已至醇疼,卻和暖如春硕并,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背秧荆。 一陣腳步聲響...
    開封第一講書人閱讀 31,978評(píng)論 1 266
  • 我被黑心中介騙來泰國打工倔毙, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人乙濒。 一個(gè)月前我還...
    沈念sama閱讀 46,333評(píng)論 2 360
  • 正文 我出身青樓陕赃,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親颁股。 傳聞我的和親對(duì)象是個(gè)殘疾皇子么库,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,499評(píng)論 2 348

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