這篇文章應該是在一年多之前讀過的，那會看完感覺作者文采不錯，就做了收藏，做此分享，希望能幫助到你更好的理解js中的循環~~~

以下正文。。。

今天可是個好日子！

你問我為什么？

你這都不知道，ChinaJoy啊！可是身為瘦宅的我的大日子啊，不說了，我趕時間，我可是偷偷瞞著我老婆出來的，只能出來2小時。哇塞，好熱鬧啊！琳瑯滿目的展位，熙熙攘攘的人群，喔哦哦，一排排的showgirl都長得都好好看，雖然和我老婆比還差點。

突然，旁邊一個戴眼鏡的小胖子一聲大叫：“看，for..in和for..of在那里吵架！”

我順著望去，只見2點鐘方向有一群穿著格子衫背著電腦包的人在圍觀什么，直覺告訴我，此事不簡單，于是就走過去一看究竟。

一打聽，原來是兩個人在爭論誰給“天上地下，唯我獨萌”的血小板拍照效果好。

不過這兩人長得好像啊，是親兄弟吧，一時間分不清誰是誰，等下，兩人頭上帽子上的文字好像不一樣，一個是“淫”，一個是“污”。我摸了摸我性感的下巴沉思了下，哦，立馬豁然開朗。“淫”指的是for..in，in讀音和“淫”近似；“污”指的是for..of，of讀音和“污”近似。哈哈哈，我可真是個“淫才”，不過聽起來好像不太和諧，我還是用IN和OF代替他們吧。

IN說：“我第一屆ChinaJoy就過來拍照了，整個圈子誰不認識我！”眾人點頭。

OF說：“大叔，現在都什么年代了，細胞都談戀愛了，拍照這種事不是越老就越厲害的！”

IN說：“我可以360度無死角拍美照！”

OF說：“好巧啊，我也可以360度無死角拍美照！”

……

就這樣，IN和OF你一句我一句，吵得不可開交，完全沒有個頭，我實在看不下去了，直接走上前，大手一擺，勸架道：“內個，你們二位，先冷靜下！”

“你是哪根蔥啊？”

“我……張思聰！”說完，兩人臉色緩和了些，我立即繼續說道：“你們這樣爭論是沒有什么結論的，要不這樣，你們直接就把你們那個360度技術當場展示下，我們這一圈觀眾給你們評判，放心，你瞧我們打扮，一看就是程序員，程序員是出了門的老實，一定會評判公正的。”

IN和OF一臉不可信的表情。

我沒辦法，直接抓住旁邊人就問：“你是程序員嗎？”

“我是，我是騰訊的，我做前端的。”

“哎呀，好巧啊，我也是做前端的，我是閱文的。”

“我是阿里的……我從北京來的……我做區塊鏈的，我做金融的……”大家紛紛表明了自己的身份。

“你看現在圍觀的全部都是程序員，技術男，絕對靠譜，不知你們意下如何？”

IN和OF面面相覷了一下，說道：“好吧，我們同意了，接下來我們依次展示我們技能，你們可都要看仔細了。”

“IN前輩，你是前輩，遵老愛幼，你先來！”OF說道。

“好，恭敬不如從命！”IN回道，然后開始展示自己才藝，只見一個躍起，360度大回環，口中喊道：“我可以枚舉對象。”然后一頓咔咔咔咔閃光燈，然后照出了下面的畫面：

var obj = {a: 1,b: [],c: function () {} }; for (var key in obj) {console.log(key); } // 結果是： // a // b // c

“怎么樣，厲不厲害？”圍觀眾人嘖嘖稱贊。

“呵呵！”OF冷笑了下，“這有啥，看我的！”聽這口氣，OF要鳥起了，眾人投來期盼目光。

只見OF從背后抽出一個40米的相機，也是一頓咔咔咔咔，然后一個躍起，360度大回環，只聽見哎呀一聲，OF摔了個大跟頭，畫面如下：

var obj = {a: 1,b: [],c: function () {} }; for (var key of obj) {console.log(key); } // 出錯： // Uncaught TypeError: obj is not iterable

眾人紛紛搖頭，噓聲四起。

IN在那里哈哈仰頭大笑：“OF你膽兒還真肥，連個簡單的對象枚舉都搞不定，也敢和我爭高下！實話告訴你，我不僅可以枚舉純對象，我還可以枚舉數組。”

只見一頓操作后浮現出下面的畫面：

var arr = [3, 5, 7]; for (var i in arr) {console.log(i); } // 結果是： // 0 // 1 // 2

眾人紛紛點頭表示get到了點。

“呵呵！”OF冷笑了下，“這有啥，看我的！我可以迭代數組。”同樣的口氣，不過這次眾人已經提前開始搖頭了。只見從左往右一頓拍，然后出現了下面的畫面：

var arr = [3, 5, 7]; for (var i of arr) {console.log(i); } // 結果是： // 3 // 5 // 7

圍觀眾人似乎之前沒見過這樣的場景，紛紛交頭接耳。

也不禁激起了我自己的興趣：“有意思！for..of原來是直接輸出了數組的值。只是……”

“哈哈！”IN又得意地笑了起來，“OF啊OF，你走的是哪一出啊，你只能‘枚舉’出數組的值，數組的索引你就這樣放棄了？你看我，能輸出索引，也能輸出值。”

var arr = [3, 5, 7]; for (var i in arr) {console.log(i, arr[i]); } // 結果是： // 0 3 // 1 5 // 2 7

眾人再次嘖嘖稱贊，看來for..in勝出的概率較大啊。

IN似乎有些得意過頭，繼續得瑟道：“我不僅可以枚舉數組自身。數組的原型對象，以及數組對象本身屬性值，我都可以枚舉出來！OF，你可以嗎？”

Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {};var arr = [3, 5, 7]; arr.foo = 'hello';for (var i in arr) {console.log(i); } // 結果是： // 0 // 1 // 2 // foo // arrCustom // objCustom

這不得瑟還好，這一得瑟反而讓OF抓住了小把柄：“喲喲喲，連原型對象都出來了，這實際工作開發，這些對象很可能是不需要的，你不管三七二十一全部枚舉出來，你就不擔心出問題嗎？”

這一問一瞬間讓IN語塞，好在還算機靈，立馬想到一個東西，假裝淡定回復道：“這個不用擔心，我有另外一件利器，名為hasOwnProperty，可以避免出現你說的問題，大家請看~”

Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {};var arr = [3, 5, 7]; arr.foo = 'hello';for (var i in arr) {if (arr.hasOwnProperty(i)) {console.log(i);} } // 結果是： // 0 // 1 // 2 // foo

OF先是一驚，IN這老家伙還有這一手，可定睛一看，哈哈大笑了起來，“喲喲喲，你看看你，數組本身的屬性看來你是怎么也擺脫不掉了哦！”

IN一瞅，哇擦，怎么還有個foo，頓時尷尬不已，冷汗四起，支支吾吾，蹦了一句：“這種情況，我……我可以讓我的好朋友forEach過來幫忙，他的表現是這樣的~”

Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {};var arr = [3, 5, 7]; arr.foo = 'hello';arr.forEach(function (value, i) {console.log(i); }); // 結果是： // 0 // 1 // 2

說完IN立馬臉色好轉，面露微笑，暗自慶幸自己人脈廣，人機靈。誰知OF不斷哈哈大笑，笑得IN心里毛毛的，難道又要搞出什么幺蛾子。

只見OF慢悠悠向前踱了兩步，一臉輕蔑地說道：“forEach，我知道的，呵呵呵，前段時間我們剛筆試過，我的手下敗將，不值一提。”然后對著圍觀的群眾大聲說道：“這個forEach啊，只能遍歷數組，怎么能跟我比；就算比試‘遍歷’數組，forEach跟我比也是遜色幾分的。你們可能不知道吧，forEach遍歷數組的時候是無法break或者return false中斷的。比方說~”

var arr = [3, 5, 7];arr.forEach(function (value) {console.log(value);if (value == 5) {return false;} }); // 結果是： // 3 // 5 // 7

“大家看到沒，return false根本就沒作用，一直循環到底。”眾人紛紛點頭表示認同，OF繼續說道：“那我就不一樣了，我直接一個break就能中斷循環，可謂能進能出，我給大家表演下。”

只見OF腰間抽出一把40CM長刀，對著自己腰部直接就砍啊，眼睛都不眨一下，眾人紛紛側目不忍直視，膽大的人瞄了瞄，看到了下面的畫面：

var arr = [3, 5, 7];for (let value of arr) {console.log(value);if (value == 5) {break;} } // 結果是： // 3 // 5

大家一看，果然數組最后一項7沒有輸出，果然循環中斷了，而且……大家仔細看了看，OF雖然砍了自己一刀，不過看上去并沒有任何傷害！眾人不禁紛紛喝彩鼓掌起來。

IN在一旁看傻眼了，OF則得意洋洋，開始乘勝追擊：“哎呀，有些人啊，沒見過世面，不知道動漫的世界里先手都是輸嘛，哈哈哈。現在，是時候展現真正的技術了！”只見OF口中念念有詞，突然，手中白光一閃，出現了幾件寶物，眾人眼睛都看直了。

只見OF不緊不慢地說道：“灑家我的技能叫做‘迭代’，跟IN那種‘枚舉’不是一個level的。我呢不僅可以迭代數組，我還可以直接迭代字符串，大家可以圍過來看一看啊……”

我湊上前一看，果然可以啊！

let str = 'boo';for (let value of str) {console.log(value); } // 結果是： // "b" // "o" // "o"

IN支支吾吾說不出話來了，因為這個自己真的不支持，強行執行只會報錯。

OF繼續說道：“我還可以直接迭代arguments類數組對象，且看~”

(function() {for (let argument of arguments) {console.log(argument);} })(1, 2, 3); // 結果是： // 1 // 2 // 3

“喔噢，這個好！”圍觀的程序員們紛紛豎起了大拇指，而IN則蹲在一旁不說話了。

“還沒完呢，嘻嘻……我還可以迭代NodeList這類DOM集合，無需[].slice.call()，也不需要Array.from()進行數組轉化，我可以直接用起來~”

let elements = document.querySelectorAll('body');for (let element of elements) {console.log(element.tagName); } // 結果是： // "BODY"

“喔哦哦喔，這個更好！”圍觀的程序員們已經開始激動地不能自已，而IN蹲得更遠了。我心想：看來，這場比試，如果沒有奇跡的話，for..of應該就贏了！身為發起這場比試的我已經打算宣布for..of下半場翻盤獲勝，結果for..of繼續不依不饒秀自己技能。

“我還可以迭代類型數組~”

let typeArr = new Uint8Array([0x00, 0xff]);for (let value of typeArr) {console.log(value); } // 結果是： // 0 // 255

“我還可以迭代Map~”

let mapData = new Map([['a', 1], ['b', 2], ['c', 3]]);for (let [key, value] of mapData) {console.log(value); } // 結果是： // 1 // 2 // 3

“我還可以迭代Set~”

let setData = new Set([1, 1, 2, 2, 3, 3]);for (let value of setData) {console.log(value); } // 結果是： // 1 // 2 // 3

“我還可以迭代generators……”

完了完了，已經完全成了for..of專場了，我看了看一旁灰頭土臉，毫無生氣的for..in，不禁擔憂，這場比試會不會讓for..in懷疑人生，從此從CJ圈消失啊，甚至直接從大悅城一躍而下……我越想越后怕，趕快打住：“夠了夠了！”

OF見我打斷其表演有些不開心，我就說了這么一句：“少俠，得饒人處且饒人。我們在場所有人都認為你武藝高強，相比for..in要更勝一籌。”OF立馬臉色好了很多，一臉趾高氣昂。

我平生最看不慣那些拽拽的人，OF和IN都不知道謙遜，我都沒什么好感。不過身為裁判，還是要公正，于是，我就說道：“在宣布比賽結果之前，我先對兩位精彩的比試做個總結。對于純對象的遍歷，for..in要厲害一些，大家相信都看到了；對于數組遍歷，如果不需要知道索引，for..of迭代更合適，因為還可以中斷；如果需要知道索引，則forEach()更合適；對于其他字符串，類數組，類型數組的迭代，很顯然，for..of優勢非常明顯，因此，我宣布，本次比賽的獲勝者是……”

OF在舞臺中央，洋洋得意，準備享受宣布勝利時候的榮光，就在此時，人群一陣嘩然，什么情況，臥槽，一群血小板突然走了過來。“卡哇伊……”眾人不禁齊呼，眼睛都放出了40瓦燈泡亮度的光，身子直接都軟掉了！

“血小板，你來得正好，我們正在給for..in和for..of評判誰拍照技術好，有資格可以做你的御用攝影師。”

結果血小板用超萌的小奶音回復我：“帥氣的小哥哥，可不可以我們自己選？”

“當然，當然可以！你選，我想IN和OF兩位大人應該不會有任何意見的。”

“對的，沒有異議。”自信的OF率先附和。

“我也沒意見。”遠處的IN隨便舉了個手無精打采回復道。

“那好！”只見血小板說完，走到了for..in那里，舉起了for..in的雙手，說道：“我要for..in做我的攝影師！”

“啊？？？？”眾人下巴都驚得掉在了地上，“為啥？？”

“那個，那個……”血小板萌奶音回答道，“這次的照片要在微軟名為IE的雜志和網站上展示，for..of大人雖然技能更廣，但是畢竟是ES6新特性，IE瀏覽器不支持，因此，這次我選兼容性更好的for..in！”

然后，眾人就眼睜睜看著for..in在眾多萌萌的血小板的包圍中離開了！而for..of雙手撐地歸在冰冷的地面上，留下了悲傷的淚水。

“唉……”眾人紛紛嘆息，“世事難料啊！”然后人群逐漸散開了。

我駐足了片刻，也無能為力，準備離開，突然想到一件事情，我一看手機，我拉個擦，出門到現在已經過去1個小時60分鐘了！想到晚上爽脆的搓衣板，我也雙手撐地歸在冰冷的地面上，留下了悲傷的淚水。

此刻，偌大的展館中央，有兩人悲傷的人兒，他們的淚水，讓今年的ChinaJoy顯得格外得動人！

作者：張鑫旭

鏈接： https://www.zhangxinxu.com/wordpress/2018/08/for-in-es6-for-of/

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的for in for of区别_（for…in） VS （for…of）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。