網上看到的「12個很是有用的JavaScript技巧」

記錄一下，本身之後可能用的到。

原文:blog.jscrambler.com/12-extremel…

網上看到的。

1) 使用!!將變量轉換成布爾類型
有時，咱們須要檢查一些變量是否存在，或者它是否具備有效值，從而將它們的值視爲true。對於作這樣的檢查，你可使用!!（雙重否認運算符），它能自動將任何類型的數據轉換爲布爾值，只有這些變量纔會返回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) 使用+將變量轉換成數字
這個轉換超級簡單，但它只適用於數字字符串，否則就會返回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);
}複製代碼

若是你使用較小的數組，那還好，可是若是處理大數組，則此代碼將在每一個循環裏重複計算數組的大小，這會產生必定的延遲。爲了不這種狀況，你能夠在變量中緩存array.length，以便在循環中每次都使用緩存來代替array.length：

var 
length = array.length;  
for (var i = 0; i < length; i++) {  
    
console.log(array);
}複製代碼

爲了更簡潔，能夠這麼寫：

for (var i = 0, length = 
array.length; i < length; i++) {  
    console.log(array);
}複製代碼

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來階段數組。看下這個例子：

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()函數容許使用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），它不會建立一個新數組，而是將第二個數組合併到第一個數組中，以減小內存使用：

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轉換成數組
若是運行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]複製代碼