20個超實用的JavaScript技巧及最佳實踐

眾所周知，JavaScript是一門非常流行的編程語言，開發(fā)者用它不僅可以開發(fā)出炫麗的Web程序，還可以用它來開發(fā)一些移動應(yīng)用程序（如PhoneGap或Appcelerator），它還有一些服務(wù)端實現(xiàn)，比如NodeJS、Wakanda以及其它實現(xiàn)。此外，許多開發(fā)者都會把JavaScript選為入門語言，使用它來做一些彈出窗口等小東西。

在這篇文章中，作者將會向大家分享JavaScript開發(fā)的小技巧、最佳實踐等非常實用的內(nèi)容，不管你是前端開發(fā)者還是服務(wù)端開發(fā)者，都應(yīng)該來看看這些小技巧，它們絕對會讓你受益的。

文中所提供的代碼片段都已經(jīng)過最新版的Chrome 30測試，該瀏覽器使用V8 JavaScript引擎（V8 3.20.17.15）。

1.第一次給變量賦值時，別忘記var關(guān)鍵字

給一個未聲明的變量賦值，該變量會被自動創(chuàng)建為全局變量，在JS開發(fā)中，應(yīng)該避免使用全局變量。

2.使用===替換==

并且永遠不要使用=或！=。

[js]?view plaincopy[10]?===?10????//?is?false?? [10]??==?10????//?is?true?? '10'?==?10?????//?is?true?? '10'?===?10????//?is?false?? ?[]???==?0?????//?is?true?? ?[]?===??0?????//?is?false?? ?''?==?false???//?is?true?but?true?==?"a"?is?false?? ?''?===???false?//?is?false??? 3.使用分號來作為行終止字符

在行終止的地方使用分號是一個很好的習慣，即使開發(fā)人員忘記加分號，編譯器也不會有任何提示，因為在大多數(shù)情況下，JavaScript解析器會自動加上。?

4.創(chuàng)建構(gòu)造函數(shù)

[js]?view plaincopyfunction?Person(firstName,?lastName){?? ????this.firstName?=??firstName;?? ????this.lastName?=?lastName;?????????? }???? ?? var?Saad?=?new?Person("Saad",?"Mousliki");?? 5.應(yīng)當小心使用typeof、instanceof和constructor

[js]?view plaincopyvar?arr?=?["a",?"b",?"c"];?? typeof?arr;???//?return?"object"??? arr??instanceof?Array?//?true?? arr.constructor();??//[]?? 6.創(chuàng)建一個Self-calling函數(shù)

這通常會被稱為自我調(diào)用的匿名函數(shù)或立即調(diào)用函數(shù)表達式（LLFE）。當函數(shù)被創(chuàng)建的時候就會自動執(zhí)行，好比下面這個：?

[js]?view plaincopy(function(){?? ????//?some?private?code?that?will?be?executed?automatically?? })();???? (function(a,b){?? ????var?result?=?a+b;?? ????return?result;?? })(10,20)?? 7.給數(shù)組創(chuàng)建一個隨機項

[js]?view plaincopyvar?items?=?[12,?548?,?'a'?,?2?,?5478?,?'foo'?,?8852,?,?'Doe'?,?2145?,?119];?? ?? var??randomItem?=?items[Math.floor(Math.random()?*?items.length)];?? 8.在特定范圍里獲得一個隨機數(shù)

下面這段代碼非常通用，當你需要生成一個假的數(shù)據(jù)用來測試時，比如在最低工資和最高之前獲取一個隨機值。

[js]?view plaincopyvar?x?=?Math.floor(Math.random()?*?(max?-?min?+?1))?+?min;?? 9.在數(shù)字0和最大數(shù)之間生成一組隨機數(shù)

[js]?view plaincopyvar?numbersArray?=?[]?,?max?=?100;?? ?? for(?var?i=1;?numbersArray.push(i++)?<?max;);??//?numbers?=?[0,1,2,3?...?100]??? 10.生成一組隨機的字母數(shù)字字符

[js]?view plaincopyfunction?generateRandomAlphaNum(len)?{?? ????var?rdmstring?=?"";?? ????for(?;?rdmString.length?<?len;?rdmString??+=?Math.random().toString(36).substr(2));?? ????return??rdmString.substr(0,?len);?? ?? }?? 11.打亂數(shù)字數(shù)組

[js]?view plaincopyvar?numbers?=?[5,?458?,?120?,?-215?,?228?,?400?,?122205,?-85411];?? numbers?=?numbers.sort(function(){?return?Math.random()?-?0.5});?? /*?the?array?numbers?will?be?equal?for?example?to?[120,?5,?228,?-215,?400,?458,?-85411,?122205]??*/?? 12.字符串tim函數(shù)

trim函數(shù)可以刪除字符串的空白字符，可以用在Java、C#、PHP等多門語言里。

[js]?view plaincopyString.prototype.trim?=?function(){return?this.replace(/^s+|s+$/g,?"");};???? 13.數(shù)組追加

[js]?view plaincopyvar?array1?=?[12?,?"foo"?,?{name?"Joe"}?,?-2458];?? ?? var?array2?=?["Doe"?,?555?,?100];?? Array.prototype.push.apply(array1,?array2);?? /*?array1?will?be?equal?to??[12?,?"foo"?,?{name?"Joe"}?,?-2458?,?"Doe"?,?555?,?100]?*/?? 14.將參數(shù)對象轉(zhuǎn)換為數(shù)組?

[js]?view plaincopyvar?argArray?=?Array.prototype.slice.call(arguments);?? 15.驗證一個給定參數(shù)是否為數(shù)字

[js]?view plaincopyfunction?isNumber(n){?? ????return?!isNaN(parseFloat(n))?&&?isFinite(n);?? }?? 16.驗證一個給定的參數(shù)為數(shù)組

[js]?view plaincopyfunction?isArray(obj){?? ????return?Object.prototype.toString.call(obj)?===?'[object?Array]'?;?? }??

注意，如果toString()方法被重寫了，你將不會得到預(yù)期結(jié)果。?

或者你可以這樣寫：

[js]?view plaincopyArray.isArray(obj);?//?its?a?new?Array?method?? 同樣，如果你使用多個frames，你可以使用instancesof，如果內(nèi)容太多，結(jié)果同樣會出錯。?

[js]?view plaincopyvar?myFrame?=?document.createElement('iframe');?? document.body.appendChild(myFrame);?? ?? var?myArray?=?window.frames[window.frames.length-1].Array;?? var?arr?=?new?myArray(a,b,10);?//?[a,b,10]???? ?? //?instanceof?will?not?work?correctly,?myArray?loses?his?constructor??? //?constructor?is?not?shared?between?frames?? arr?instanceof?Array;?//?false??

17.從數(shù)字數(shù)組中獲得最大值和最小值

[js]?view plaincopyvar??numbers?=?[5,?458?,?120?,?-215?,?228?,?400?,?122205,?-85411];??? var?maxInNumbers?=?Math.max.apply(Math,?numbers);??? var?minInNumbers?=?Math.min.apply(Math,?numbers);?? 18.清空數(shù)組

[js]?view plaincopyvar?myArray?=?[12?,?222?,?1000?];???? myArray.length?=?0;?//?myArray?will?be?equal?to?[].?? 19.不要用delete從數(shù)組中刪除項目

開發(fā)者可以使用split來代替使用delete來刪除數(shù)組項。與其刪除數(shù)組中未定義項目，還不如使用delete來替代。?

[js]?view plaincopyvar?items?=?[12,?548?,'a'?,?2?,?5478?,?'foo'?,?8852,?,?'Doe'?,2154?,?119?];??? items.length;?//?return?11??? delete?items[3];?//?return?true??? items.length;?//?return?11??? /*?items?will?be?equal?to?[12,?548,?"a",?undefined?×?1,?5478,?"foo",?8852,?undefined?×?1,?"Doe",?2154,???????119]???*/?? 也可以……

[js]?view plaincopyvar?items?=?[12,?548?,'a'?,?2?,?5478?,?'foo'?,?8852,?,?'Doe'?,2154?,?119?];??? items.length;?//?return?11??? items.splice(3,1)?;??? items.length;?//?return?10??? /*?items?will?be?equal?to?[12,?548,?"a",?5478,?"foo",?8852,?undefined?×?1,?"Doe",?2154,???????119]???*/??

delete方法應(yīng)該刪除一個對象屬性。?

20.使用length屬性縮短數(shù)組

如上文提到的清空數(shù)組，開發(fā)者還可以使用length屬性縮短數(shù)組。

[js]?view plaincopyvar?myArray?=?[12?,?222?,?1000?,?124?,?98?,?10?];???? myArray.length?=?4;?//?myArray?will?be?equal?to?[12?,?222?,?1000?,?124].?? 如果你所定義的數(shù)組長度值過高，那么數(shù)組的長度將會改變，并且會填充一些未定義的值到數(shù)組里，數(shù)組的length屬性不是只讀的。?

[js]?view plaincopymyArray.length?=?10;?//?the?new?array?length?is?10??? myArray[myArray.length?-?1]?;?//?undefined??

來自：?flippinawesome

本文為CSDN編譯整理，未經(jīng)允許不得轉(zhuǎn)載，如需轉(zhuǎn)載請聯(lián)系market#csdn.net(#換成@)