在這篇文章中將給咱們共享12個(gè)有關(guān)于JavaScript的小竅門。這些小竅門也許在你的實(shí)際工作中或許能協(xié)助你處理一些問(wèn)題。

運(yùn)用!!操作符轉(zhuǎn)換布爾值
有時(shí)候咱們需求對(duì)一個(gè)變量查檢其是不是存在或許查看值是不是有一個(gè)有效值，假如存在就回來(lái)true值。為了做這么的驗(yàn)證，咱們能夠運(yùn)用!!操作符來(lái)完成是十分的便利與簡(jiǎn)略。關(guān)于變量能夠運(yùn)用!!variable做檢查，只需變量的值為:0、null、" “、undefined或許NaN都將回來(lái)的是false，反之回來(lái)的是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
在這個(gè)示例中，只需account.cash的值大于0，那么account.hasMoney回來(lái)的值即是true。
運(yùn)用+將字符串轉(zhuǎn)換成數(shù)字
這個(gè)竅門十分有用，其十分簡(jiǎn)略，能夠交字符串?dāng)?shù)據(jù)轉(zhuǎn)換成數(shù)字，不過(guò)其只合適用于字符串?dāng)?shù)據(jù)，否則將回來(lái)NaN，比方下面的示例：
function toNumber(strNumber) {
    return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN
這個(gè)也適用于Date，在本例中，它將回來(lái)的是時(shí)刻戳數(shù)字：
console.log(+new Date()) // 1461288164385
并條件符
假如你有一段這么的代碼：
if (conected) {
    login();
}
你也能夠?qū)⒆兞亢?jiǎn)寫(xiě)，而且運(yùn)用&&和函數(shù)銜接在一同，比方上面的示例，能夠簡(jiǎn)寫(xiě)成這么：
conected && login();
假如一些特點(diǎn)或函數(shù)存在于一個(gè)目標(biāo)中，你也能夠這么做檢查，如下面的代碼所示：
user && user.login();
運(yùn)用||運(yùn)算符
在ES6中有默許參數(shù)這一特性。為了在老版別的瀏覽器中模仿這一特性，能夠運(yùn)用||操作符，而且將將默許值當(dāng)做第二個(gè)參數(shù)傳入。假如第一個(gè)參數(shù)回來(lái)的值為false，那么第二個(gè)值將會(huì)認(rèn)為是一個(gè)默許值。如下面這個(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
在循環(huán)中緩存array.length
這個(gè)竅門很簡(jiǎn)略，這個(gè)在處理一個(gè)很大的數(shù)組循環(huán)時(shí)，對(duì)功用影響將是十分大的。基本上，咱們都會(huì)寫(xiě)一個(gè)這么的同步迭代的數(shù)組：
for(var i = 0; i < array.length; i++) {
    console.log(array[i]);
}
假如是一個(gè)小型數(shù)組，這么做極好，假如你要處理的是一個(gè)大的數(shù)組，這段代碼在每次迭代都將會(huì)從頭核算數(shù)組的巨細(xì)，這將會(huì)致使一些延誤。為了防止這種景象呈現(xiàn)，能夠?qū)rray.length做一個(gè)緩存：
var length = array.length;
for(var i = 0; i < length; i++) {
    console.log(array[i]);
}
你也能夠?qū)懺谶@么：
for(var i = 0, length = array.length; i < length; i++) {
    console.log(array[i]);
}
檢查目標(biāo)中特點(diǎn)
當(dāng)你需求檢查一些特點(diǎn)是不是存在，防止運(yùn)轉(zhuǎn)未定義的函數(shù)或特點(diǎn)時(shí)，這個(gè)小竅門就顯得很有用。假如你打算定些一些跨兼容的瀏覽器代碼，你也也許會(huì)用到這個(gè)小竅門。例如，你想運(yùn)用document.querySelector()來(lái)挑選一個(gè)id，而且讓它能兼容IE6瀏覽器，但是在IE6瀏覽器中這個(gè)函數(shù)是不存在的，那么運(yùn)用這個(gè)操作符來(lái)檢查這個(gè)函數(shù)是不是存在就顯得十分的有用，如下面的示例：
if ('querySelector' in document) {
    document.querySelector("#id");
} else {
    document.getElementById("id");
}
在這個(gè)示例中，假如document不存在querySelector函數(shù)，那么就會(huì)調(diào)用docuemnt.getElementById("id")。
獲取數(shù)組中最終一個(gè)元素
Array.prototype.slice(begin,end)用來(lái)獲取begin和end之間的數(shù)組元素。假如你不設(shè)置end參數(shù)，將會(huì)將數(shù)組的默許長(zhǎng)度值當(dāng)作end值。但有些同學(xué)也許不知道這個(gè)函數(shù)還能夠承受負(fù)值作為參數(shù)。假如你設(shè)置一個(gè)負(fù)值作為begin的值，那么你能夠獲取數(shù)組的最終一個(gè)元素。如：
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]
數(shù)組切斷
這個(gè)小竅門首要用來(lái)確定數(shù)組的巨細(xì)，假如用于刪去數(shù)組中的一些元素來(lái)說(shuō)，是十分有用的。例如，你的數(shù)組有10個(gè)元素，但你只想只需前五個(gè)元素，那么你能夠經(jīng)過(guò)array.length=5來(lái)切斷數(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]
更換一切
String.replace()函數(shù)答應(yīng)你運(yùn)用字符串或正則表達(dá)式來(lái)更換字符串，自身這個(gè)函數(shù)只更換第一次呈現(xiàn)的字符串，不過(guò)你能夠運(yùn)用正則表達(dá)多中的/g來(lái)模仿replaceAll()函數(shù)功用：
var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"
兼并數(shù)組
假如你要兼并兩個(gè)數(shù)組，通常狀況之下你都會(huì)運(yùn)用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ù)并不合適用來(lái)兼并兩個(gè)大型的數(shù)組，因?yàn)槠鋵⒑馁M(fèi)很多的內(nèi)存來(lái)存儲(chǔ)新創(chuàng)立的數(shù)組。在這種狀況之個(gè)，能夠運(yùn)用Array.pus().apply(arr1,arr2)來(lái)代替創(chuàng)立一個(gè)新數(shù)組。這種辦法不是用來(lái)創(chuàng)立一個(gè)新的數(shù)組，其僅僅將第一個(gè)第二個(gè)數(shù)組兼并在一同，一同削減內(nèi)存的運(yùn)用：
var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
將NodeList轉(zhuǎn)換成數(shù)組
假如你運(yùn)轉(zhuǎn)document.querySelectorAll(“p”)函數(shù)時(shí)，它也許回來(lái)DOM元素的數(shù)組，也即是NodeList目標(biāo)。但這個(gè)目標(biāo)不具有數(shù)組的函數(shù)功用，比方sort()、reduce()、map()、filter()等。為了讓這些原生的數(shù)組函數(shù)功用也能用于其上面，需求將節(jié)點(diǎn)列表轉(zhuǎn)換成數(shù)組。能夠運(yùn)用[].slice.call(elements)來(lái)完成：
var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array
數(shù)組元素的洗牌
關(guān)于數(shù)組元素的洗牌，不需求運(yùn)用任何外部的庫(kù)，比方Lodash，只需這么做：
var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]
總結(jié)
如今你學(xué)會(huì)了些有用的JavaScript小竅門。期望這些小竅門能在工作中協(xié)助你處理一些費(fèi)事，或許說(shuō)這篇文章對(duì)你有所協(xié)助。假如你有一些優(yōu)秀的JavaScript小竅門，歡迎在評(píng)論中與咱們一同共享。