提高JavaScript執行效率的23個實用技巧

2019-11-19 17:21:56

字體：大中小

來源：轉載

供稿：網友

本文向大家分享23種JavaScript提高執行效率的小技巧、最佳實踐等非常實用的內容。當然JavaScript的實用技巧不止這些，還有很多即好玩又能提高程序運行效率的技巧，以后我們會繼續分享給大家。

文中所提供的代碼片段都已經過最新版的Chrome 30測試，該瀏覽器使用V8 JavaScript引擎（V8 3.20.17.15）。

1.使用邏輯符號&&或者||進行條件判斷

var foo = 10; foo == 10 && doSomething(); // 如果 foo == 10 則執行 doSomething(); foo == 5 || doSomething(); // 如果 foo != 5 則執行doSomething();

“||”也可以用來設置函數參數的默認值

Function doSomething(arg1){  Arg1 = arg1 || 10; // 如果 arg1為設置那么 Arg1=10}

2.使用map()方法來遍歷數組

var squares = [1,2,3,4].map(function (val) {  return val * val; }); // 運行結果為 [1, 4, 9, 16]

3.舍入小數位數

var num =2.443242342; num = num.toFixed(4); // 保留四位小數位 2.4432

4.浮點數問題

0.1 + 0.2 === 0.3 // is false 9007199254740992 + 1 // = 9007199254740992 9007199254740992 + 2 // = 9007199254740994

0.1+0.2等于0.30000000000000004，為什么會發生這種情況？根據IEEE754標準，你需要知道的是所有JavaScript數字在64位二進制內的都表示浮點數。開發者可以使用toFixed()和toPrecision()方法來解決這個問題。

5.使用for-in loop檢查遍歷對象屬性

下面這段代碼主要是為了避免遍歷對象屬性。

for (var name in object) {  if (object.hasOwnProperty(name)) {   // 執行代碼 } }

6.逗號操作符

var a = 0; var b = ( a++, 99 ); console.log(a); // a 為 1 console.log(b); // b 為 99

7.計算或查詢緩存變量

在使用jQuery選擇器的情況下，開發者可以緩存DOM元素

var navright = document.querySelector('#right'); var navleft = document.querySelector('#left'); var navup = document.querySelector('#up'); var navdown = document.querySelector('#down');

8.在將參數傳遞到isFinite()之前進行驗證

isFinite(0/0) ; // false isFinite("foo"); // false isFinite("10"); // true isFinite(10); // true isFinite(undifined); // false isFinite(); // false isFinite(null); // true !!!

9.在數組中避免負向索引

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）序列化和反序列化

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構造函數被稱為腳本引擎，每次執行它們的時候都必須把源碼轉換成可執行的代碼，這是非常昂貴的操作。

var func1 = new Function(functionCode); var func2 = eval(functionCode);

12.避免使用with()方法

如果在全局區域里使用with()插入變量，那么，萬一有一個變量名字和它名字一樣，就很容易混淆和重寫。

13.避免在數組里使用for-in loop

而不是這樣用：

var sum = 0; for (var i in arrayNumbers) {  sum += arrayNumbers[i]; }

這樣會更好：

var sum = 0; for (var i = 0, len = arrayNumbers.length; i < len; i++) {  sum += arrayNumbers[i]; }

因為i和len是循環中的第一個語句，所以每次實例化都會執行一次，這樣執行起來就會比下面這個更快：

for (var i = 0; i < arrayNumbers.length; i++)

為什么？數組長度arraynNumbers在每次loop迭代時都會被重新計算。

14.不要向setTimeout()和setInterval()方法里傳遞字符串

如果在這兩個方法里傳遞字符串，那么字符串會像eval那樣重新計算，這樣速度就會變慢，而不是這樣使用：

setInterval('doSomethingPeriodically()', 1000); setTimeOut('doSomethingAfterFiveSeconds()', 5000);

相反，應該這樣用：

setInterval(doSomethingPeriodically, 1000); setTimeOut(doSomethingAfterFiveSeconds, 5000);

15.使用switch/case語句代替較長的if/else語句

如果有超過2個以上的case，那么使用switch/case速度會快很多，而且代碼看起來更加優雅。

16.遇到數值范圍時，可以選用switch/casne

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); // 返回 "Baby"

17.創建一個對象，該對象的屬性是一個給定的對象

可以編寫一個這樣的函數，創建一個對象，該對象屬性是一個給定的對象，好比這樣：

function clone(object) {  function OneShotConstructor(){};  OneShotConstructor.prototype= object;  return new OneShotConstructor(); } clone(Array).prototype ; // []

18.一個HTML escaper函數

function escapeHTML(text) {  var replacements= {"<": "<", ">": ">","&": "&", "/"": """};       return text.replace(/[<>&"]/g, function(character) {   return replacements[character];  }); }

19.在一個loop里避免使用try-catch-finally

try-catch-finally在當前范圍里運行時會創建一個新的變量，在執行catch時，捕獲異常對象會賦值給變量。
不要這樣使用：

var object = ['foo', 'bar'], i; for (i = 0, len = object.length; i <len; i++) {  try {   // 執行代碼，如果出錯將被捕獲 }  catch (e) {    // 獲取錯誤，并執行代碼 } }

應該這樣使用：

var object = ['foo', 'bar'], i; try {  for (i = 0, len = object.length; i <len; i++) {   // 執行代碼，如果出錯將被捕獲 } } catch (e) {   // 獲取錯誤，并執行代碼}

20.給XMLHttpRequests設置timeouts

如果一個XHR需要花費太長時間，你可以終止鏈接（例如網絡問題），通過給XHR使用setTimeout()解決。

var xhr = new XMLHttpRequest (); xhr.onreadystatechange = function () {  if (this.readyState == 4) {   clearTimeout(timeout);   // 執行代碼 } } var timeout = setTimeout( function () {  xhr.abort(); // call error callback }, 60*1000 /* 設置1分鐘后執行*/ ); xhr.open('GET', url, true);  xhr.send();

此外，通常你應該完全避免同步Ajax調用。

21.處理WebSocket超時

一般來說，當創建一個WebSocket鏈接時，服務器可能在閑置30秒后鏈接超時，在閑置一段時間后，防火墻也可能會鏈接超時。

為了解決這種超時問題，你可以定期地向服務器發送空信息，在代碼里添加兩個函數：一個函數用來保持鏈接一直是活的，另一個用來取消鏈接是活的，使用這種方法，你將控制超時問題。

添加一個timeID……

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.記住，最原始的操作要比函數調用快

對于簡單的任務，最好使用基本操作方式來實現，而不是使用函數調用實現。
例如