淺析四種常見的Javascript聲明循環(huán)變量的書寫方式
Javascript中的循環(huán)變量聲明,到底應(yīng)該放在哪兒?
習(xí)慣1:不聲明直接使用
function loop(arr) { for (i = 0; i < arr.length; i++) { // do something } }
非常危險(xiǎn)的使用習(xí)慣,一般情況下循環(huán)變量將成為window對象上的一個(gè)屬性被全局使用,極有可能影響程序的正常邏輯實(shí)現(xiàn)。
需要著重提一下的是,在strict模式下,未聲明變量而直接賦值的使用方式會(huì)直接拋出異常,早就該這么做啦!引用一下ecma-262標(biāo)準(zhǔn)附錄C中的一段話:
"Assignment to an undeclared identifier or otherwise unresolvable reference does not create a property in the global object. When a simple assignment occurs within strict mode code, its LeftHandSide must not evaluate to an unresolvable Reference. If it does a ReferenceError exception is thrown (6.2.3.2)."
換言之,如果再使用未經(jīng)聲明的變量的話,ReferenceError異常會(huì)被拋出。
習(xí)慣2:放在for循環(huán)初始語句塊中并反復(fù)聲明
function loop(arr) { for (var i = 0; i < arr.length; i++ ){ // do someting } // console.log(i); for (var i = 0; i < arr.length; i++ ){ // do something else } }
這種方式看似最安全規(guī)范,很多從C和Java轉(zhuǎn)到前端開發(fā)的同學(xué)都偏愛這樣的寫法,事實(shí)上,這也許是由于對Javascript中一個(gè)重要概念有所 誤解造成的——變量作用域。不同于C和Java,Javascript并不具備真正的塊級作用域,也就是說,在第一個(gè)循環(huán)結(jié)束之 后,console.log(i)并不會(huì)打印undefined或者拋出ReferenceError異常,而是會(huì)正常打印出arr.length。
當(dāng)然,這樣的寫法雖然除了美觀以外意義不大,但是長久以來兼容性良好且沒有違反任何規(guī)范——ecma標(biāo)準(zhǔn)中并沒有禁止在某一個(gè)作用域內(nèi)對于同一變量的重復(fù)聲明。
習(xí)慣3:在函數(shù)頂部和其他變量一起集中定義
function loop(arr) { var var1; var var2; var i; for (i = 0; i < arr.length; i++) { // do something } }
這種c89-like式的變量定義方式在Javascript中幾乎無可挑剔,既不會(huì)造成Javascript支持塊級作用域的誤解,又不會(huì)污染全 局scope,還不違反任何標(biāo)準(zhǔn)和規(guī)范,主要缺點(diǎn)就是循環(huán)變量的聲明和循環(huán)體可能會(huì)隔開比較遠(yuǎn)。在不借助更多代碼的前提下,除了等待各大主流瀏覽器廠商實(shí)現(xiàn)ECMAScript 6中的let關(guān)鍵字以外,這個(gè)問題似乎找不到更好的解決方案。
習(xí)慣4:將循環(huán)代碼封裝到IIFE中
function loop(arr) { (function () { for (var i = 0; i < arr.length; i++) { // do something } })(); }
最后一種習(xí)慣是前端程序員們熟悉的IIFE(Immediately-Invoked Function Expression),即立即執(zhí)行函數(shù)。此種方法的主要缺點(diǎn)是書寫相對麻煩,且有多余的性能損耗(很?。?,但在兼容性、對各標(biāo)準(zhǔn)規(guī)范的遵循上表現(xiàn)良好。 如果不嫌麻煩,開發(fā)者可以采取這種方式。
以上就是對Javascript中四種常見循環(huán)變量定義書寫習(xí)慣的簡單介紹和分析,各有利弊,讀者可以結(jié)合自己的需求擇優(yōu)使用。
- var與Javascript變量隱式聲明
- Javascript var變量隱式聲明方法
- javascript循環(huán)變量注冊dom事件 之強(qiáng)大的閉包
- 關(guān)于JavaScript中var聲明變量作用域的推斷
- 基于JavaScript 聲明全局變量的三種方式詳解
- 一個(gè)JavaScript變量聲明的知識(shí)點(diǎn)
- JavaScript聲明變量時(shí)為什么要加var關(guān)鍵字
- 深入理解javascript變量聲明
- JavaScript變量聲明詳解
- javascript定義變量時(shí)加var與不加var的區(qū)別
- javascript定義變量時(shí)帶var與不帶var的區(qū)別分析
- JavaScript判斷變量是否為空的自定義函數(shù)分享
- javascript中局部變量和全局變量的區(qū)別詳解
- JavaScript 變量、作用域及內(nèi)存
- javascript判斷變量是否有值的方法
- JavaScript聲明變量名的語法規(guī)則
相關(guān)文章
使用HTML+CSS+JS制作簡單的網(wǎng)頁菜單界面
這篇文章主要介紹了使用HTML+CSS+JS制作簡單的網(wǎng)頁菜單界面,這個(gè)ABROAD項(xiàng)目所使用的JavaScript部分代碼非常簡單,需要的朋友可以參考下2015-07-07uniapp父子組件傳值3種方法(props、slot和ref)
這篇文章主要給大家介紹了關(guān)于uniapp父子組件傳值的3種方法,方法包括props、slot和ref,最近看到uniapp組件傳值的方法,這里記錄一下,需要的朋友可以參考下2023-07-07JavaScript學(xué)習(xí)筆記之Cookie對象
本文主要簡單介紹了javascript中cookie對象的概念,以及cookie的讀取,寫入,刪除操作的方法,并附上示例,非常不錯(cuò),這里推薦給小伙伴們。2015-01-01在firefox和Chrome下關(guān)閉瀏覽器窗口無效的解決方法
首先IE是可以通過window.close()來關(guān)閉瀏覽器窗口的,但是在firefox和Chrome下是無效的,但是可以通過一些特殊的手段進(jìn)行關(guān)閉2014-01-01javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全詳解,實(shí)例修正版。2009-07-07javascript 基礎(chǔ)篇1 什么是js 建立第一個(gè)js程序
javascript是很多東西的基礎(chǔ),比如jsp,ajax等,如果不會(huì)這么,那么學(xué)起這些來就比較麻煩,所以要先學(xué)好這個(gè),為將來的學(xué)習(xí)打好經(jīng)濟(jì)基礎(chǔ)2012-03-03