欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅析四种常见的Javascript声明循环变量的书写方式

程序员文章站 2022-08-02 12:09:21
javascript中的循环变量声明,到底应该放在哪儿? 习惯1:不声明直接使用 function loop(arr) { for (i = 0; i...

javascript中的循环变量声明,到底应该放在哪儿?

浅析四种常见的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 must not evaluate to an unresolvable reference. if it does a referenceerror exception 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中四种常见循环变量定义书写习惯的简单介绍和分析,各有利弊,读者可以结合自己的需求择优使用。