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

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

　　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); //淺克隆

　　（譯註：這裡的引數 0 也可以省略，我估計 undefined 被 slice 方法自動轉換為 0 了吧。）

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

　　3. Array.prototype.sort 方法

　　陣列的 sort 方法 遠遠沒有被充分利用，而且可能比開發者們想像的更加強大。很多開發者可能覺得 sort 方法可以用來做這種事情：

[1, 3, 9, 2].sort();
    // Returns: [1, 2, 3, 9]
    // 返回 [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 中的各種小細節，失之毫厘謬以千里啊！