JavaScript開發(fā)者新手經(jīng)常忽略或誤用的基礎(chǔ)知識(shí)點(diǎn)

時(shí)間：2022-05-29 16:33:01 | 來源：網(wǎng)絡(luò)營銷

時(shí)間：2022-05-29 16:33:01 來源：網(wǎng)絡(luò)營銷

首先要說明的是，咱現(xiàn)在不是高手，最多還是一個(gè)半桶水，算是入了JS的門，談不上是方法技巧，但都是一些教訓(xùn)。

這個(gè)時(shí)候有人要說，“靠，你丫半桶水，憑啥教我們”。您先別急著罵，先聽我說：你叫一個(gè)大學(xué)生去教小學(xué)數(shù)學(xué)，不見得比一個(gè)初中生教得好，因?yàn)榇髮W(xué)生早已經(jīng)過了那個(gè)階段，都忘記自己怎么走過來的了，而對(duì)于初中生，剛好走過那個(gè)階段，對(duì)自己怎么走過來的還記憶猶新，或者還有一些自己的總結(jié)。比如，很多高手覺得那本犀牛書入門很好，他們覺得太簡單了，但以我的經(jīng)驗(yàn)來看，它不是入門的最好選擇。

JavaScript本身可以算是一門簡單的語言，但我們也不斷用智慧和靈活的模式來改進(jìn)它，昨天我們將這些模式應(yīng)用到了JavaScript框架中，今天這些框架又驅(qū)動(dòng)了我們的Web應(yīng)用程序。

很多新手開發(fā)者被各種強(qiáng)大的JavaScript框架吸引進(jìn)來，但他們卻忽略了框架身后浩如星海的JavaScript實(shí)用技巧，在此，億企邦將為你呈獻(xiàn)其中7個(gè)JavaScript開發(fā)者新手經(jīng)常忽略或誤用的基礎(chǔ)知識(shí)點(diǎn)。

1、在 String.prototype.replace 方法中使用 /g 和 /i 標(biāo)志位

令很多 JavaScript 初學(xué)者意外的是，字符串的 replace 方法并不會(huì)替換所有匹配的子串——而僅僅替換第一次匹配。

當(dāng)然 JavaScript 老手們都知道這里可以使用正則表達(dá)式，并且需要加上一個(gè)全局標(biāo)志位（/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
// 符合預(yù)期
str.replace(/David/g, "Darren"); // "Darren is an Arsenal fan, which means Darren is great"

另一個(gè)基本的邏輯錯(cuò)誤就是在大小寫不敏感的校驗(yàn)場合（字母可大寫可小寫）沒有忽略大小寫，此時(shí) /i 標(biāo)志位就很實(shí)用：

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

每個(gè) JavaScript 開發(fā)者都曾踩過這兩個(gè)標(biāo)志位的坑——因此別忘了在適當(dāng)?shù)臅r(shí)候用上它們！

2、類數(shù)組對(duì)象和 Array.prototype.slice 方法

數(shù)組的 slice 方法通常用來從一個(gè)數(shù)組中抽取片斷，但很多開發(fā)者不了解的是，這個(gè)方法還可以用來將“類數(shù)組”元素（比如 arguments 參數(shù)列表、節(jié)點(diǎn)列表和屬性列表）轉(zhuǎn)換成真正的數(shù)組（注：DOM 元素的屬性列表通過 attributes 屬性獲取，比如 document.body.attributes。）

var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div"));
// "true" array of DIVs
// 得到一個(gè)由 div 元素組成的“真正的”數(shù)組
var argsArr = Array.prototype.slice.call(arguments);
// changes arguments to "true" array
// 把 arguments 轉(zhuǎn)換成一個(gè)“真正的”數(shù)組

你還可以使用一次簡單的 slice 調(diào)用來克隆一個(gè)數(shù)組：

var clone = myArray.slice(0); // naive clone
// 淺克隆

注：這里的參數(shù) 0 也可以省略，我估計(jì) undefined 被 slice 方法自動(dòng)轉(zhuǎn)換為 0 了吧。

Array.prototype.slice 絕對(duì)是 JavaScript 世界中的一玫珍寶，但 JavaScript 初學(xué)者們顯然還沒有意識(shí)到它的全部潛力（更多的技巧可查看億企邦《javascript對(duì)象屬性的基礎(chǔ)教程指南》的相關(guān)介紹）。

3、Array.prototype.sort 方法

數(shù)組的 sort 方法遠(yuǎn)遠(yuǎn)沒有被充分利用，而且可能比開發(fā)者們想像的更加強(qiáng)大，很多開發(fā)者可能覺得 sort 方法可以用來做這種事情：

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

……這沒錯(cuò)，但它還有更強(qiáng)大的用法，比如這樣：

[
{ 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
// 實(shí)現(xiàn)增序排列：前者的 age 小于后者
return obj1.age - obj2.age;
});
// Returns:
// [
// { name: "Theo Walcott", age: 24 },
// { name: "Bacary Sagna", age: 28 },
// { name: "Robin Van PurseStrings", age: 30 }
// ]

你不僅可以對(duì)簡單類型的數(shù)組項(xiàng)進(jìn)行排序，可以通過屬性來排序?qū)ο?，如果哪天服?wù)器端發(fā)來一段 JSON 數(shù)據(jù)，而且其中的對(duì)象需要排序，你可別忘了這一招！

4、用 length 屬性來截?cái)鄶?shù)組

幾乎所有開發(fā)者都踩過 JavaScript 的這個(gè)坑——“傳對(duì)象只是傳引用”，開發(fā)者們經(jīng)常會(huì)試圖把一個(gè)數(shù)組清空，但實(shí)際上卻錯(cuò)誤地創(chuàng)建了一個(gè)新數(shù)組。

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`（以及其它所有對(duì)這個(gè)數(shù)組的引用）都變成 [ ] 了

坑里的人們終于明白，原來傳對(duì)象只是在傳引用，因此當(dāng)我把 myArray 重新賦值為 [] 時(shí)，確實(shí)會(huì)創(chuàng)建出一個(gè)新的空數(shù)組，但其它對(duì)老數(shù)組的引用仍然沒變！大坑??！還是換用截?cái)嗟姆椒ò桑倌辏?br>
5、使用 push 來合并數(shù)組

在上面我展示了數(shù)組的 slice 和 apply 方法所能組合出的幾個(gè)小妙招，所以對(duì)于數(shù)組方法的其它技巧，你應(yīng)該已經(jīng)做好心理準(zhǔn)備了吧，這次我們使用 push 方法來合并數(shù)組：

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

這是一項(xiàng)不為人知的小技巧，簡單的原生方法就可以實(shí)現(xiàn)數(shù)組合并這樣的常見任務(wù)（注：這個(gè)方法的巧妙之外不僅在于 push 方法可以接收多個(gè)參數(shù)，還涉及到 apply 方法的第二個(gè)參數(shù)的用法。）

6、高效探測功能特性和對(duì)象屬性

很多時(shí)候開發(fā)者們會(huì)像下面這樣來探測瀏覽器的某個(gè)特性：

if(navigator.geolocation) {
// Do some stuff
// 在這里干點(diǎn)事情
}

當(dāng)然這可以正常工作，但它并不一定有很好的效率，因?yàn)檫@個(gè)對(duì)象探測方法會(huì)在瀏覽器中初始化資源，在過去，上面的代碼片斷可能會(huì)在某些瀏覽器下導(dǎo)致內(nèi)存泄露，更好、更快的方法是檢查對(duì)象是否包含某個(gè)鍵名：

if("geolocation" in navigator) {
// Do some stuff
// 在這里干點(diǎn)事情
}

鍵名檢查十分簡單，而且可以避免內(nèi)存泄露，另外億企邦請(qǐng)大家注意，如果這個(gè)屬性的值是假值，那么前一種探測方式將會(huì)得到“否”的結(jié)果，并不能真正探測出這個(gè)鍵名是否存在。

7、事件對(duì)象的 preventDefault 和 stopPropagation 方法

很多時(shí)候，當(dāng)一個(gè)動(dòng)作元素（比如鏈接）被點(diǎn)擊時(shí)，會(huì)觸發(fā)某個(gè)功能，顯然我們并不希望點(diǎn)擊鏈接時(shí)瀏覽器順著這個(gè)鏈接跳轉(zhuǎn)，于是我們會(huì)習(xí)慣性地使用 JavaScript 類庫的 Event.stop 方法：

$("a.trigger").on("click", function(e) {
e.stop();
// Do more stuff
// 在這里干點(diǎn)事情
});

注：不知道哪個(gè)類庫有這個(gè)方法，估計(jì)其作用相當(dāng)于 return false; 吧，語法看起來像 jQuery，但 jQuery 并沒有這個(gè)方法，而且 jQuery 是支持 e.preventDefault 和 e.stopPropagation 方法的。

這個(gè)懶方法有一個(gè)問題，它不僅阻止了瀏覽器的默認(rèn)動(dòng)作，同時(shí)也阻止了事件繼續(xù)冒泡，這意味著元素上綁定的其它事件監(jiān)聽器將不會(huì)被觸發(fā)，因?yàn)樗鼈兏揪筒恢烙惺录l(fā)生，此時(shí)不妨使用 preventDefault 吧！

看到上面的介紹，JavaScript 老鳥們看到這篇文章可能會(huì)說“我早知道了”，但說不定什么時(shí)候，他們就會(huì)在某一點(diǎn)上栽跟頭，提醒大家留意 JavaScript 中的各種小細(xì)節(jié)，失之毫厘謬以千里?。?br>
億企邦點(diǎn)評(píng)：

對(duì)于一些JavaScript初學(xué)者來說，億企邦建議你不要著急看一些復(fù)雜網(wǎng)頁效果的代碼，這樣除了打擊你自信心，什么也學(xué)不到，沒達(dá)到一定的武功水平，割了小JJ也學(xué)不會(huì)葵花寶典的。

別急著加技術(shù)交流QQ群，加牛人QQ，看網(wǎng)上什么多少天精通JS，啥啥啥從入門到精通，這種教程直接跳過吧，太多的事實(shí)證明，以一種浮躁的心態(tài)去做任何事都會(huì)以失敗而告終，任何學(xué)習(xí)都不是一蹴而就的，牛B就是一個(gè)學(xué)習(xí)積累的過程，別指望兩三個(gè)月，你的水平就多么厲害，任何工作都需要多種技能，別忽略了html, css等其他知識(shí)的學(xué)習(xí)。