代码精简 – 常见JavaScript代码缩写举例

这篇文章发布于 2010年05月31日，星期一，23:25，归类于 JS相关。 阅读 39906 次, 今日 3 次 6 条评论

 

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=846

有一些常见的方法可以让你的JavaScript代码节约一些字节，同时提高可读性。

变量递增/递减/乘/除

如果你想递增或递减一个变量，类似下面：

growCount = growCount + 1;
shrinkCount = shrinkCount - 1;

可以以下面的方式书写：

growCount ++;
shrinkCount - -;

加减乘除等都可以以这种方式书写：

growCout += 100;
shrinkCount -= 2;

moreSweets *= 5; // multiply moreSweets by 5
lessApple /= 2; // divide lessApple by 2

三元操作符

想非此即彼的if判断语句，可以使用三元运算符：

例如，如下代码

if(myAge > legalAge) {
    canDrink = true;
} else {
    canDrink = false;
}

可以以下面方式书写：

var canDrink = (myAge > legalAge) ? true : false;

组合数组符号

我们可能会见到类似下面的写法，即先创建一个数组，然后依次添加一些命名元素：

var skillSet = new Array();
skillSet['Document language'] = 'HTML5';
skillSet['Styling language'] = 'CSS3';
skillSet['Javascript library'] = 'jQuery';
skillSet['Other'] = 'Usability and accessibility';

一个更快、可读性更好的写法是使用对象字面量实现类似的表意（当然，其中有一些差异）：

var skillSet = {
    'Document language' : 'HTML5',
    'Styling language' : 'CSS3',
    'Javascript library' : 'jQuery',
    'Other' : 'Usability and accessibility'
}

注意最后一个变量末尾没有逗号，否则IE浏览器下会报“缺少标识符”的错误。

默认值的分配

见如下代码的变量定义：

function displayValues(limit) {
    var length;
    if(limit) {
        length = limit;
    } else {
        length = 10;
    }
    for(var i = 0; i++; i < = length) {
        ...
}

使用了一个if语句进行判断，其实，我们可以很简单的实现：

function displayValues(limit) {
    var length = limit || 10;
    for(var i = 0; i++; i < = length) {
        ...
}

最后的唠叨

万物都是辩证的，具有两面性。可能我们节约的一点代码的大小，但是可能影响了代码的性能，或是代码的美观。例如a++不如a+=1来的整洁（参见《JavaScript语言精粹》p112）。所以，以上的缩写并不是最佳最好，必须遵循的，需要根据实际情况以及自身的喜好理解合理使用。

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=846

（本篇完）

相关文章
«上一篇
下一篇»
分享到：
标签： , ,


发表评论（目前6 条评论）

  1. 烟雨蒙蒙陆振华说道：
    2018年07月12日 21:29

    for(var i = 0; i++; i < = length) {
    …
    判断条件不应该在中间吗？

    回复
  2. 静寂无闻之夜说道：
    2013年10月31日 17:59

    最后一个if, 直接用length变量名应有不妥

    回复
  3. stone说道：
    2013年04月20日 19:56

    var canDrink = (myAge > legalAge) ? true : false;
    可以写为var canDrink = myAge > legalAge;

    回复
  4. riophae说道：
    2012年02月2日 17:03

    回楼上.　应该等于　var length = (limit) ? limit : 10.
    其中的括号其实可以省略.

    回复
  5. 小默说道：
    2010年08月7日 11:06

    var length = limit || 10;这句是写错了还是？没读懂~

    回复