Javascript 代碼也可以變得優美的實現方法
2024-05-06 14:15:05
供稿：網友
一、簡化代碼
采用更為簡短的寫法，不僅可以減少輸入的字符數，還可以減少文件大小。大部分采用簡單寫法的代碼，執行效率都有輕微提高。
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還可以對某些不是數組而又能通過數字索引訪問的類型進行操作，比如 代碼如下:
