01
2013
02

Javascript多变量声明的艺术

在我们写Javascript脚本的时候总避免不了多个变量同时声明的情况,看过一些相关Javascript性能优化书籍的同学也明白变量声明的对性能的一些影响。复习一下,Javascript如何声明变量能使执行的性能提到最高呢?

  1. 尽量将所有变量声明放到函数的开始位置。

  2. 用一个var同时声明多个变量,而少用多个var声明变量。

这两句话的意思是:

function a(){
    //推荐放这里
    var foo = 1, bar = 2;
    ...
    ...
    //不推荐放这里
    var foo = 1;
    foo++;
    var bar = 2;
    bar--
}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
//提高性能,推荐这么写
var foo = 1,
    bar = 2;
//不推荐
var foo = 1;
var bar = 2;

而这里我想分享的是,我对第二点写法的一种看法。因为这种写法在一些情况下会有一些不确定性。

//这样写美观高效
var foo = 1,
    bar = 2,
    baz = 3;
                       
                       
                                        
//问题来了,假如我们用的编辑器不一样,或许写的人少敲或多敲一个空格,或许你用的一些代码格式化工具的问题它就变成这样了
var foo = 1,
  bar = 2,
  baz = 3;
                       
                       
                                        
//或许是这样
var foo = 1,
bar = 2,
baz = 3;
                        
                       
                                       
//或许更糟的是这样
var foo = 1,
        bar = 2,
      baz = 3;
                         
                       
                       
//当然如果有注释的时候,你也许会出现下面的代码
                       
//foo的注释
var foo = 1,
    //bar的注释
    bar = 2,
    //baz的注释
    baz = 3;
                        
//这时候我们郁闷的,这些代码太难看了。我们还是需要这么写。更美观了。
//foo的注释
var foo = 1;
//bar的注释
var bar = 2;
//baz的注释
var baz = 3;

问题来了,很多不确定的因素使得我们原本性感整洁的代码变得如此不整齐,让我们看上去挺不舒服。这时候性能驱动为先的你继续选择为性能而抛弃代码的美观。于是又有问题出来了

//正确的写法
var foo = 1,
    bar = 2,
    baz = 3;
                                 
//少了个逗号,当代码压缩后就会出现错误
var foo = 1,
    bar = 2
    baz = 3;
                                 
//而如果这样写,在压缩的时候是不会有问题的
var foo = 1;
var bar = 2
var baz = 3;

到这里,我是否已经否认了这种逗号分隔写法?你是否还在认为这样写会有性能隐患? 好吧我们来看看下面建好的两个测试用例,这对多个var声明变量还是单个var声明变量的比较。看看到底有多少的性能消耗。

http://jsperf.com/mult-var-statement

http://jsperf.com/var-statement-between-comma/2


结果(多次测试结果后,会发现其实性能差异非常小)自己可以通过跑测试用例来获得,而最后我给出我的推荐写法。

//不带赋值的咱这么干
var foo, bar, baz;
//带赋值的,咱这么干
var abc = 1;
var def = 2;

是不是感觉美观多了,当然,定义变量还是放在函数的开始位置哦。

« 上一篇下一篇 »

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。