12 個非常有用的 JavaScript Hacks

http://webres.wang/12-extremely-useful-hacks-for-javascript/

本文為大家分享 12 個非常有用的 JavaScript Hacks。這些代碼可以減少代碼量，并幫你寫出優秀的代碼。下面就讓我們開始吧。

1. 使用?!!?將變量轉換為布爾值

有時我們需要檢查一個變量是否存在或者是否是有效值。為了實現這個功能，你可以對變量應用使用?!!?操作符：!!variable，這可以把任何類型的值轉換為布爾值，并且只有當這個變量的值為?0?/?NULL?/ ?" "?/?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); // truevar emptyAccount = new Account(0); console.log(emptyAccount.cash); // 0 console.log(emptyAccount.hasMoney); // false

這個例子中，只要?account.cash?的值大于?0?，account.hasMoney?就將為?TRUE。

2. 使用?+?轉換為數值

這個非常贊，并且很容易實現，但它只能作用于字符串數值，否則就會返回?NaN（不是數字）。我們來看下面的例子：

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

并且此方法也可作用于 Date 函數，這是它將返回時間戳：

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

3. 減少條件代碼

如果你看到這樣的代碼：

if (conected) {login(); }

你可以通過使用?&&?操作符組合兩個變量來縮短它。比如前面這段代碼可以縮短為：

conected && login();

你也可以用這種方法檢測一個類中的屬性或者方法是否存在。類似的代碼：

user && user.login();

4. 使用?||?設置默認值

現在 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); // 27var user2 = new User("Barry Allen", 25); console.log(user2.name); // Barry Allen console.log(user2.age); // 25

5. 在循環中緩存?array.length

當在循環中處理很大的數組時，這個小技巧雖然很簡單，卻會帶來巨大的性能提升。通常情況下，基本上所有人都會這么循環數組：

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

如果這是一個小的數組那還好，但如果是大數組，每一次循環都會重復計算數組的長度，所有就會產生一部分延遲。為了避免這種情況，你應當把?array.length?緩存到一個變量中，而不是在循環中每次計算?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]); }

6. 檢測對象中的屬性

當你需要檢測屬性是否存在時，這個技巧非常有用，它可以避免運行未定義的方法或者屬性。如果你計劃編寫跨瀏覽器的代碼，你可能也需要此技能。例如，假設你需要編寫兼容 IE6 的代碼，并且想使用?document.querySelector() 根據它們的 ID 來獲取元素。然而，在這個瀏覽器中此方法并不存在，所以你可以使用 in 操作符來檢測其存在性，例如：

if ('querySelector' in document) {document.querySelector("#id"); } else {document.getElementById("id"); }

這時，如果?document?對象中不存在?querySelector?方法的話，將使用?document.getElementById()?作為回調。

7. 獲取數組中最后的元素

當你設置了?begin?和?end?兩個參數的時候，Array.prototype.slice(begin, end)方法可以剪切數組。但當你不設置?end?參數時，該函數將自動把它設置為數組的最大值。我想很多人可能不知道該函數可以接受負的參數。如果你設置一個負值的話，該函數將得到數組后面的元素：

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]

8. 數組截斷

這個技巧可以鎖定數組的長度，當你需要根據你設置的元素個數來刪除一些元素時，這個方法非常有幫助。比如，當數組中有 10 個元素，而你只想獲取其中前 5 個的話，你可以截斷數組，通過設置?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]

9. 全部替換

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"

10. 合并數組

如果你需要合并兩個數組的話，可以使用?Array.concat()：

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

然而，這個函數并不適用于合并大的數組，因為它需要創建一個新的數組，而這會消耗很多內存。這時，你可以使用?Array.push.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];

11. 把節點列表(NodeList)轉換為數組

如果你運行?document.querySelectorAll("p")?方法，它可能會返回一個 DOM 元素的數組 — 節點列表對象。但這個對象并不具有數組的全部方法，如?sort(),reduce(),?map(),?filter()。為了使用數組的那些方法，你需要把它轉換為數組。只需使用?[].slice.call(elements)?即可實現：

var elements = document.querySelectorAll("p"); // NodeList var arrayElements = [].slice.call(elements); // 現在 NodeList 是一個數組 var arrayElements = Array.from(elements); // 這是另一種轉換 NodeList 到 Array 的方法

12. 打亂數組元素的順序

不適用?Lodash?等這些庫打亂數組元素順序，你可以使用這個技巧：

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

總結

現在你已經學到了一些可以減少代碼量的 Hacks，其中一些出現在類似于?Lodash、Underscore.js、Strings.js 等的 JS 框架中。如果你想學習的更深入，并且想更加的減小代碼量，可以持續的關注我們。我希望你喜歡這篇文章，如果你有其他 JS 的技巧，可以在留言中與我們分享。

via：jscrambler.com，本文由?Specs?翻譯整理，發布在?WEB資源網，未經允許，不得轉載。

?

總結

以上是生活随笔為你收集整理的12 个非常有用的 JavaScript Hacks的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。