使用!!操作符轉換布林值
有時候我們需要對一個變數檢查其是否存在或檢查值是否有有效值，如果存在就回傳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
並條件符
如果你有一段這樣的程式碼：
rr將變數簡寫，並且使用&&和函數連接在一起，例如上面的範例，可以簡寫成這樣：if (conected) { login(); }
conected && login();
使用||運算子
user && user.login();
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
for(var i = 0; i < array.length; i++) { console.log(array[i]); }
var length = array.length; for(var i = 0; i < length; i++) { console.log(array[i]); }
檢測對像中屬性
當你需要檢測一些屬性是否存在，避免運行未定義的函數或屬性時，這個小技巧就顯得很有用。如果你打算訂些一些跨相容的瀏覽器程式碼，你也可能會用到這個小技巧。例如，你想使用document.querySelector()來選擇一個id，並且讓它能相容於IE6瀏覽器，但是在IE6瀏覽器中這個函數是不存在的，那麼使用這個操作符來檢測這個函數是否存在就顯得非常的有用，如下面的範例：for(var i = 0, length = array.length; i < length; i++) { console.log(array[i]); }
取得陣列中最後一個元素
Array.prototype.slice(begin,end)用來取得begin和end之間的陣列元素。如果你不設定end參數，將會將陣列的預設長度值當作end值。但有些同學可能不知道這個函數還可以接受負值當參數。如果你設定一個負值作為begin的值，那麼你可以取得數組的最後一個元素。如：if ('querySelector' in document) { document.querySelector("#id"); } else { document.getElementById("id"); }
數組截斷
這個小技巧主要用來鎖定數組的大小，如果用於刪除數組中的一些元素來說，是非常有用的。例如，你的陣列有10個元素，但你只想只要前五個元素，那麼你可以透過array.length=5來截斷陣列。如下面這個範例：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]
替換所有
String.replace()函數允許你使用字串或正規表示式來替換字串，本身這個函數只替換第一次出現的字串，不過你可以使用正規表示多中的/g來模擬replaceAll()函數功能：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]
合併數組
如果你要合併兩個數組，一般情況之下你都會使用Array.concat()函數：var string = "john john"; console.log(string.replace(/hn/, "ana")); // "joana john" console.log(string.replace(/hn/g, "ana")); // "joana joana"
var array1 = [1,2,3]; var array2 = [4,5,6]; console.log(array1.concat(array2)); // [1,2,3,4,5,6];
將NodeList轉換成數組
如果你運行document.querySelectorAll (“p”)函數時，它可能會回傳DOM元素的數組，也就是NodeList物件。但這個物件不具有陣列的函數功能，例如sort()、reduce()、map()、filter()等。為了讓這些原生的陣列函數功能也能用於其上面，需要將節點列表轉換成陣列。可以使用[].slice.call(elements)來實現：var array1 = [1,2,3]; var array2 = [4,5,6]; console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
數組元素的洗牌
對於數組元素的洗牌，不需要使用任何外部的庫，例如Lodash，只要這樣做：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
現在你學會了些有用的JavaScript小技巧。希望這些小技巧能在工作中幫助你解決一些麻煩，或者說這篇文章對你有幫助。如果你有一些優秀的JavaScript小技巧，歡迎在留言中與我們分享。
