浅析四种常见的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中四种常见循环变量定义书写习惯的简单介绍和分析,各有利弊,读者可以结合自己的需求择优使用。

(0)

相关推荐

  • 深入理解javascript变量声明

    相对于C/C++来说,ECMAScript里的for循环并不能创建一个局部的上下文. 复制代码 代码如下: for (var k in {a: 1, b: 2}) {   alert(k); } alert(k); // 尽管循环已经结束但变量k依然在当前作用域 任何时候,变量只能通过使用var关键字才能声明.   上面的赋值语句:   a = 10; 这仅仅是给全局对象创建了一个新属性(但它不是变量)."不是变量"并不是说它不能被改变,而是指它不符合ECMAScript规范中的变量概

  • 关于JavaScript中var声明变量作用域的推断

    一.迷思!由一段代码引发的疑惑 请看如下代码: 复制代码 代码如下: for(var i=0;i<3;i++) { console.log(j+","+k); for(var j=0;j<3;j++) { var k = j+1; } } console.log(i); 输出结果: undefined,undefined 3,3 3,3 3 如果你是搞c.java等语言的,可能你会不解,为何j.k这种局部变量可以被作用域外的代码访问呢? 如果JavaScript中用var声

  • JavaScript 变量、作用域及内存

    JS变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已; 由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变; 一 变量及作用域 1.基本类型和引用类型 // JS变量包含两种不同的数据类型的值:基本类型值和引用类型值; // 1.基本类型值:保存在栈内存中的简单数据段;即这种值完全保存在内存中的一个位置; // 基本类型值包含:Undefined|Null|Boolean|Number|String; // 这

  • JavaScript判断变量是否为空的自定义函数分享

    JavaScript本身没有判断一个变量是不是空值的函数,因为变量有可能是string,object,number,boolean等类型,类型不同,判断方法也不同.所以在文章中写了一个函数,用以判断JS变量是否空值,如果是undefined, null, '', NaN,false,0,[],{} ,空白字符串,都返回true,否则返回false 复制代码 代码如下: function isEmpty(v) {     switch (typeof v) {     case 'undefine

  • 基于JavaScript 声明全局变量的三种方式详解

    JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量.该方式即为显式声明详细如下: <script> var test = 5;//全局变量 function a(){ var a = 3;//局部变量 alert(a); } function b(){ alert(test); } //a();//调用a方法,那么方法里面的内容才会执行 //b(

  • javascript中局部变量和全局变量的区别详解

    javascript有两种变量:局部变量和全局变量.当然,我们这篇文章是帮助大家真正的区别这两种变量. 首先,局部变量是指只能在本变量声明的函数内部调用.全局变量时整个代码中都可以调用的变量.当然,单单从字面上理解肯定是不清楚的,下面我详细的介绍下: 大家都知道,变量是需要用var关键字声明的.但是javascript中也可以隐式的使用变量,就是不用声明,直接使用.而且,千万注意,javascript把隐式声明的变量总是当成全局变量来使用的. 例如: 复制代码 代码如下: function my

  • JavaScript声明变量时为什么要加var关键字

    在JavaScript中,var用来声明变量,但是这个语法并不严格要求,很多时修改,我们可以直接使用一个变量而不用var声明它. 复制代码 代码如下: var x = "XX"; y ="xxx"; 诸如此类.这有一个问题,比如说在代码中的某一行,我想使用的一个已声明的变量x,结果由于打字或者拼写错误,这个变量被写成y了,结果相当于"隐式"声明了一个变量y,在实际编程过程中,这种错误有时比较难以发现. 当你在当前上下文内进行这种"隐式&

  • javascript定义变量时带var与不带var的区别分析

    本文实例分析了javascript定义变量时带var与不带var的区别.分享给大家供大家参考.具体分析如下: 直接看实例里说明: 复制代码 代码如下: <script language="javascript" type="text/javascript"> var abc=89;//带var,表示全局变量 function test(){  var abc=80;//在函数内部,如果不带var,表示使用函数外全局变量:带上var,表示新定义一个全局变量

  • javascript循环变量注册dom事件 之强大的闭包

    今天遇到了这个问题: 复制代码 代码如下: //伪代码 for (var i=0; i<n; i++) { addEvent(obj[i], "click", func(i)); } 结果出现了问题,所有的dom都被注册了 i=n 的时候的事件,查了一些资料,说是在循环过程过this被改变,注册过的事件也被随之改变,找到了一种解决方法; 复制代码 代码如下: for (var i=0; i<n; i++) { (function (i){addEvent(obj[i], &

  • var与Javascript变量隐式声明

    var x = "XX"; y ="xxx"; 诸如此类.这有一个问题,比如说在代码中的某一行,我想使用的一个已声明的变量x,结果由于打字或者拼写错误,这个变量被写成y了,结果相当于"隐式"声明了一个变量y,在实际编程过程中,这种错误有时比较难以发现. 除此之外,今天通过同事介绍,了解到这种"隐式声明"中的别外一个问题. 当你在当前上下文内进行这种"隐式"声明时,JavaScript引擎会先在当前上下文中寻

  • javascript定义变量时加var与不加var的区别

    一.外部的为全局,内部的为局部变量. 二.加var为局部变量(在方法内),不加var为全局变量(当方法内有一次使用后) 复制代码 代码如下: <script type="text/javascript"> var golbe="global"; test(); function test(){      var local="local";     document.write(golbe);     document.write(l

  • JavaScript声明变量名的语法规则

    一.语法规则 1.变量必须使用字母.下划线(_)或者美元符($)开始. 2.然后可以使用任意多个英文字母.数字.下划线(_)或者美元符($)组成. 3.不能使用JS关键词与保留字. 二.示例 var score; score="100"; 三.注意 1.JS区分大小写.如变量score与Score是不一样的,相当两个变量. 2.变量虽然可以不声明,直接使用,但不规范,会涉及变量名提升等问题. 以上所述就是本文的全部内容了,希望大家能够喜欢.

  • 一个JavaScript变量声明的知识点

    上周四吃完午饭,leader发了一道JavaScript的题目给我们做,我们Team里面有做前端的,有做后台的,也有坐mobile web的,所以大家对题目的理解各自都不一样,然后在QQ讨论组里面进行讨论.发现虽然很基础,但是通过讨论收获不少,分享出来.当然在有开发经验的开发者看来,这些都是学习JavaScript最基础的东西.因为平时都是用jQuery或者第三JS组件,所以对JavaScript基础学习不够重视.题目如下,问题是:2次alert分别输出什么结果? 复制代码 代码如下: <scr

  • JavaScript变量声明详解

    定义在函数体外的都属于全局变量,定义在函数体内的属于局部变量.这里的定义是指通过var声明的. JavaScript有隐含的全局概念,意味着你不声明的任何变量都会成为一个全局对象属性.例如: 复制代码 代码如下: function test(){     myname = "huming";     alert(myname); } test(); // "huming" alert(myname); //"huming" 两个结果是一样的,说明

  • Javascript var变量隐式声明方法

    诸如此类.这有一个问题,比如说在代码中的某一行,我想使用的一个已声明的变量x,结果由于打字或者拼写错误,这个变量被写成y了,结果相当于"隐式"声明了一个变量y,在实际编程过程中,这种错误有时比较难以发现. 除此之外,今天通过同事介绍,了解到这种"隐式声明"中的别外一个问题. 当你在当前上下文内进行这种"隐式"声明时,JavaScript引擎会先在当前上下文中寻找是否之前有声明此变量,如果没有,再到上一级的上下文中去寻找,如果一直未找到,会最后在w

  • javascript判断变量是否有值的方法

    本文实例讲述了javascript判断变量是否有值的方法.分享给大家供大家参考.具体分析如下: 例如: var a = null; var b = undefined; 以上这两种情况算作没有值 if(a !== null && a !== undefined) { // } // 为什么不能单用if(a !== null) { // } var a; a !== null; // true // 为什么不能单用if(a !== undefined) { // } var a = null

随机推荐