用javascript编写优美的代码

一、简化代码 

采用更为简短的写法，不仅可以减少输入的字符数，还可以减少文件大小。大部分采用简单写法的代码，执行效率都有轻微提高。 


1.1 简化常用对象定义：使用 var obj = {}; 代替 var obj = new Object(); 

使用 var arr = []; 代替 var arr = new Array(); 

1.2 精简if语句三元操作符可以有效精简只涉及赋值传值操作的if语句，比如 


var score = 60, grade; 
if (score < 60) { 
    grade = “不及格”; 
} else { 
    grade = “及格”; 
} 
可以精简为： 
var score = 60; 
var grade = score < 60 ? “不及格” : “及格”; 


三元操作符也支持嵌套，但是嵌套的层次太多会影响程序的可读性，这方面要多加斟酌。 

1.3 使用JSONJSON是一种轻量级的数据格式，轻量级首先体现在它的结构定义非常简单。 



var obj = {}; 
obj.p1 = ‘a’; 
obj.p2 = ‘b’; 
obj.p3 = ‘c’; 
可精简为： 
var obj = { 
    p1 : ‘a’, 
    p2 : ‘b’, 
    p3 : ‘c’ 
}; 



二、使用高效率的代码 
网上流传的效率优化文章非常多，一些比较专业的javascript书籍也谈到了不少，因此，这里就只列出一些很少谈到的。 


2.1 精简循环体循环的效率很大程度上是由循环体决定的，与之相比，用for还是while的差别就太小了。考虑如下的代码，其功能是为某一批元素添加事件： 


function addEvent(elems, eventName, handler) { 
    for (var i = 0, len = elems.length; i < len; i++) { 
        if (window.attachEvent) { 
            elems[i].attachEvent(”on” + eventName, handler); 
        } else if (window.addEventListener) { 
            elems[i].addEventListener(eventName, handler, false); 
        } 
    } 
} 

循环每执行一次，都会判断window对象的attachEvent或addEventListener是否存在，其实这个仅判断一次也就够了;此外，“”on” + eventName”的字符串拼接也会重复执行。优化如下： 



function addEvent(elems, eventName, handler) { 
    var i = -1, len = elems.length; 
    if (window.attachEvent) { 
        eventName = “on” + eventName; 
        while (++i < len) { 
            elems[i].attachEvent(eventName, handler); 
        } 
    } else if (window.addEventListener) { 
        while (++i < len) { 
            elems[i].addEventListener(eventName, handler, false); 
        } 
    } 
} 

2.2 尽量使用原生的函数而不是自定义函数当你对javascript的内置类型变量执行某项操作时，你应该先查查这项操作是否有原生的方法。 



要生成一个数组的副本，你会怎么做呢?遍历数组元素然后逐个赋值到另一个数组，这似乎是唯一的方法。其实，原生的Array.prototype.slice就可以达到复制的目的。这个方法可以从某个数组返回选定的元素，且不影响原来的数组。如果参数留空，返回的就是全部元素。 



Array.prototype.slice还可以对某些不是数组而又能通过数字索引访问的类型进行操作，比如arguments： 

arguments： 
function test() { 
    alert(Array.prototype.slice.call(arguments)); 
} 
test(1, 2, 3); // output “1,2,3″ 

在Firefox下，它甚至可以对HtmlCollection进行操作。可惜在IE下不行。 

另一个例子是数组排序，一般情况下，我们不需要另外写排序算法，用原生的Array.prototype.sort就够了。sort方法只有一个参数，该参数是一个函数，决定两个相比较的元素谁在前谁在后，默认是按照字符顺序排序，比如11会排在2之前。要按数字大小排序，可以这样写： 



var arr = [11, 2, 0, 12, 33]; 
arr.sort( 
    function(a, b) { 
        return a - b; 
    } 
); 
也可以按照对象的某个属性进行排序： 
var arr = [ 
    { id : 11 }, 
    { id : 0 }, 
    { id : 22 } 
]; 
arr.sort( 
    function(a, b) { 
        return a.id - b.id; 
    } 
); 

2.3 数组去重复Array类型并没有提供去重复的方法，如果要把数组的重复元素干掉，那得自己想办法： 



function unique(arr) { 
    var result = [], isRepeated; 
    for (var i = 0, len = arr.length; i < len; i++) { 
        isRepeated = false; 
        for (var j = 0, len = result.length; j < len; j++) { 
            if (arr[i] == result[j]) {   
                isRepeated = true; 
                break; 
            } 
        } 
        if (!isRepeated) { 
            result.push(arr[i]); 
        } 
    } 
    return result; 
} 

总体思路是把数组元素逐个搬运到另一个数组，搬运的过程中检查这个元素是否有重复，如果有就直接丢掉。从嵌套循环就可以看出，这种方法效率极低。我们可以用一个hashtable的结构记录已有的元素，这样就可以避免内层循环。恰好，在javascript中实现hashtable是极为简单的，改进如下： 

function unique(arr) { 
    var result = [], hash = {}; 
    for (var i = 0, elem; (elem = arr[i]) != null; i++) { 
        if (!hash[elem]) { 
            result.push(elem); 
            hash[elem] = true; 
        } 
    } 
    return result; 
}