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

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

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

// 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 初學者們顯然還沒有意識到它的全部潛力。（web前端學習交流群：291851189 ）

3. Array.prototype.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 屬性來截斷數組 

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

　　坑裡的人們終于明白，原來傳對象隻是在傳引用。是以當我把 myArray 重新指派為 [] 時，确實會建立出一個新的空數組，但其它對老數組的引用仍然沒變！大坑啊！還是換用截斷的方法吧，少年。

如果你想學習前端可以來這個群，首先是291，中間是851，最後是189，裡面可以學習和交流，也有資料可以下載下傳

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 中的各種小細節，失之毫厘謬以千裡啊！