Javascript技巧之不要用for in語(yǔ)句對(duì)數(shù)組進(jìn)行遍歷

2019-11-21 00:11:46

字體：大中小

供稿：網(wǎng)友

一，為什么不要用for in語(yǔ)句

jqModal這個(gè)jquery插件估計(jì)很多人都使用過，在jqModal源碼內(nèi)部，有一個(gè)函數(shù)為hs，其中有個(gè)嵌套循環(huán)如下，

 
for(var i in {jqmShow:1,jqmHide:1}) 
for(var s in this[i]) 
if(H[this[i][s]]) 
H[this[i][s]].w[i](this); 
return F; 
} 

第一個(gè)for in遍歷的目標(biāo)是個(gè)匿名對(duì)象，沒有問題。
第二個(gè)for in遍歷，根據(jù)上下文確認(rèn)this[i]是一個(gè)數(shù)組對(duì)象(Array)。
很多JS先驅(qū)者都告誡過我們不要對(duì)數(shù)組對(duì)象使用for in語(yǔ)句進(jìn)行遍歷，原因除了性能外，還有可能產(chǎn)生意料之內(nèi)的bug。不聽先人言，吃虧在眼前呵呵。
今天偶拿jqModal為例，說明下這種bug到底什么時(shí)候會(huì)出現(xiàn)，當(dāng)引以為戒。
二，問題重現(xiàn)
關(guān)鍵詞：原生Array類、擴(kuò)展Array類
for in 語(yǔ)句對(duì)數(shù)組對(duì)象進(jìn)行遍歷潛在的bug在于：如果原生Array類被其他的js腳本庫(kù)進(jìn)行了原型擴(kuò)展（比如多加一個(gè)toJSON方法即Array.prototype.toJSON=xxxx)，那么用for in遍歷擴(kuò)展后的Array對(duì)象的邏輯將與遍歷原生Array對(duì)象的邏輯發(fā)生差異。
舉個(gè)簡(jiǎn)單的例子，

復(fù)制代碼代碼如下:

 
var x=[1]; 
for(var s in x){ 
alert(s); 
}; 

按常理，如果Array是原生js類，上面語(yǔ)句應(yīng)該只執(zhí)行一次alert方法，且s為數(shù)組的索引0。但是，如果Array類被擴(kuò)展了，多了一個(gè)toJSON方法，那么上面的語(yǔ)句將執(zhí)行兩次alert，第一次s為索引0，第二次s為方法名'toJSON'。

如果你設(shè)計(jì)的代碼的邏輯以原生Array類為基準(zhǔn)，在某一天你的同事在頁(yè)面里面引用了一個(gè)第三方的JS庫(kù)，這個(gè)庫(kù)又恰好擴(kuò)展了Array類，結(jié)果將難以想象，很有可能原來的代碼邏輯將不再成立。

關(guān)于這種擴(kuò)展原生JS類的庫(kù)，很有名的一個(gè)就是prototype.js，它給Array類擴(kuò)展了很多方法諸如toJSON,each等等。我現(xiàn)在明白為啥jquery的創(chuàng)始人曾經(jīng)對(duì)prototype火大了(不少人因?yàn)樘厥庠蛟谝粋€(gè)頁(yè)面里用jquery同時(shí)又用prototype，會(huì)有很多意料之外的沖突問題，僅僅一個(gè)noConflict是無法解決的)。另外，jqModal的作者如果看得懂我這篇文章估計(jì)也會(huì)對(duì)埋怨prototype，說：“我用for in對(duì)數(shù)組遍歷是不明智的，但是更該死的還是prototype。。?！?

如上所述，如果你在用jqModal，同時(shí)因?yàn)閯e的原因在用prototype，恭喜你中招了。沖突將導(dǎo)致jqModal的彈框在ie6、ie7下面將無法利用closeClass設(shè)置的按鈕進(jìn)行自動(dòng)關(guān)閉。跟蹤調(diào)試代碼你將發(fā)現(xiàn)，異常的地方就在本文開頭提到的hs方法的for in 循環(huán)中。。。
三，解決問題
遍歷數(shù)組的地方，用for var 語(yǔ)句代替for in。

上一篇：JQuery 拾色器插件發(fā)布-jquery.icolor.js

下一篇：來自國(guó)外的14個(gè)圖片放大編輯的jQuery插件整理