45個JavaScript小技巧

原文地址 http://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/

這篇文章的質量個人感覺一般（有些甚至有些無厘頭，比如第五點，構造函數的使用，直接被我去掉了）， 建議過一遍就好 。詳細的翻譯版本可以參考 JavaScript奇技淫巧45招

• 聲明變量時別忘記 var

• 相等比較請用 === 而不是 ==

• undefined 、 null 、0、 false 、 NaN 、 '' （空字符串）都是假值

• 行末加封號

• 小心使用 typeof 、 instanceof 以及 constructor
  • JavaScript原型鏈和instanceof運算符的曖昧關系

  <li> <a href="/misc/goto?guid=4959666985259463252" rel="nofollow,noindex" target="_blank">typeof和instanceof簡介及用法</a> </li>
  
  <li> <a href="/misc/goto?guid=4959666985333826674" rel="nofollow,noindex" target="_blank">javascript中prototype、constructor以及__proto__之間的三角關系</a> </li>
  
  

  </ul> </li>

  • IIFE。 參考 （譯）詳解javascript立即執行函數表達式（IIFE）

  • 獲取數組的任一元素

    var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
    var  randomItem = items[Math.floor(Math.random() * items.length)];

  • 獲取某一范圍內的任一數值

    var x = Math.floor(Math.random() * (max - min + 1)) + min;

  • 生成 0~max 的數組 （[0, 1, 2 ... max]）

    var a = [], max = 100;
    for (var i = 0; a.push(i++) <= max; );

  • 生成任意長度字符串（字符包括 a-z 0-9）

    function generateRandomAlphaNum(len) {
      var rdmString = "";
      for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
      return rdmString.substr(0, len);
    }

  • 數組亂序

    var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
    numbers = numbers.sort(function(){ return Math.random() - 0.5});

    有一個比 sort 更好的辦法（Fisher-Yates shuffle），具體可以參考 discuss

  • string trim

    String.prototype.trim = function(){return this.replace(/^s+|s+$/g, "");};

  • 在一個數組后附加一個數組

    var array1 = [12 , "foo" , {name "Joe"} , -2458];
    
    var array2 = ["Doe" , 555 , 100];
    Array.prototype.push.apply(array1, array2);
    /* array1 will be equal to  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

  • 把偽數組轉為數組

    var argArray = Array.prototype.slice.call(arguments);

  • 判斷數字

    function isNumber(n){
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

  • 判斷數組 see Javascript中判斷數組的正確姿勢

  • 獲取數組最值

    var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
    var maxInNumbers = Math.max.apply(Math, numbers); 
    var minInNumbers = Math.min.apply(Math, numbers);

  • 清空數組

    var myArray = [12 , 222 , 1000 ];  
    myArray.length = 0; // myArray will be equal to [].

  • 刪除數組元素請不要用 delete，而是用 splice

  • 截取數組

    var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];  
    myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

  • 短路運算符

  • 用 map() 遍歷元素

  • 小數保留（注意，toFixed 方法返回 string 值）

    var num =2.443242342;
    num = num.toFixed(4);  // num will be equal to 2.4432

  • 浮點數問題

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

    see 【0.1 + 0.2 = 0.30000000000000004】該怎樣理解？

  • 用 for-in 檢查對象屬性

    for (var name in object) {  
        if (object.hasOwnProperty(name)) { 
            // do something with name                    
        }  
    }

  • 逗號運算符

    var a = 0; 
    var b = ( a++, 99 ); 
    console.log(a);  // a will be equal to 1 
    console.log(b);  // b is equal to 99

  • 緩存數據（避免查詢相同 DOM 多次）

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

  • 使用 isFinite() 方法前先檢查參數

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

  • 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  */

  • 避免使用 eval() 和 Function() 構造函數 。為了避免雙重求值，see 高性能JavaScript 編程實踐

  • 避免使用 with

  • 避免用 for-in 遍歷數組元素

  • setInterval() setTimeout() 的參數請使用函數，而不是字符串。避免雙重求值，同上。

  • 使用 switch-case 而不是一長串的 if-else。這點有待考證，The Good Part 中說要盡量不使用 switch-case 語句。

  • HTML 實體編碼

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

  • 避免在循環中使用 try-catch-finally這樣寫是不好的：

    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  
        } 
    }

    應該這樣：

    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  
    } 

  • AJAX 設置請求超時（setTimeout 設置請求超時中止 AJAX）

    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();

  • WebSocket 設置超時

  • 盡量使用原生的 JavaScript。 Use VanillaJS

  • JSLint

  • JavaScript is awesome

  </ul> </div>