網上看到的“12個非常有用的JavaScript技巧”

HPY2706發表於2018-05-11
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]複製程式碼


相關文章