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

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

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

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

// 踩到坑了 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" // 符合預期 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")); // 獲得一個由 div 元素組成的「真正的」數組 var argsArr = Array.prototype.slice.call(arguments); // 把 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(); // 返回 [1, 2, 3, 9]

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

[ { name: "Robin Van PurseStrings", age: 30 }, { name: "Theo Walcott", age: 24 }, { name: "Bacary Sagna", age: 28 } ].sort(function(obj1, obj2) { // 實現增序排列：前者的 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` 仍然是 [1, 2, 3] // 正確的方法是保持引用 myArray.length = 0; // `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) { // 在這裏乾點事情 }

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

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

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

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

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

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

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

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

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

                                        ---摘自《知乎》（做者：CSS魔法)