今天，小芯給大家整理11條非常好用的JavaScript技巧。

買不了吃虧，買不了上當(dāng)，快來看看吧~

[[311838]]

1.獲取數(shù)組的最后一項

設(shè)置起始參數(shù)和終止參數(shù)時，Array.prototype.slice(begin,end)具有剪切數(shù)組的功能。但是，如果未設(shè)置終止參數(shù)，該功能將自動設(shè)置為數(shù)組的最大值。

該功能可接受負(fù)值，我想很多人對此并不了解，而且如果將起始參數(shù)設(shè)定為負(fù)數(shù)，那么會得到數(shù)組的最后幾個元素：

 

vararray = [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] 

 

2.用||運算符默認(rèn)某值

目前的ES6有默認(rèn)參數(shù)功能。為了在舊版瀏覽器中模擬該功能，你可以用||(OR運算符)默認(rèn)某值，將其作為第二個可用的參數(shù)。

如果第一個參數(shù)返回到了false，那么第二個參數(shù)就會被視為默認(rèn)值。請看這個例子：

 

function User(name, age) { 
this.name = name || "OliverQueen"; 
this.age = age || 27; 
}var user1 = new User(); 
console.log(user1.name); // Oliver Queen 
console.log(user1.age); // 27var user2 = new User("Barry Allen", 25); 
console.log(user2.name); // Barry Allen 
console.log(user2.age); // 25 

3.重組數(shù)組元素

想不用Lodash這樣的外部工具庫就能重組數(shù)組元素?試試下面這個神奇的函數(shù)：

 

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

 

4.短路條件

如果你看到一個代碼類似于：

 

if (connected) { login(); 
} 

 

可以通過結(jié)合使用變量(會被驗證)和函數(shù)之間的&&(AND運算符)來縮短上述代碼。比如，上述代碼可以縮短為一行：

 

connected && login(); 

你可以執(zhí)行相同操作來檢查對象中是否存在屬性或函數(shù)。與以下代碼類似：

 

user && user.login(); 

5.截取數(shù)組

這項技巧可以鎖定數(shù)組的大小，能夠根據(jù)你要設(shè)置的元素數(shù)目從數(shù)組中刪除某些元素，十分有用。

比如，如果有一個含有10個元素的數(shù)組，但是你只想要

前五個，那就可以截取數(shù)組，通過設(shè)置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] 

6.用+運算符轉(zhuǎn)換為數(shù)字

這種技巧真是太棒了!它操作起來非常簡單，不過只適用于str函數(shù)，否則它會返回到NaN(非數(shù)字)。請看下面的例子：

 

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

 

這種技巧同樣適用于日期，在這種情況下，它會返回到時間戳：

 

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

7.合并數(shù)組

如果需要將兩個數(shù)組合并，那么可以用Array.contat()函數(shù)：

 

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

 

但是，該函數(shù)并不是合并大型數(shù)組比較好的工具，因為它創(chuàng)建新數(shù)組時會占用大量內(nèi)存。

在這種情況下，可以用Array.push.apply(arr1, arr2)，而不用創(chuàng)建新數(shù)組。這種函數(shù)會將第二個數(shù)組并入第一個數(shù)組，不會占用太多內(nèi)存：

 

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

 

8.在循環(huán)中緩存array.length

這個技巧很簡單，但在循環(huán)中處理大型數(shù)組時，它會對性能產(chǎn)生很大影響。為了迭代數(shù)組，幾乎每個人都會同時寫出這樣的代碼：

 

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

 

如果處理的是小型數(shù)組，那沒問題，可是如果處理的是大型數(shù)組，那么代碼會在循環(huán)的每一次迭代中重新計算數(shù)組的大小，從而造成延遲。

為了避免此種情況，可以將要用的array.length緩存在某個變量中，而不用在循環(huán)的每一次迭代中都調(diào)用它：

 

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]); 
 
} 

 

9.全部替換

String.replace()函數(shù)允許使用字符串和正則表達式替換字符串;在本機中該函數(shù)只能替換第一次。但是可以在正則表達式的末尾使用/g，從而模擬replaceAll()函數(shù)：

 

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

 

10.用!!運算符轉(zhuǎn)換為布爾值

有時候，為將變量看作真值，我們需要檢查一個變量是否存在或是否具有有效值。在此驗證過程中，你可以用!!(雙重否定運算符)。

一個簡單的!!variable會自動將數(shù)據(jù)轉(zhuǎn)換為布爾值，而且該變量只有在含有0、null、""、undefined或NaN這樣的值時才會返回到false，否則會返回到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。

11.將NodeList轉(zhuǎn)換為Arrays

如果運行document.querySelectorAll("p")函數(shù)，那么它有可能會返回到DOM元素數(shù)組，即NodeList對象。但是該對象并不具有數(shù)組的全部函數(shù)，比如sort()、reduce()、map()和filter()。

為了運行以上函數(shù)以及其他自帶的數(shù)組函數(shù)，需要將NodeList轉(zhuǎn)化為Arrays。想試試這個技巧?用下面這個函數(shù)就可以：[].slice.call(elements):

 

var elements = document.querySelectorAll("p");// NodeList 
 
var arrayElements = [].slice.call(elements); // Now the NodeList is an array//This is another way of converting NodeList to Arrayvar arrayElements =Array.from(elements);