12個很是實用的JavaScript小技巧

在這篇文章中將給你們分享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

在循環中緩存array.length

這個技巧很簡單，這個在處理一個很大的數組循環時，對性能影響將是很是大的。基本上，你們都會寫一個這樣的同步迭代的數組：

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

而後這個函數並不適合用來合併兩個大型的數組，由於其將消耗大量的內存來存儲新建立的數組。在這種狀況之個，可使用Array.pus().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];

將NodeList轉換成數組

若是你運行document.querySelectorAll(「p」)函數時，它可能返回DOM元素的數組，也就是NodeList對象。但這個對象不具備數組的函數功能，好比sort()、reduce()、map()、filter()等。爲了讓這些原生的數組函數功能也能用於其上面，須要將節點列表轉換成數組。可使用[].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小技巧。但願這些小技巧能在工做中幫助你解決一些麻煩，或者說這篇文章對你有所幫助。若是你有一些優秀的JavaScript小技巧，歡迎在評論中與咱們一塊兒分享。

【我有一個前端學習交流QQ羣：328058344 若是你在學習前端的過程當中遇到什麼問題，歡迎來個人QQ羣提問，羣裏天天還會更新一些學習資源。禁止閒聊，非喜勿進。】