首頁 > web前端 > js教程 > 主體

淺析四種常見的Javascript聲明循環變數的書寫方式_基礎知識

WBOY
發布: 2016-05-16 15:36:38
原創
1098 人瀏覽過

Javascript中的循環變數聲明,到底該放在哪裡?

習慣1:不聲明直接使用

function loop(arr) { 
 for (i = 0; i < arr.length; i++) { 
  // do something 
 } 
} 
登入後複製

非常危險的使用習慣,一般情況下循環變數將成為window物件上的屬性被全域使用,極有可能影響程式的正常邏輯實作。
需要著重提一下的是,在strict模式下,未宣告變數而直接賦值的使用方式會直接拋出異常,早就該這麼做啦!引用一下ecma-262標準附錄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 not occurs within nott mode ception is thrown (6.2 .3.2)."
換言之,如果再使用未經宣告的變數的話,ReferenceError異常會被拋出。

習慣2:放在for迴圈初始語句區塊中並反覆宣告

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 
 } 
} 
登入後複製

這種方式看似最安全規範,許多從C和Java轉到前端開發的同學都偏愛這樣的寫法,事實上,這也許是由於對Javascript中一個重要概念有所誤解造成的——變量作用域。不同於C和Java,Javascript並不具備真正的區塊級作用域,也就是說,在第一個循環結束之後,console.log(i)並不會列印undefined或拋出ReferenceError異常,而是會正常印出arr.length。
當然,這樣的寫法雖然除了美觀以外意義不大,但是長久以來兼容性良好且沒有違反任何規範——ecma標準中並沒有禁止在某一個作用域內對於同一變量的重複聲明。

習慣3:在函數頂端和其他變數一起集中定義

function loop(arr) { 
 var var1; 
 var var2; 
 var i; 
 
 for (i = 0; i < arr.length; i++) { 
  // do something 
 } 
} 
登入後複製

這種c89-like式的變數定義方式在Javascript中幾乎無可挑剔,既不會造成Javascript支援區塊級作用域的誤解,又不會污染全域scope,還不違反任何標準和規範,主要缺點就是循環變數的宣告和循環體可能會隔開比較遠。在不借助更多程式碼的前提下,除了等待各大主流瀏覽器廠商實現ECMAScript 6中的let關鍵字以外,這個問題似乎找不到更好的解決方案。

習慣4:將循環程式碼封裝到IIFE

function loop(arr) { 
 (function () { 
  for (var i = 0; i < arr.length; i++) { 
   // do something 
  } 
 })(); 
} 
登入後複製

最後一種習慣是前端程式設計師熟悉的IIFE(Immediately-Invoked Function Expression),即立即執行函數。此種方法的主要缺點是書寫相對麻煩,且有多餘的效能損耗(很小),但在相容性、對各標準規範的遵循上表現良好。 如果不嫌麻煩,開發者可以採取這種方式。

以上就是對Javascript中四種常見循環變數定義書寫習慣的簡單介紹與分析,各有利弊,讀者可以結合自己的需求擇優使用。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!