超實用的JavaScript技巧及最佳實踐（上）
來源：程序員人生 發布時間：2014-10-18 08:00:01 閱讀次數：2179次
眾所周知，JavaScript是一門非常流行的編程語言，開發者用它不僅可以開發出炫麗的Web程序，還可以用它來開發一些移動應用程序（如PhoneGap或Appcelerator），它還有一些服務端實現，比如NodeJS、Wakanda以及其它實現。此外，許多開發者都會把JavaScript選為入門語言，使用它來做一些彈出窗口等小東西。
在這篇文章中，作者將會向大家分享JavaScript開發的小技巧、最佳實踐等非常實用的內容，不管你是前端開發者還是服務端開發者，都應該來看看這些小技巧，它們絕對會讓你受益的。
文中所提供的代碼片段都已經過最新版的Chrome 30測試，該瀏覽器使用V8 JavaScript引擎（V8 3.20.17.15）。
1.第一次給變量賦值時，別忘記var關鍵字
給一個未聲明的變量賦值，該變量會被自動創建為全局變量，在JS開發中，應該避免使用全局變量。
2.使用===替換==
并且永遠不要使用=或！=。
code_snippet_id="129006" snippet_file_name="ptcms_1388044435_0.js">[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.使用分號來作為行終止字符
在行終止的地方使用分號是一個很好的習慣，即使開發人員忘記加分號，編譯器也不會有任何提示，因為在大多數情況下，JavaScript解析器會自動加上。
4.創建構造函數
code_snippet_id="129006" snippet_file_name="ptcms_1388045087_1.js">function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
var Saad = new Person("Saad", "Mousliki");
5.應當小心使用typeof、instanceof和constructor
code_snippet_id="129006" snippet_file_name="ptcms_1388045087_2.js">var arr = ["a", "b", "c"];
typeof arr; // return "object"
arr instanceof Array // true
arr.constructor(); //[]
6.創建一個Self-calling函數
這通常會被稱為自我調用的匿名函數或立即調用函數表達式（LLFE）。當函數被創建的時候就會自動執行，好比下面這個：
code_snippet_id="129006" snippet_file_name="ptcms_1388045087_3.js">(function(){
// some private code that will be executed automatically
})();
(function(a,b){
var result = a+b;
return result;
})(10,20)
7.給數組創建一個隨機項
code_snippet_id="129006" snippet_file_name="ptcms_1388045574_4.js">var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
var randomItem = items[Math.floor(Math.random() * items.length)];
8.在特定范圍里獲得一個隨機數
下面這段代碼非常通用，當你需要生成一個假的數據用來測試時，比如在最低工資和最高之前獲取一個隨機值。
code_snippet_id="129006" snippet_file_name="ptcms_1388045574_5.js">var x = Math.floor(Math.random() * (max - min + 1)) + min;
9.在數字0和最大數之間生成一組隨機數
code_snippet_id="129006" snippet_file_name="ptcms_1388046337_6.js">var numbersArray = [] , max = 100;
for( var i=1; numbersArray.push(i++) < max;); // numbers = [0,1,2,3 ... 100]
10.生成一組隨機的字母數字字符
code_snippet_id="129006" snippet_file_name="ptcms_1388046337_7.js">function generateRandomAlphaNum(len) {
var rdmstring = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
11.打亂數字數組
code_snippet_id="129006" snippet_file_name="ptcms_1388046337_8.js">var 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函數
trim函數可以刪除字符串兩端的空白字符，可以用在Java、C#、PHP等多門語言里。
code_snippet_id="129006" snippet_file_name="ptcms_1388046585_9.js">String.prototype.trim = function(){return this.replace(/^s+|s+$/g, "");};
13.數組追加
code_snippet_id="129006" snippet_file_name="ptcms_1388046736_10.js">var 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.將參數對象轉換為數組
code_snippet_id="129006" snippet_file_name="ptcms_1388046736_11.js">var argArray = Array.prototype.slice.call(arguments);
15.驗證一個給定參數是否為數字
code_snippet_id="129006" snippet_file_name="ptcms_1388048588_12.js">function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
16.驗證一個給定的參數為數組
code_snippet_id="129006" snippet_file_name="ptcms_1388048588_13.js">function isArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]' ;
}
注意，如果toString()方法被重寫了，你將不會得到預期結果。
或者你可以這樣寫：
code_snippet_id="129006" snippet_file_name="ptcms_1388048588_14.js">Array.isArray(obj); // its a new Array method
同樣，如果你使用多個frames，你可以使用instancesof，如果內容太多，結果同樣會出錯。
code_snippet_id="129006" snippet_file_name="ptcms_1388048588_15.js">var 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.從數字數組中獲得最大值和最小值
code_snippet_id="129006" snippet_file_name="ptcms_1388048588_16.js">var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
var maxInNumbers = Math.max.apply(Math, numbers);
var minInNumbers = Math.min.apply(Math, numbers);
18.清空數組
code_snippet_id="129006" snippet_file_name="ptcms_1388048588_17.js">var myArray = [12 , 222 , 1000 ];
myArray.length = 0; // myArray will be equal to [].
19.不要用delete從數組中刪除項目
開發者可以使用split來代替使用delete來刪除數組項。與其刪除數組中未定義項目，還不如使用delete來替代。
code_snippet_id="129006" snippet_file_name="ptcms_1388048588_18.js">var 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] */
也可以……
code_snippet_id="129006" snippet_file_name="ptcms_1388048588_19.js">var 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方法應該刪除一個對象屬性。
20.使用length屬性縮短數組
如上文提到的清空數組，開發者還可以使用length屬性縮短數組。
code_snippet_id="129006" snippet_file_name="ptcms_1388048588_20.js">var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].
如果你所定義的數組長度值過高，那么數組的長度將會改變，并且會填充一些未定義的值到數組里，數組的length屬性不是只讀的。
code_snippet_id="129006" snippet_file_name="ptcms_1388048588_21.js">myArray.length = 10; // the new array length is 10
myArray[myArray.length - 1] ; // undefined
來自：
flippinawesome
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
