在這篇文章中，我將分享12個非常有用的JavaScript技巧。這些技巧可以幫助你減少并優(yōu)化代碼。
1) 使用!!將變量轉(zhuǎn)換成布爾類型
有時，我們需要檢查一些變量是否存在，或者它是否具有有效值，從而將它們的值視為true。對于做這樣的檢查，你可以使用||（雙重否定運算符），它能自動將任何類型的數(shù)據(jù)轉(zhuǎn)換為布爾值，只有這些變量才會返回false：0，null，""，undefined或NaN，其他的都返回true。我們來看看這個簡單的例子：
function Account(cash) { this.cash = cash; this.hasMoney = !!cash; } var account = new Account(100.50); console.log(account.cash); // 100.50 console.log(account.hasMoney); // true var emptyAccount = new Account(0); console.log(emptyAccount.cash); // 0 console.log(emptyAccount.hasMoney); // false
在這個例子中，如果account.cash的值大于零，則account.hasMoney的值就是true。
2) 使用+將變量轉(zhuǎn)換成數(shù)字
這個轉(zhuǎn)換超級簡單，但它只適用于數(shù)字字符串，不然就會返回NaN（不是數(shù)字）。看看這個例子：
function toNumber(strNumber) { return +strNumber; } console.log(toNumber("1234")); // 1234 console.log(toNumber("ACB")); // NaN
這個轉(zhuǎn)換操作也可以作用于Date，在這種情況下，它將返回時間戳：
console.log(+new Date()) // 1461288164385
3) 短路條件
如果你看到過這種類似的代碼:
if (conected) { login(); }
那么你可以在這兩個變量之間使用&&（AND運算符）來縮短代碼。例如，前面的代碼可以縮減到一行：
conected && login();
你也可以用這種方法來檢查對象中是否存在某些屬性或函數(shù)。類似于以下代碼：
user && user.login();
4) 使用||設(shè)置默認值
在ES6中有默認參數(shù)這個功能。為了在舊版瀏覽器中模擬此功能，你可以使用||（OR運算符），并把默認值作為它的第二個參數(shù)。如果第一個參數(shù)返回false，那么第二個參數(shù)將會被作為默認值返回。看下這個例子：
function User(name, age) { this.name = name || "Oliver Queen"; this.age = age || 27; } var user1 = new User(); console.log(user1.name); // Oliver Queen console.log(user1.age); // 27 var user2 = new User("Barry Allen", 25); console.log(user2.name); // Barry Allen console.log(user2.age); // 25
5) 在循環(huán)中緩存array.length
這個技巧非常簡單，并且在循環(huán)處理大數(shù)組時能夠避免對性能造成巨大的影響。基本上幾乎每個人都是這樣使用for來循環(huán)遍歷一個數(shù)組的：
for (var i = 0; i < array.length; i++) { console.log(array[i]); }
如果你使用較小的數(shù)組，那還好，但是如果處理大數(shù)組，則此代碼將在每個循環(huán)里重復(fù)計算數(shù)組的大小，這會產(chǎn)生一定的延遲。為了避免這種情況，你可以在變量中緩存array.length，以便在循環(huán)中每次都使用緩存來代替array.length：
var length = array.length; for (var i = 0; i < length; i++) { console.log(array[i]); }
為了更簡潔，可以這么寫：
for (var i = 0, length = array.length; i < length; i++) { console.log(array[i]); }
6) 檢測對象中的屬性
當(dāng)你需要檢查某些屬性是否存在，避免運行未定義的函數(shù)或?qū)傩詴r，這個技巧非常有用。如果你打算編寫跨瀏覽器代碼，你也可能會用到這個技術(shù)。例如，我們假設(shè)你需要編寫與舊版Internet Explorer 6兼容的代碼，并且想要使用document.querySelector()來通過ID獲取某些元素。 但是，在現(xiàn)代瀏覽器中，這個函數(shù)不存在。所以，要檢查這個函數(shù)是否存在，你可以使用in運算符?？聪逻@個例子：
if ('querySelector' in document) { document.querySelector("#id"); } else { document.getElementById("id"); }
在這種情況下，如果在document中沒有querySelector函數(shù)，它就會使用document.getElementById()作為代替。
7) 獲取數(shù)組的最后一個元素
Array.prototype.slice（begin，end）可以用來裁剪數(shù)組。但是如果沒有設(shè)置結(jié)束參數(shù)end的值的話，該函數(shù)會自動將end設(shè)置為數(shù)組長度值。我認為很少有人知道這個函數(shù)可以接受負值，如果你將begin設(shè)置一個負數(shù)的話，你就能從數(shù)組中獲取到倒數(shù)的元素：
var array = [1, 2, 3, 4, 5, 6]; console.log(array.slice(-1)); // [6] console.log(array.slice(-2)); // [5,6] console.log(array.slice(-3)); // [4,5,6]
8) 數(shù)組截斷
這個技術(shù)可以鎖定數(shù)組的大小，這對于要刪除數(shù)組中固定數(shù)量的元素是非常有用的。例如，如果你有一個包含10個元素的數(shù)組，但是你只想獲得前五個元素，則可以通過設(shè)置array.length = 5來階段數(shù)組?？聪逻@個例子：
var array = [1, 2, 3, 4, 5, 6]; console.log(array.length); // 6 array.length = 3; console.log(array.length); // 3 console.log(array); // [1,2,3]
9) 全部替換