JavaScript 開發者常常忽略或誤用的七個基礎知識點(轉)

JavaScript 自己能夠算是一門簡單的語言，但咱們也不斷用智慧和靈活的模式來改進它。昨天咱們將這些模式應用到了 JavaScript 框架中，今天這些框架又驅動了咱們的 Web 應用程序。不少新手開發者被各類強大的 JavaScript 框架吸引進來，但他們卻忽略了框架身後浩如星海的 JavaScript 實用技巧。本文將爲你呈獻其中7個基礎知識點。

　　1. 在 String.prototype.replace 方法中使用 /g 和 /i 標誌位

　　令不少 JavaScript 初學者意外的是，字符串的 replace 方法並不會 替換全部匹配的子串——而僅僅替換第一次匹配。固然 JavaScript 老手們都知道這裏可使用正則表達式，而且須要加上一個全局標誌位（/g）：

    // Mistake  
    // 踩到坑了  
    var str = "David is an Arsenal fan, which means David is great";  
    str.replace("David", "Darren"); // "Darren is an Arsenal fan, which means David is great"  
    // Desired  
    // 符合預期  
    str.replace(/David/g, "Darren"); // "Darren is an Arsenal fan, which means Darren is great"  

　　另外一個基本的邏輯錯誤就是在大小寫不敏感的校驗場合（字母可大寫可小寫）沒有忽略大小寫，此時 /i 標誌位就很實用：

str.replace(/david/gi, "Darren"); // "Darren will always be an Arsenal fan, which means Darren will always be great"

　　（譯註：上面這段例程我沒有看懂用意，多是註釋有誤吧……）
　　每一個 JavaScript 開發者都曾踩過這兩個標誌位的坑——所以別忘了在適當的時候用上它們！

　　2. 類數組對象和 Array.prototype.slice 方法

　　數組的 slice 方法一般用來從一個數組中抽取片段。但不少開發者不瞭解的是，這個方法還能夠用來將「類數組」元素（好比 arguments 參數列表、節點列表和屬性列表）轉換成真正的數組：（譯註：DOM 元素的屬性列表經過 attributes 屬性獲取，好比 document.body.attributes。）

    var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div"));  
    // "true" array of DIVs  
    // 獲得一個由 div 元素組成的「真正的」數組  
    var argsArr = Array.prototype.slice.call(arguments);  
    // changes arguments to "true" array  
    // 把 arguments 轉換成一個「真正的」數組  
    你還可使用一次簡單的 slice 調用來克隆一個數組：  
    var clone = myArray.slice(0); // naive clone  
                                  // 淺克隆  

　　（譯註：這裏的參數 0 也能夠省略，我估計 undefined 被 slice 方法自動轉換爲 0 了吧。）

　　Array.prototype.slice 絕對是 JavaScript 世界中的一玫珍寶，但 JavaScript 初學者們顯然尚未意識到它的所有潛力。

　　3. Array.prototype.sort 方法

　　數組的 sort 方法 遠遠沒有被充分利用，並且可能比開發者們想像的更增強大。不少開發者可能以爲 sort 方法能夠用來作這種事情：

    [1, 3, 9, 2].sort();
    // 返回 [1, 2, 3, 9]  

　　……這沒錯，但它還有更強大的用法，好比這樣：

    [  
        { name: "Robin Van PurseStrings", age: 30 },  
        { name: "Theo Walcott", age: 24 },  
        { name: "Bacary Sagna", age: 28  }  
    ].sort(function(obj1, obj2) {  
        // Ascending: first age less than the previous  
        // 實現增序排列：前者的 age 小於後者  
        return obj1.age - obj2.age;  
    });  
        // Returns:    
        // [  
        //    { name: "Theo Walcott", age: 24 },  
        //    { name: "Bacary Sagna", age: 28  },  
        //    { name: "Robin Van PurseStrings", age: 30 }  
    // ]  

　　你不只能夠對簡單類型的數組項進行排序，能夠經過屬性來排序對象。若是哪天服務器端發來一段 JSON 數據，並且其中的對象須要排序，你可別忘了這一招！

　　4. 用 length 屬性來截斷數組

　　幾乎全部開發者都踩過 JavaScript 的這個坑——「傳對象只是傳引用」。開發者們常常會試圖 把一個數組清空，但實際上卻錯誤地建立了一個新數組。

    var myArray = yourArray = [1, 2, 3];  
    // :(  
    // 囧  
    myArray = []; // `yourArray` is still [1, 2, 3]  
                  // `yourArray` 仍然是 [1, 2, 3]  
    // The right way, keeping reference  
    // 正確的方法是保持引用  
    myArray.length = 0; // `yourArray` and `myArray` both [ ]  
                        // `yourArray` 和 `myArray`（以及其它全部對這個數組的引用）都變成 [ ] 了  

　　坑裏的人們終於明白，原來傳對象只是在傳引用。所以當我把 myArray 從新賦值爲 [] 時，確實會建立出一個新的空數組，但其它對老數組的引用仍然沒變！大坑啊！仍是換用截斷的方法吧，少年。

　　5. 使用 push 來合併數組

　　在上面的第 2 節裏，我展現了數組的 slice 和 apply 方法所能組合出的幾個小妙招，因此對於數組方法的其它技巧，你應該已經作好心理準備了吧。此次咱們使用 push 方法來合併數組：

    var mergeTo = [4,5,6];  
    var mergeFrom = [7,8,9];        
    Array.prototype.push.apply(mergeTo, mergeFrom);        
    mergeTo; // is: [4, 5, 6, 7, 8, 9]  

　　這是一項鮮爲人知的小技巧，簡單的原生方法就能夠實現數組合並這樣的常見任務。（譯註：這個方法的巧妙以外不只在於 push 方法能夠接收多個參數，還涉及到 apply 方法的第二個參數的用法。）

　　6. 高效探測功能特性和對象屬性

　　不少時候開發者們會像下面這樣來探測瀏覽器的某個特性：

    if(navigator.geolocation) {  
        // Do some stuff  
        // 在這裏乾點事情  
    }  

　　固然這能夠正常工做，但它並不必定有很好的效率。由於這個對象探測方法會在瀏覽器中初始化資源。在過去，上面的代碼片段可能會在某些瀏覽器下致使內存泄露。更好、更快的方法是檢查對象是否包含某個鍵名：

    if("geolocation" in navigator) {  
        // Do some stuff  
        // 在這裏乾點事情  
    }  

　　鍵名檢查十分簡單，並且能夠避免內存泄露。另外請注意，若是這個屬性的值是假值，那麼前一種探測方式將會獲得「否」的結果，並不能真正探測出這個鍵名是否存在。

　　7. 事件對象的 preventDefault 和 stopPropagation 方法

　　不少時候，當一個動做元素（好比連接）被點擊時，會觸發某個功能。顯然咱們並不但願點擊連接時瀏覽器順着這個連接跳轉，因而咱們會習慣性地使用 JavaScript 類庫的 Event.stop 方法：

    $("a.trigger").on("click", function(e) {  
        e.stop();        
        // Do more stuff  
        // 在這裏乾點事情  
    });  

　　（譯註：不知道哪一個類庫有這個方法，估計其做用至關於 return false; 吧。語法看起來像 jQuery，但 jQuery 並無這個方法，並且 jQuery 是支持 e.preventDefault 和 e.stopPropagation 方法的。）

　　這個懶方法有一個問題，它不只阻止了瀏覽器的默認動做，同時也阻止了事件繼續冒泡。這意味着元素上綁定的其它事件監聽器將不會被觸發，由於它們根本就不知道有事件發生。此時不妨使用 preventDefault 吧！

　　JavaScript 老鳥們看到這篇文章可能會說「我早知道了」，但說不定何時，他們就會在某一點上栽跟頭。提醒你們留意 JavaScript 中的各類小細節，失之毫厘謬以千里啊！