超實用的JavaScript技巧及最佳實踐（下）
來源：程序員人生 發布時間：2014-09-11 14:05:13 閱讀次數：3127次
在前段時間，CSDN研發頻道發表了超實用的JavaScript技巧及最佳實踐（上），很多開發者都覺得里面所提到的技巧非常實用，基于此，我們再向大家推薦超實用的JavaScript技巧及最佳實踐（下），希望對大家有所幫助。
文中所提供的代碼片段都已經過最新版的Chrome 30測試，該瀏覽器使用V8 JavaScript引擎（V8 3.20.17.15）。
1.使用邏輯符號&&或者||進行條件判斷
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_0.js">var foo = 10;
foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething();
foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();
||也可以用來設置函數參數的默認值
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_1.js">Function doSomething(arg1){
Arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
}
2.使用map()方法來遍歷數組
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_2.js">var squares = [1,2,3,4].map(function (val) {
return val * val;
});
// squares will be equal to [1, 4, 9, 16]
3.舍入小數位數
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_3.js">var num =2.443242342;
num = num.toFixed(4); // num will be equal to 2.4432
4.浮點數問題
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_4.js">0.1 + 0.2 === 0.3 // is false
9007199254740992 + 1 // is equal to 9007199254740992
9007199254740992 + 2 // is equal to 9007199254740994
0.1+0.2等于0.30000000000000004，為什么會發生這種情況？根據IEEE754標準，你需要知道的是所有JavaScript數字在64位二進制內的都表示浮點數。開發者可以使用toFixed()和toPrecision()方法來解決這個問題。
5.使用for-in loop檢查遍歷對象屬性
下面這段代碼主要是為了避免遍歷對象屬性。
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_5.js">for (var name in object) {
if (object.hasOwnProperty(name)) {
// do something with name
}
}
6.逗號操作符
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_6.js">var a = 0;
var b = ( a++, 99 );
console.log(a); // a will be equal to 1
console.log(b); // b is equal to 99
7.計算或查詢緩存變量
在使用jQuery選擇器的情況下，開發者可以緩存DOM元素
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_7.js">var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');
8.在將參數傳遞到isFinite()之前進行驗證
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_8.js">isFinite(0/0) ; // false
isFinite("foo"); // false
isFinite("10"); // true
isFinite(10); // true
isFinite(undifined); // false
isFinite(); // false
isFinite(null); // true !!!
9.在數組中避免負向索引
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_9.js">var numbersArray = [1,2,3,4,5];
var from = numbersArray.indexOf("foo") ; // from is equal to -1
numbersArray.splice(from,2); // will return [5]
確保參數傳遞到indexOf()方法里是非負向的。
10.（使用JSON）序列化和反序列化
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_10.js">var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString is equal to person object */
11.避免使用eval()或Function構造函數
eval()和Function構造函數被稱為腳本引擎，每次執行它們的時候都必須把源碼轉換成可執行的代碼，這是非常昂貴的操作。
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_11.js">var func1 = new Function(functionCode);
var func2 = eval(functionCode);
12.避免使用with()方法
如果在全局區域里使用with()插入變量，那么，萬一有一個變量名字和它名字一樣，就很容易混淆和重寫。
13.避免在數組里使用for-in loop
而不是這樣用：
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_12.js">var sum = 0;
for (var i in arrayNumbers) {
sum += arrayNumbers[i];
}
這樣會更好：
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_13.js">var sum = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
sum += arrayNumbers[i];
}
因為i和len是循環中的第一個語句，所以每次實例化都會執行一次，這樣執行起來就會比下面這個更快：
code_snippet_id="144011" snippet_file_name="ptcms_1388979502_14.js">for (var i = 0; i < arrayNumbers.length; i++)
為什么？數組長度arraynNumbers在每次loop迭代時都會被重新計算。
14.不要向setTimeout()和setInterval()方法里傳遞字符串
如果在這兩個方法里傳遞字符串，那么字符串會像eval那樣重新計算，這樣速度就會變慢，而不是這樣使用：
code_snippet_id="144011" snippet_file_name="ptcms_1388994601_15.js">setInterval('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000);
相反，應該這樣用：
code_snippet_id="144011" snippet_file_name="ptcms_1388994601_16.js">setInterval(doSomethingPeriodically, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);
15.使用switch/case語句代替較長的if/else語句
如果有超過2個以上的case，那么使用switch/case速度會快很多，而且代碼看起來更加優雅。
16.遇到數值范圍時，可以選用switch/casne
code_snippet_id="144011" snippet_file_name="ptcms_1388994601_17.js">function getCategory(age) {
var category = "";
switch (true) {
case isNaN(age):
category = "not an age";
break;
case (age >= 50):
category = "Old";
break;
case (age <= 20):
category = "Baby";
break;
default:
category = "Young";
break;
};
return category;
}
getCategory(5); // will return "Baby"
17.創建一個對象，該對象的屬性是一個給定的對象
可以編寫一個這樣的函數，創建一個對象，該對象屬性是一個給定的對象，好比這樣：
code_snippet_id="144011" snippet_file_name="ptcms_1388994601_18.js">function clone(object) {
function OneShotConstructor(){};
OneShotConstructor.prototype= object;
return new OneShotConstructor();
}
clone(Array).prototype ; // []
18.一個HTML escaper函數
code_snippet_id="144011" snippet_file_name="ptcms_1388996052_19.js">function escapeHTML(text) {
var replacements= {"<": "<", ">": ">","&": "&", """: """};
return text.replace(/[<>&"]/g, function(character) {
return replacements[character];
});
}
19.在一個loop里避免使用try-catch-finally
try-catch-finally在當前范圍里運行時會創建一個新的變量，在執行catch時，捕獲異常對象會賦值給變量。
不要這樣使用：
code_snippet_id="144011" snippet_file_name="ptcms_1388996052_20.js">var object = ['foo', 'bar'], i;
for (i = 0, len = object.length; i <len; i++) {
try {
// do something that throws an exception
}
catch (e) {
// handle exception
}
}
應該這樣使用：
code_snippet_id="144011" snippet_file_name="ptcms_1388996052_21.js">var object = ['foo', 'bar'], i;
try {
for (i = 0, len = object.length; i <len; i++) {
// do something that throws an exception
}
}
catch (e) {
// handle exception
}
20.給XMLHttpRequests設置timeouts
如果一個XHR需要花費太長時間，你可以終止鏈接（例如網絡問題），通過給XHR使用setTimeout()解決。
code_snippet_id="144011" snippet_file_name="ptcms_1388996052_22.js">var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
clearTimeout(timeout);
// do something with response data
}
}
var timeout = setTimeout( function () {
xhr.abort(); // call error callback
}, 60*1000 /* timeout after a minute */ );
xhr.open('GET', url, true);
xhr.send();
此外，通常你應該完全避免同步Ajax調用。
21.處理WebSocket超時
一般來說，當創建一個WebSocket鏈接時，服務器可能在閑置30秒后鏈接超時，在閑置一段時間后，防火墻也可能會鏈接超時。
為了解決這種超時問題，你可以定期地向服務器發送空信息，在代碼里添加兩個函數：一個函數用來保持鏈接一直是活的，另一個用來取消鏈接是活的，使用這種方法，你將控制超時問題。
添加一個timeID……
code_snippet_id="144011" snippet_file_name="ptcms_1388996052_23.js">var timerID = 0;
function keepAlive() {
var timeout = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout(keepAlive, timeout);
}
function cancelKeepAlive() {
if (timerId) {
cancelTimeout(timerId);
}
}
keepAlive()方法應該添加在WebSocket鏈接方法onOpen()的末端，cancelKeepAlive()方法放在onClose()方法下面。
22.記住，最原始的操作要比函數調用快
對于簡單的任務，最好使用基本操作方式來實現，而不是使用函數調用實現。
例如
code_snippet_id="144011" snippet_file_name="ptcms_1388996052_24.js">var min = Math.min(a,b);
A.push(v);
基本操作方式：
code_snippet_id="144011" snippet_file_name="ptcms_1388996052_25.js">var min = a < b ? a b;
A[A.length] = v;
23.編碼時注意代碼的美觀、可讀
JavaScript是一門非常好的語言，尤其對于前端工程師來說，JavaScript也非常重要，點擊
這里可以訪問更多優秀的JavaScript資源。
來自：
flippinawesome.org
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
