在這篇文章中，我將分享12個(gè)非常有用的JavaScript技巧。這些技巧可以幫助你減少并優(yōu)化代碼。

1) 使用!!將變量轉(zhuǎn)換成布爾類型

有時(shí)，我們需要檢查一些變量是否存在，或者它是否具有有效值，從而將它們的值視為true。對于做這樣的檢查，你可以使用||（雙重否定運(yùn)算符），它能自動(dòng)將任何類型的數(shù)據(jù)轉(zhuǎn)換為布爾值，只有這些變量才會(huì)返回false：0，null，""，undefined或NaN，其他的都返回true。我們來看看這個(gè)簡單的例子：

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 

在這個(gè)例子中，如果account.cash的值大于零，則account.hasMoney的值就是true。

2) 使用+將變量轉(zhuǎn)換成數(shù)字

這個(gè)轉(zhuǎn)換超級簡單，但它只適用于數(shù)字字符串，不然就會(huì)返回NaN（不是數(shù)字）?？纯催@個(gè)例子：

function toNumber(strNumber) { 
 return +strNumber; 
} 
console.log(toNumber("1234")); // 1234 
console.log(toNumber("ACB")); // NaN 

 這個(gè)轉(zhuǎn)換操作也可以作用于Date，在這種情況下，它將返回時(shí)間戳：

console.log(+new Date()) // 1461288164385 

3) 短路條件

如果你看到過這種類似的代碼:

if (conected) { 
 login(); 
} 

那么你可以在這兩個(gè)變量之間使用&&（AND運(yùn)算符）來縮短代碼。例如，前面的代碼可以縮減到一行：

conected && login(); 

你也可以用這種方法來檢查對象中是否存在某些屬性或函數(shù)。類似于以下代碼：

user && user.login(); 

4) 使用||設(shè)置默認(rèn)值

在ES6中有默認(rèn)參數(shù)這個(gè)功能。為了在舊版瀏覽器中模擬此功能，你可以使用||（OR運(yùn)算符），并把默認(rèn)值作為它的第二個(gè)參數(shù)。如果第一個(gè)參數(shù)返回false，那么第二個(gè)參數(shù)將會(huì)被作為默認(rèn)值返回。看下這個(gè)例子：

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

這個(gè)技巧非常簡單，并且在循環(huán)處理大數(shù)組時(shí)能夠避免對性能造成巨大的影響?；旧蠋缀趺總€(gè)人都是這樣使用for來循環(huán)遍歷一個(gè)數(shù)組的：

for (var i = 0; i < array.length; i++) { 
 console.log(array[i]); 
}

如果你使用較小的數(shù)組，那還好，但是如果處理大數(shù)組，則此代碼將在每個(gè)循環(huán)里重復(fù)計(jì)算數(shù)組的大小，這會(huì)產(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)你需要檢查某些屬性是否存在，避免運(yùn)行未定義的函數(shù)或?qū)傩詴r(shí)，這個(gè)技巧非常有用。如果你打算編寫跨瀏覽器代碼，你也可能會(huì)用到這個(gè)技術(shù)。例如，我們假設(shè)你需要編寫與舊版Internet Explorer 6兼容的代碼，并且想要使用document.querySelector()來通過ID獲取某些元素。 但是，在現(xiàn)代瀏覽器中，這個(gè)函數(shù)不存在。所以，要檢查這個(gè)函數(shù)是否存在，你可以使用in運(yùn)算符?？聪逻@個(gè)例子：

if ('querySelector' in document) { 
 document.querySelector("#id"); 
} else { 
 document.getElementById("id"); 
} 

在這種情況下，如果在document中沒有querySelector函數(shù)，它就會(huì)使用document.getElementById()作為代替。

7) 獲取數(shù)組的最后一個(gè)元素

Array.prototype.slice（begin，end）可以用來裁剪數(shù)組。但是如果沒有設(shè)置結(jié)束參數(shù)end的值的話，該函數(shù)會(huì)自動(dòng)將end設(shè)置為數(shù)組長度值。我認(rèn)為很少有人知道這個(gè)函數(shù)可以接受負(fù)值，如果你將begin設(shè)置一個(gè)負(fù)數(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ù)組截?cái)?

這個(gè)技術(shù)可以鎖定數(shù)組的大小，這對于要?jiǎng)h除數(shù)組中固定數(shù)量的元素是非常有用的。例如，如果你有一個(gè)包含10個(gè)元素的數(shù)組，但是你只想獲得前五個(gè)元素，則可以通過設(shè)置array.length = 5來階段數(shù)組?？聪逻@個(gè)例子：

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) 全部替換

String.replace()函數(shù)允許使用String和Regex來替換字符串，這個(gè)函數(shù)本身只能替換第一個(gè)匹配的串。但是你可以在正則表達(dá)式末尾添加/g來模擬replaceAll()函數(shù)：

var string = "john john"; 
console.log(string.replace(/hn/, "ana")); // "joana john" 
console.log(string.replace(/hn/g, "ana")); // "joana joana" 

10) 合并數(shù)組

如果你需要合并兩個(gè)數(shù)組，你可以使用Array.concat()函數(shù)：

var array1 = [1, 2, 3]; 
var array2 = [4, 5, 6]; 
console.log(array1.concat(array2)); // [1,2,3,4,5,6]; 

但是，這個(gè)函數(shù)對于大數(shù)組來說不并合適，因?yàn)樗鼘?huì)創(chuàng)建一個(gè)新的數(shù)組并消耗大量的內(nèi)存。在這種情況下，你可以使用Array.push.apply（arr1，arr2），它不會(huì)創(chuàng)建一個(gè)新數(shù)組，而是將第二個(gè)數(shù)組合并到第一個(gè)數(shù)組中，以減少內(nèi)存使用：

var array1 = [1, 2, 3]; 
var array2 = [4, 5, 6]; 
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6]; 

11) 把NodeList轉(zhuǎn)換成數(shù)組

如果運(yùn)行document.querySelectorAll("p")函數(shù)，它會(huì)返回一個(gè)DOM元素?cái)?shù)組，即NodeList對象。但是這個(gè)對象并沒有一些屬于數(shù)組的函數(shù)，例如：sort()，reduce()，map()，filter()。為了啟用這些函數(shù)，以及數(shù)組的其他的原生函數(shù)，你需要將NodeList轉(zhuǎn)換為數(shù)組。要進(jìn)行轉(zhuǎn)換，只需使用這個(gè)函數(shù)：[] .slice.call（elements）：

var elements = document.querySelectorAll("p"); // NodeList  
var arrayElements = [].slice.call(elements); // 現(xiàn)在已經(jīng)轉(zhuǎn)換成數(shù)組了 
var arrayElements = Array.from(elements); // 把NodeList轉(zhuǎn)換成數(shù)組的另外一個(gè)方法 

12) 對數(shù)組元素進(jìn)行洗牌

如果要像外部庫Lodash那樣對數(shù)據(jù)元素重新洗牌，只需使用這個(gè)技巧：

var list = [1, 2, 3];  
console.log(list.sort(function() {  
  return Math.random() - 0.5 
})); // [2,1,3] 

結(jié)論

現(xiàn)在，你已經(jīng)學(xué)到了一些有用的JS技巧，它們主要用于縮減JavaScript代碼量，其中一些技巧在許多流行的JS框架都使用到，如Lodash，Underscore.js，Strings.js等。如果你知道其他JS技巧，歡迎分享！

最新評論