首頁 web前端 js教程 javascript中for與for in區別,以及為什麼不建議使用for in

javascript中for與for in區別,以及為什麼不建議使用for in

Jul 17, 2017 pm 02:13 PM
javascript js 為什麼

js中遍歷陣列的有兩種方式

var array=['a']
//标准的
for循环
for(var i=1;i<array.length;i++){
    alert(array[i])
}
//
foreach
循环
for(var i in array){
    alert(array[i])
}
登入後複製

正常情況下上面兩種遍歷陣列的方式結果一樣。首先說兩者的第一個區別

標準的for循環中的i是number類型,表示的是數組的下標,但是foreach循環中的i表示的是數組的key是string類型,因為js中一切都是物件。自己試試 alert(typeof i);這個差別是小問題。現在我加上以下程式碼,上面的執行結果就不一樣了。

//扩展了js原生的Array
Array.prototype.test=function()
 
}
登入後複製

試試看上面的程式碼執行什麼。我們發現標準的for循環任然真正的對數組循環, 但是此時foreach循環對我剛才寫的test方法寫打印出來了。這就是for與foreach遍歷數組的最大區別,如果我們在專案採用的是用foreach遍歷數組,假設有一天誰不小心自己為了擴展js原生的Array類,或者引入一個外部的js框架也擴展了原生Array 。那問題就來了。

為什麼不要用for in語句 ?

關鍵字:原生Array類別、擴充Array類別 
for in 語句對陣列物件進行遍歷潛在的bug在於:如果原生Array類別被其他的js腳本函式庫進行了原型擴充(例如多加一個toJSON方法即Array.prototype.toJSON=xxxx),那麼用for in遍歷擴充後的Array物件的邏輯將與遍歷原生Array物件的邏輯發生差異。 
舉個簡單的例子, 

var x=[1]; 
for(var s in x){ 
alert(s); 
};
登入後複製

按常理,如果Array是原生js類,上面語句應該只執行一次alert方法,且s為數組的索引0。但是,如果Array類別被擴充了,多了一個toJSON方法,那麼上面的語句將執行兩次alert,第一次s為索引0,第二次s為方法名稱'toJSON'。

如果你設計的程式碼的邏輯以原生Array類為基準,在某一天你的同事在頁裡面引用了一個第三方的JS庫,這個庫又恰好擴展了Array類,結果將很難想像,很有可能原來的程式碼邏輯將不再成立。 

關於這個擴充原生JS類別的函式庫,很有名的一個就是prototype.js,它給Array類別擴充了很多方法諸如toJSON,each等等。我現在明白為啥jquery的創始人曾經對prototype火大了(不少人因為特殊原因在一個頁面裡用jquery同時又用prototype,會有很多意料之外的衝突問題,僅僅一個noConflict是無法解決的)。另外,jqModal的作者如果看得懂我這篇文章估計也會對埋怨prototype,說:「我用for in對數組遍歷是不明智的,但是更該死的還是prototype。。」 

如上所述,如果你在用jqModal,同時因為別的原因在用prototype,恭喜你中招了。衝突將導致jqModal的彈框在ie6、ie7下面將無法利用closeClass設定的按鈕進行自動關閉。追蹤調試程式碼你將發現,異常的地方就在本文開頭提到的hs方法的for in 迴圈中。 。 。 
三,解問題 
遍歷陣列的地方,用for var 語句取代for in。

以上是javascript中for與for in區別,以及為什麼不建議使用for in的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1319
25
PHP教程
1269
29
C# 教程
1248
24
如何在父分類的存檔頁面上顯示子分類 如何在父分類的存檔頁面上顯示子分類 Apr 19, 2025 pm 11:54 PM

您想了解如何在父分類存檔頁面上顯示子分類嗎?在自定義分類存檔頁面時,您可能需要執行此操作,以使其對訪問者更有用。在本文中,我們將向您展示如何在父分類存檔頁面上輕鬆顯示子分類。為什麼在父分類存檔頁面上顯示子分類?通過在父分類存檔頁面上顯示所有子分類,您可以使其不那麼通用,對訪問者更有用。例如,如果您運行一個關於書籍的WordPress博客,並且有一個名為“主題”的分類法,那麼您可以添加“小說”、“非小說”等子分類法,以便您的讀者可以

虛擬幣價格上漲或者下降是為什麼 虛擬幣價格上漲或者下降的原因 虛擬幣價格上漲或者下降是為什麼 虛擬幣價格上漲或者下降的原因 Apr 21, 2025 am 08:57 AM

虛擬幣價格上漲因素包括:1.市場需求增加,2.供應量減少,3.利好消息刺激,4.市場情緒樂觀,5.宏觀經濟環境;下降因素包括:1.市場需求減少,2.供應量增加,3.利空消息打擊,4.市場情緒悲觀,5.宏觀經濟環境。

為什麼Spring項目啟動時會因為循環依賴導致隨機性問題? 為什麼Spring項目啟動時會因為循環依賴導致隨機性問題? Apr 19, 2025 pm 11:21 PM

理解Spring項目啟動中循環依賴的隨機性在進行Spring項目開發時,可能會遇到項目啟動時由於循環依賴導致的隨機...

使用RedisTemplate進行批量查詢時,為什麼返回值會為空? 使用RedisTemplate進行批量查詢時,為什麼返回值會為空? Apr 19, 2025 pm 10:15 PM

使用RedisTemplate進行批量查詢時為何返回值為空?在使用RedisTemplate進行批量查詢操作時,可能會遇到返回的結果�...

為什麼redisTemplate.opsForList().leftPop()方法不支持傳入參數來一次性彈出多個值? 為什麼redisTemplate.opsForList().leftPop()方法不支持傳入參數來一次性彈出多個值? Apr 19, 2025 pm 10:27 PM

關於RedisTemplate.opsForList().leftPop()不支持傳個數的原因在使用Redis時,很多開發者會遇到一個問題:為什麼redisTempl...

php框架laravel和yii區別是什麼 php框架laravel和yii區別是什麼 Apr 30, 2025 pm 02:24 PM

Laravel和Yii的主要區別在於設計理念、功能特性和使用場景。 1.Laravel注重開發的簡潔和愉悅,提供豐富的功能如EloquentORM和Artisan工具,適合快速開發和初學者。 2.Yii強調性能和效率,適用於高負載應用,提供高效的ActiveRecord和緩存系統,但學習曲線較陡。

為什麼JavaScript無法直接獲取用戶電腦的硬件信息? 為什麼JavaScript無法直接獲取用戶電腦的硬件信息? Apr 19, 2025 pm 08:15 PM

關於JavaScript無法獲取用戶電腦硬件信息的原因探討在日常編程中,許多開發者會好奇為什麼JavaScript無法直接獲�...

See all articles