如你所知,JavaScript是世界上第一的程式語言,它是Web的語言,是行動混合應用程式(mobile hybrid apps)的語言(例如PhoneGap或Appcelerator),是伺服器端的語言(例如NodeJS或者Wakanda),並且擁有許多其他的實現。同時它也是許多新手的啟蒙語言,因為它不但可以在瀏覽器上顯示一個簡單的alert訊息,而且還可以用來控制一個機器人(使用nodebot,或nodruino)。掌握JavaScript並且能夠寫出組織規格並且效能高效的程式碼的開發人員,已經成為人才市場上的獵尋物件。
要注意的是,這篇文章中的程式碼片段都在最新的Google Chrome(版本號30)上測試過,它使用V8 JavaScript引擎(V8 3.20.17.15)。
複製程式碼 程式碼如下:var arr = ["a", "b", "c"];typeof arr; // return "object"arr instanceof Array // truearr.constructor(); /instanceof Array // truearr.constructor(); / /[]7 – 建立一個自調用函數(Self-calling Funtion)這個常被稱為自調用匿名函數(Self-Invoked Anonymous Function)或即時調用函數表達式(IIFE-Immediately Invoked Function Expression)。這是一個在建立後立即自動執行的函數,通常如下:複製程式碼 程式碼如下: (function(){ // some private code that will be executed automatically})();(function(a,b){ > return result;})(10,20)
var numbersArray = [00,Array = [100Array = [100Array = [100Array = [100Array = [100Array = [100Array = [100Array = [100Array = max ;
for( var i=1; numbersArray.push(i )
11 – 產生一個隨機的數字字母字串
function generateRandomAlphaNum(len) {
var rdmstring = "";
for( ; rdmString.length }
12 – 打亂一個數字陣列
複製程式碼
複製程式碼 程式碼如下:
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];number; ){ return Math.random() - 0.5});
/* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205]o >
13 – String的trim函數
在Java、C#、PHP和許多其他語言中都有一個經典的trim 函數,用來去除字串中的空格符,而在JavaScript中並沒有,所以我們需要在String物件上加上這個函數。
程式碼如下:
.replace(/^s |s $/g, "");};//去掉字串的前後空格,不包括字串內部空格
14 – 附加(append)一個數組到另一個陣列
複製程式碼
Array.prototype.push.apply(array1, array2);
/* array1 will be equal to [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */
//其實concat可以直接實現兩個數組的連接,但是它的回傳值是一個新的陣列。這裡是直接改array1
15 – 將arguments物件轉換成一個陣列
複製程式碼
複製程式碼
複製程式碼 程式碼如下:function isNumber(n){isNumber(n)> return !isNaN(parseFloat(n)) && isFinite(n);}17 – 驗證參數是否為陣列 複製程式碼 程式碼如下:function isArray(obj){ return Object.prototype.toString.call(obj) === '[object Array ]' ;}
注意:如果toString()方法被重寫了(overridden),你使用這個技巧就不能得到想要的結果了。或者可以使用:
Array.isArray(obj); // 這是一個新的array的方法
如果你不在使用多重frames的情況下,你也可以使用instanceof 方法。但如果你有多個上下文,你就會得到錯誤的結果。
var myFrame = document.createElement('iframe');
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 instance Array;
18 – 取得一個數字數組中的最大值或最小值
程式碼如下:
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
var maxInNumbers = Math.max. var minInNumbers = Math.min.apply(Math, numbers);
//譯者註:這裡使用了Function.prototype.apply方法傳遞參數的技巧
19 – 清空一個數組
程式碼如下:
var myArray = [12 , 222 , 1000
myArray.length = 0; // myArray will be equal to [].
20 – 不要使用delete 來刪除一個陣列中的項目。
使用 splice 而不要使用 delete 來刪除陣列中的某項。使用 delete 只是用 undefined 來替換掉原有的項,並不是真正的從數組中刪除。
程式碼如下:
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // return 11
delete items[3]; return true true
items.length; // return 11
/* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
複製程式碼
複製程式碼
複製碼var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];items.length; // return 11
items. 3,1) ;
items.length; // return 10
跟上面的清空數組的方式類似,我們使用 length 屬性來截短一個數組。
複製程式碼
此外,如果你將一個數組的length 設定成一個比現在大的值,那麼這個陣列的長度就會被改變,會增加新的undefined 的項補上。 數組的 length 不是只讀屬性。
複製程式碼複製程式碼 程式碼如下:
var foo = 10;
foo == 10 && doSomething(); // 等價於if (foo == 10) doSomething();
foo == 5 || doSomething( ); // 等價於if (foo != 5) doSomething();
邏輯AND 也可以被用來為函數參數設定預設值
function doSomething(arg1){
Arg1 = arg1 || 10; Arg1會被預設為10
}
23 – 使用map() 方法來遍歷一個陣列裡的項
var squares = [1,2,3,4].map(function (val) {
return val * return val * val return val * val;
});
// squares will be equal to [1, 4, 9, 16]
24 – 四捨五入一個數字,保留N位小數 複製程式碼
程式碼如下:
var num =2.443242342;num = num.toFixed(4); / num will be equal to 2.4432
複製程式碼
0.1 0.2 === 0.3 // is false
9007199254740992 1 // is equal to 9007199254740992
為什麼會這樣? 0.1 0.2等於0.30000000000000004。你要知道,所有的JavaScript數字在內部都是以64位元二進位表示的浮點數,符合IEEE 754標準。更多的介紹,可以閱讀這篇文章。你可以使用 toFixed() 和 toPrecision() 方法來解決這個問題。 26 – 使用for-in遍歷一個物件內部屬性的時候注意檢查屬性
下面的程式碼片段能夠避免在遍歷一個物件屬性的時候存取原型的屬性
複製程式碼
程式碼如下:
for (var name in object) {
if (object.hasOwnProperty(name)) {
🎜>
27 – 逗號運算子
複製程式碼
var a = 0;
var b = ( a , 99 );
console.log(a); // a will be equal to 1
console.log(b); // b is equal to 99
28 – 快取需要計算與查詢(calculation or querying)的變數
對於jQuery選擇器,我們最好快取這些DOM元素。
複製程式碼
程式碼如下:
var navright = document.querySelector('2'); >var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');
var navdown = document.querySelector('#down');
29 – 在呼叫isFinite()之前驗證參數
複製程式碼
程式碼如下:isFinite(0/0) ; // false
isFinite("foo"); // false
isFinite("10"); // true
isFinite(10); // true
isFinite(undifined); // false
isFinite(); // falseisFinite(null); // true !!!
複製程式碼
程式碼如下: 程式碼如下:var numbersArray = [ 2,3,4,5];var from = numbersArray.indexOf("foo") ; // from is equal to -1numbersArray.splice(from,2); // will return [5 ]
確保呼叫 indexOf 時的參數不是負數。
31 – 以JSON為基礎的序列化與反序列化(serialization and deserialization)
複製程式碼
複製程式碼
複製程式碼
程式碼如下:
32 – 避免使用eval() 和Function 構造函數
使用eval 和Function 建構子是非常昂貴的操作,因為每次他們都會呼叫腳本引擎將原始程式碼轉換成可執行程式碼。
複製程式碼
程式碼如下:var func1 = new Function(functionCode);
33 – 避免使用with()使用with() 會插入一個全域變數。因此,同名的變數會被覆蓋值而造成不必要的麻煩。 34 – 避免使用for-in 來遍歷一個數組
for (i = 0, len = object. length; i