淺析四種常見(jiàn)的Javascript聲明循環(huán)變量的書(shū)寫(xiě)方式
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對(duì)象上的一個(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)初始語(yǔ)句塊中并反復(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)到前端開(kāi)發(fā)的同學(xué)都偏愛(ài)這樣的寫(xiě)法,事實(shí)上,這也許是由于對(duì)Javascript中一個(gè)重要概念有所 誤解造成的——變量作用域。不同于C和Java,Javascript并不具備真正的塊級(jí)作用域,也就是說(shuō),在第一個(gè)循環(huán)結(jié)束之 后,console.log(i)并不會(huì)打印undefined或者拋出ReferenceError異常,而是會(huì)正常打印出arr.length。
當(dāng)然,這樣的寫(xiě)法雖然除了美觀以外意義不大,但是長(zhǎng)久以來(lái)兼容性良好且沒(méi)有違反任何規(guī)范——ecma標(biāo)準(zhǔn)中并沒(méi)有禁止在某一個(gè)作用域內(nèi)對(duì)于同一變量的重復(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中幾乎無(wú)可挑剔,既不會(huì)造成Javascript支持塊級(jí)作用域的誤解,又不會(huì)污染全 局scope,還不違反任何標(biāo)準(zhǔn)和規(guī)范,主要缺點(diǎn)就是循環(huán)變量的聲明和循環(huán)體可能會(huì)隔開(kāi)比較遠(yuǎn)。在不借助更多代碼的前提下,除了等待各大主流瀏覽器廠商實(shí)現(xiàn)ECMAScript 6中的let關(guān)鍵字以外,這個(gè)問(wèn)題似乎找不到更好的解決方案。
習(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)是書(shū)寫(xiě)相對(duì)麻煩,且有多余的性能損耗(很?。?,但在兼容性、對(duì)各標(biāo)準(zhǔn)規(guī)范的遵循上表現(xiàn)良好。 如果不嫌麻煩,開(kāi)發(fā)者可以采取這種方式。
以上就是對(duì)Javascript中四種常見(jiàn)循環(huán)變量定義書(shū)寫(xiě)習(xí)慣的簡(jiǎn)單介紹和分析,各有利弊,讀者可以結(jié)合自己的需求擇優(yōu)使用。
- var與Javascript變量隱式聲明
- Javascript var變量隱式聲明方法
- javascript循環(huán)變量注冊(cè)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聲明變量名的語(yǔ)法規(guī)則
相關(guān)文章
JavaScript的instanceof運(yùn)算符學(xué)習(xí)教程
instanceof運(yùn)算符可以用來(lái)判斷某個(gè)構(gòu)造函數(shù)的prototype屬性所指向的對(duì)象是否存在于另外一個(gè)要檢測(cè)對(duì)象的原型鏈上,這里我們就來(lái)看一下JavaScript的instanceof運(yùn)算符學(xué)習(xí)教程2016-06-06
Javascript學(xué)習(xí)筆記之 函數(shù)篇(一) : 函數(shù)聲明和函數(shù)表達(dá)式
function 是 Javascript 中的第一類(lèi)對(duì)象,這就意味著函數(shù)可以像其他值一樣被傳遞。一個(gè)最常見(jiàn)的用法就是將一個(gè)匿名函數(shù)作為回調(diào)函數(shù)傳遞到另外一個(gè)異步函數(shù)中。2014-06-06
辨析JavaScript中的Undefined類(lèi)型與null類(lèi)型
Undefined與null都是js中的基本數(shù)據(jù)類(lèi)型,然而正如它們的名字那樣,未初始化和空并不相同,下面我們就來(lái)詳細(xì)辨析JavaScript中的Undefined類(lèi)型與null類(lèi)型:2016-05-05
JavaScript中各數(shù)制轉(zhuǎn)換全面總結(jié)
這篇文章主要介紹了JavaScript中各數(shù)制轉(zhuǎn)換,利用toString的基模式來(lái)進(jìn)行轉(zhuǎn)換,對(duì)數(shù)字調(diào)用 toString(10) 與調(diào)用 toString() 它們返回的區(qū)別和相同之處等等都在本文中提及,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08
ECMAScript 5嚴(yán)格模式(Strict Mode)介紹
這篇文章主要介紹了ECMAScript 5嚴(yán)格模式(Strict Mode)介紹,本文講解了如何啟用嚴(yán)格模式、啟用嚴(yán)格模式后對(duì)變量和屬性、函數(shù)、with語(yǔ)句的影響,需要的朋友可以參考下2015-03-03

