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

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

 

有一些常见的方法可以让你的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)。所以,以上的缩写并不是最佳最好,必须遵循的,需要根据实际情况以及自身的喜好理解合理使用。

(本篇完)

分享到:


发表评论(目前6 条评论)

  1. 烟雨蒙蒙陆振华说道:

    for(var i = 0; i++; i < = length) {

    判断条件不应该在中间吗?

  2. 静寂无闻之夜说道:

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

  3. stone说道:

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

  4. riophae说道:

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

  5. 小默说道:

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