12個非常有用的JavaScript技巧

在這篇文章中，我将分享12個非常有用的JavaScript技巧。這些技巧可以幫助你減少并優化代碼。 

1) 使用!!将變量轉換成布爾類型 

有時，我們需要檢查一些變量是否存在，或者它是否具有有效值，進而将它們的值視為true。對于做這樣的檢查，你可以使用||（雙重否定運算符），它能自動将任何類型的資料轉換為布爾值，隻有這些變量才會傳回false：0，null，""，undefined或NaN，其他的都傳回true。我們來看看這個簡單的例子： 

Js代碼 

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) 使用+将變量轉換成數字 

這個轉換超級簡單，但它隻适用于數字字元串，不然就會傳回NaN（不是數字）。看看這個例子： 

function toNumber(strNumber) {    

    return +strNumber;  

console.log(toNumber("1234")); // 1234    

console.log(toNumber("ACB")); // NaN    

這個轉換操作也可以作用于Date，在這種情況下，它将傳回時間戳： 

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

3) 短路條件 

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

if (conected) {    

    login();  

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

conected && login();   

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

user && user.login();  

4) 使用||設定預設值 

在ES6中有預設參數這個功能。為了在舊版浏覽器中模拟此功能，你可以使用||（OR運算符），并把預設值作為它的第二個參數。如果第一個參數傳回false，那麼第二個參數将會被作為預設值傳回。看下這個例子： 

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) 在循環中緩存array.length 

這個技巧非常簡單，并且在循環處理大數組時能夠避免對性能造成巨大的影響。基本上幾乎每個人都是這樣使用for來循環周遊一個數組的： 

for (var i = 0; i < array.length; i++) {    

    console.log(array[i]);  

如果你使用較小的數組，那還好，但是如果處理大數組，則此代碼将在每個循環裡重複計算數組的大小，這會産生一定的延遲。為了避免這種情況，你可以在變量中緩存array.length，以便在循環中每次都使用緩存來代替array.length： 

var length = array.length;    

for (var i = 0; i < length; i++) {    

為了更簡潔，可以這麼寫： 

for (var i = 0, length = array.length; i < length; i++) {    

6) 檢測對象中的屬性 

當你需要檢查某些屬性是否存在，避免運作未定義的函數或屬性時，這個技巧非常有用。如果你打算編寫跨浏覽器代碼，你也可能會用到這個技術。例如，我們假設你需要編寫與舊版Internet Explorer 6相容的代碼，并且想要使用document.querySelector()來通過ID擷取某些元素。 但是，在現代浏覽器中，這個函數不存在。是以，要檢查這個函數是否存在，你可以使用in運算符。看下這個例子： 

if ('querySelector' in document) {    

    document.querySelector("#id");  

} else {  

    document.getElementById("id");  

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

7) 擷取數組的最後一個元素 

Array.prototype.slice（begin，end）可以用來裁剪數組。但是如果沒有設定結束參數end的值的話，該函數會自動将end設定為數組長度值。我認為很少有人知道這個函數可以接受負值，如果你将begin設定一個負數的話，你就能從數組中擷取到倒數的元素： 

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) 數組截斷 

這個技術可以鎖定數組的大小，這對于要删除數組中固定數量的元素是非常有用的。例如，如果你有一個包含10個元素的數組，但是你隻想獲得前五個元素，則可以通過設定array.length = 5來階段數組。看下這個例子： 

console.log(array.length); // 6    

array.length = 3;    

console.log(array.length); // 3    

console.log(array); // [1,2,3]    

9) 全部替換 

String.replace()函數允許使用String和Regex來替換字元串，這個函數本身隻能替換第一個比對的串。但是你可以在正規表達式末尾添加/g來模拟replaceAll()函數： 

var string = "john john";    

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

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

10) 合并數組 

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

var array1 = [1, 2, 3];    

var array2 = [4, 5, 6];    

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

但是，這個函數對于大數組來說不并合适，因為它将會建立一個新的數組并消耗大量的記憶體。在這種情況下，你可以使用Array.push.apply（arr1，arr2），它不會建立一個新數組，而是将第二個數組合并到第一個數組中，以減少記憶體使用： 

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

11) 把NodeList轉換成數組 

如果運作document.querySelectorAll("p")函數，它會傳回一個DOM元素數組，即NodeList對象。但是這個對象并沒有一些屬于數組的函數，例如：sort()，reduce()，map()，filter()。為了啟用這些函數，以及數組的其他的原生函數，你需要将NodeList轉換為數組。要進行轉換，隻需使用這個函數：[] .slice.call（elements）： 

var elements = document.querySelectorAll("p"); // NodeList    

var arrayElements = [].slice.call(elements); // 現在已經轉換成數組了  

var arrayElements = Array.from(elements); // 把NodeList轉換成數組的另外一個方法  

12) 對數組元素進行洗牌 

如果要像外部庫Lodash那樣對資料元素重新洗牌，隻需使用這個技巧： 

var list = [1, 2, 3];    

console.log(list.sort(function() {    

    return Math.random() - 0.5  

})); // [2,1,3]  

結論 

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