一、簡(jiǎn)化代碼
采用更為簡(jiǎn)短的寫(xiě)法,不僅可以減少輸入的字符數(shù),還可以減少文件大小。大部分采用簡(jiǎn)單寫(xiě)法的代碼,執(zhí)行效率都有輕微提高。
1.1 簡(jiǎn)化常用對(duì)象定義:使用 var obj = {}; 代替 var obj = new Object();
使用 var arr = []; 代替 var arr = new Array();
1.2 精簡(jiǎn)if語(yǔ)句三元操作符可以有效精簡(jiǎn)只涉及賦值傳值操作的if語(yǔ)句,比如
var score = 60, grade;
if (score < 60) {
grade = “不及格”;
} else {
grade = “及格”;
}
可以精簡(jiǎn)為:
var score = 60;
var grade = score < 60 ? “不及格” : “及格”;
三元操作符也支持嵌套,但是嵌套的層次太多會(huì)影響程序的可讀性,這方面要多加斟酌。
1.3 使用JSONJSON是一種輕量級(jí)的數(shù)據(jù)格式,輕量級(jí)首先體現(xiàn)在它的結(jié)構(gòu)定義非常簡(jiǎn)單。
var obj = {};
obj.p1 = ‘a’;
obj.p2 = ‘b’;
obj.p3 = ‘c’;
可精簡(jiǎn)為:
var obj = {
p1 : ‘a’,
p2 : ‘b’,
p3 : ‘c’
};
二、使用高效率的代碼
網(wǎng)上流傳的效率優(yōu)化文章非常多,一些比較專(zhuān)業(yè)的javascript書(shū)籍也談到了不少,因此,這里就只列出一些很少談到的。
2.1 精簡(jiǎn)循環(huán)體循環(huán)的效率很大程度上是由循環(huán)體決定的,與之相比,用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);
}
}
}
循環(huán)每執(zhí)行一次,都會(huì)判斷window對(duì)象的attachEvent或addEventListener是否存在,其實(shí)這個(gè)僅判斷一次也就夠了;此外,“”on” + eventName”的字符串拼接也會(huì)重復(fù)執(zhí)行。優(yōu)化如下:
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 盡量使用原生的函數(shù)而不是自定義函數(shù)當(dāng)你對(duì)javascript的內(nèi)置類(lèi)型變量執(zhí)行某項(xiàng)操作時(shí),你應(yīng)該先查查這項(xiàng)操作是否有原生的方法。
要生成一個(gè)數(shù)組的副本,你會(huì)怎么做呢?遍歷數(shù)組元素然后逐個(gè)賦值到另一個(gè)數(shù)組,這似乎是唯一的方法。其實(shí),原生的Array.prototype.slice就可以達(dá)到復(fù)制的目的。這個(gè)方法可以從某個(gè)數(shù)組返回選定的元素,且不影響原來(lái)的數(shù)組。如果參數(shù)留空,返回的就是全部元素。
Array.prototype.slice還可以對(duì)某些不是數(shù)組而又能通過(guò)數(shù)字索引訪問(wèn)的類(lèi)型進(jìn)行操作,比如arguments:
arguments:
function test() {
alert(Array.prototype.slice.call(arguments));
}
test(1, 2, 3); // output “1,2,3″
在Firefox下,它甚至可以對(duì)HtmlCollection進(jìn)行操作。可惜在IE下不行。
另一個(gè)例子是數(shù)組排序,一般情況下,我們不需要另外寫(xiě)排序算法,用原生的Array.prototype.sort就夠了。sort方法只有一個(gè)參數(shù),該參數(shù)是一個(gè)函數(shù),決定兩個(gè)相比較的元素誰(shuí)在前誰(shuí)在后,默認(rèn)是按照字符順序排序,比如11會(huì)排在2之前。要按數(shù)字大小排序,可以這樣寫(xiě):
var arr = [11, 2, 0, 12, 33];
arr.sort(
function(a, b) {
return a - b;
}
);
也可以按照對(duì)象的某個(gè)屬性進(jìn)行排序:
var arr = [
{ id : 11 },
{ id : 0 },
{ id : 22 }
];
arr.sort(
function(a, b) {
return a.id - b.id;
}
);
2.3 數(shù)組去重復(fù)Array類(lèi)型并沒(méi)有提供去重復(fù)的方法,如果要把數(shù)組的重復(fù)元素干掉,那得自己想辦法:
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;
}
總體思路是把數(shù)組元素逐個(gè)搬運(yùn)到另一個(gè)數(shù)組,搬運(yùn)的過(guò)程中檢查這個(gè)元素是否有重復(fù),如果有就直接丟掉。從嵌套循環(huán)就可以看出,這種方法效率極低。我們可以用一個(gè)hashtable的結(jié)構(gòu)記錄已有的元素,這樣就可以避免內(nèi)層循環(huán)。恰好,在javascript中實(shí)現(xiàn)hashtable是極為簡(jiǎn)單的,改進(jìn)如下:
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;
}