12個非常實用的JavaScript小技巧
來源：原創(chuàng) 時間：2017-04-30 瀏覽：0 次在這篇文章中將給咱們共享12個有關于JavaScript的小竅門。這些小竅門也許在你的實際工作中或許能協助你處理一些問題。
運用!!操作符轉換布爾值
有時候咱們需求對一個變量查檢其是不是存在或許查看值是不是有一個有效值，假如存在就回來true值。為了做這么的驗證，咱們能夠運用!!操作符來完成是十分的便利與簡略。關于變量能夠運用!!variable做檢查，只需變量的值為: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的值大于0，那么account.hasMoney回來的值即是true。
運用+將字符串轉換成數字
這個竅門十分有用，其十分簡略，能夠交字符串數據轉換成數字，不過其只合適用于字符串數據，否則將回來NaN，比方下面的示例：
function toNumber(strNumber) {
return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN
這個也適用于Date，在本例中，它將回來的是時刻戳數字：
console.log(+new Date()) // 1461288164385
并條件符
假如你有一段這么的代碼：
if (conected) {
login();
}
你也能夠將變量簡寫，而且運用&&和函數銜接在一同，比方上面的示例，能夠簡寫成這么：
conected && login();
假如一些特點或函數存在于一個目標中，你也能夠這么做檢查，如下面的代碼所示：
user && user.login();
運用||運算符
在ES6中有默許參數這一特性。為了在老版別的瀏覽器中模仿這一特性，能夠運用||操作符，而且將將默許值當做第二個參數傳入。假如第一個參數回來的值為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
在循環(huán)中緩存array.length
這個竅門很簡略，這個在處理一個很大的數組循環(huán)時，對功用影響將是十分大的?；旧希蹅兌紩懸粋€這么的同步迭代的數組：
for(var i = 0; i < array.length; i++) {
console.log(array[i]);
}
假如是一個小型數組，這么做極好，假如你要處理的是一個大的數組，這段代碼在每次迭代都將會從頭核算數組的巨細，這將會致使一些延誤。為了防止這種景象呈現，能夠將array.length做一個緩存：
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]);
}
檢查目標中特點
當你需求檢查一些特點是不是存在，防止運轉未定義的函數或特點時，這個小竅門就顯得很有用。假如你打算定些一些跨兼容的瀏覽器代碼，你也也許會用到這個小竅門。例如，你想運用document.querySelector()來挑選一個id，而且讓它能兼容IE6瀏覽器，但是在IE6瀏覽器中這個函數是不存在的，那么運用這個操作符來檢查這個函數是不是存在就顯得十分的有用，如下面的示例：
if ('querySelector' in document) {
document.querySelector("#id");
} else {
document.getElementById("id");
}
在這個示例中，假如document不存在querySelector函數，那么就會調用docuemnt.getElementById("id")。
獲取數組中最終一個元素
Array.prototype.slice(begin,end)用來獲取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]
數組切斷
這個小竅門首要用來確定數組的巨細，假如用于刪去數組中的一些元素來說，是十分有用的。例如，你的數組有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]
更換一切
String.replace()函數答應你運用字符串或正則表達式來更換字符串，自身這個函數只更換第一次呈現的字符串，不過你能夠運用正則表達多中的/g來模仿replaceAll()函數功用：
var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"
兼并數組
假如你要兼并兩個數組，通常狀況之下你都會運用Array.concat()函數：
var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];
然后這個函數并不合適用來兼并兩個大型的數組，因為其將耗費很多的內存來存儲新創(chuàng)立的數組。在這種狀況之個，能夠運用Array.pus().apply(arr1,arr2)來代替創(chuàng)立一個新數組。這種辦法不是用來創(chuàng)立一個新的數組，其僅僅將第一個第二個數組兼并在一同，一同削減內存的運用：
var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
將NodeList轉換成數組
假如你運轉document.querySelectorAll(“p”)函數時，它也許回來DOM元素的數組，也即是NodeList目標。但這個目標不具有數組的函數功用，比方sort()、reduce()、map()、filter()等。為了讓這些原生的數組函數功用也能用于其上面，需求將節(jié)點列表轉換成數組。能夠運用[].slice.call(elements)來完成：
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
數組元素的洗牌
關于數組元素的洗牌，不需求運用任何外部的庫，比方Lodash，只需這么做：
var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]
總結
如今你學會了些有用的JavaScript小竅門。期望這些小竅門能在工作中協助你處理一些費事，或許說這篇文章對你有所協助。假如你有一些優(yōu)秀的JavaScript小竅門，歡迎在評論中與咱們一同共享。
