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

不放走任何一个细节。相信很多Javascript开发者都在声明循环变量时犹豫过var i到底应该放在哪里:放在不同的位置会对程序的运行产生怎样的影响?哪一种方式符合Javascript的语言规范?哪一种方式和ecma标准未来的发展方向匹配?本文将对四种常见的声明循环变量的书写方式进行简单的分析和比较。

习惯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标准中并没有禁止在某一个作用域内对于同一变量的重复声明。不仅如此,其实这里还有一个另外好消息,在ECMAScript 6中,一个新的,为支持真正的块级作用域而生的关键字出现了——let。这里放一个传送门,有兴趣的同学可以自行了解:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

习惯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中四种常见循环变量定义书写习惯的简单介绍和分析,各有利弊,读者可以结合自己的需求择优使用。应该说,在ECMAScript 6之前并没有一种定义循环变量的完美解决方案。好在ECMAScript标准委员会也及时发现了这个问题,让我们一起期待let关键字吧。

(全文完)

时间: 2024-12-13 00:45:29

Javascript中的循环变量声明,到底应该放在哪儿?的相关文章

【翻译】JavaScript中的作用域和声明提前

原文:http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html ===翻译开始=== 你知道下面的JavaScript脚本执行结果是什么吗? 1 var foo=1; 2 function bar(){ 3 if(!foo){ 4 var foo=10; 5 } 6 alert(foo); 7 } 8 bar(); 如果你对弹出的结果是"10"感到惊讶的话,那么下面这段脚本会让你晕头转向的: 1 var a=1

Javascript中的循环

Javascript中有两种循环的方法for循环和for-in循环 for循环主要用来循环数组,for-in循环应该用来遍历非数组对象.从技术上来说,for-in循环也可以用来遍历数组(JS中数组也是对象),但这样做并不是很好,当该数组被自定义函数扩大后,有可能导致逻辑上的错. for循环的常规写法 for(var i = 0; i < myarray.length; i++){ //对myarray[i]进行操作 } 在常规写法中,每次循环时都要重新访问计算数组的长度,将会导致代码运行速度下降

关于Javascript中通过var关键字声明变量和function关键字声明函数的笔记

一.概念 1.变量声明 在JavaScript中,变量一般通过var关键字(隐式声明,let关键字声明除外)进行声明,如下通过var关键字声明a,b,c三个变量(并给其中的a赋值): var a=1,b,c; //关键字显式声明变量a,b,c,并给a赋值console.log(a); //1 //由于b,c未定义变量类型,因此输出"undefined"console.log(b); //undefinedconsole.log(c); //undefined //如果变量未声明,则输出

JavaScript 中 for 循环

在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循环,是: for-of 下面我们就来看看这 4 种 for 循环. 简单 for 循环 下面先来看看大家最常见的一种写法: 1 2 3 4 const arr = [1, 2, 3]; for(let i = 0; i < arr.length; i++) {     console.log(arr

JavaScript基础Javascript中的循环

1.普通循环JavaScript中一般的循环写法是这样的: // sub-optimal loop for (var i = 0; i < myarray.length; i++) { // do something with myarray[i] } 这种写法的问题是,每循环一次,都需要从myarray对象中读取length属性,这对于JavaScript来说,可能会导致较大的性能问题.如果myarray是一些大型的对象,或是DOM对象更犹是如此,因为DOM对象的这些方法都是在执行时才进行查询

JavaScript中的各种变量提升(Hoisting)

首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确.因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升(Hoisting). JS 存在变量提升(Hoisting),这个的设计其实是低劣的,它允许变量不声明就可以访问,或声明在后使用在前.新手对于此则很迷惑,甚至许多使用JS多年老手也比较迷惑.但在 ES6 加入 let/const 后,变量Hoisting 就不存在了. 一. 变量未声明,直接使用 f

Javascript中函数及变量定义的提升

<html> <head> <title>函数提升</title> <script language="javascript" type="text/javascript"> //在全局对象中声明两个全局函数,反模式 function foo() { alert("global foo"); } function bar() { alert("global bar")

在Lambda表达式中使用循环变量

在C#5.0之前的版本中,如果在foreach循环中的lambda使用循环变量,那么你会发现一些意想不到的现象,例子如下: var integers = new List<int> { 1, 2, 3, 4 }; var actions = new List<Action>(); foreach (var integer in integers) { actions.Add(() => Console.WriteLine(integer)); } actions.ForEac

JavaScript中一个字符串变量突然变成了false的问题解析

为了方便调试,写了一个页面未登录时,调试模式下自动登录的功能,发现有一个变量我初始化给它赋值了一个字符串,但是在用的时候发现它变成了false,好神奇.后来仔细检查引用,发现是一个判断条件中少写了一个等号引起的.js代码如下:          var sSessionKey = "test_key";          if (sSessionKey = undefined || sSessionKey == null) {               console.error(&