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

1. 使用 !! 將變量轉(zhuǎn)換為布爾值

有時(shí)我們需要檢查一個(gè)變量是否存在或者是否是有效值。為了實(shí)現(xiàn)這個(gè)功能，你可以對(duì)變量應(yīng)用使用 !! 操作符：!!variable，這可以把任何類型的值轉(zhuǎn)換為布爾值，并且只有當(dāng)這個(gè)變量的值為 0 / NULL / " " / NaN 的時(shí)候才會(huì)返回 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

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

2. 使用 + 轉(zhuǎn)換為數(shù)值

這個(gè)非常贊，并且很容易實(shí)現(xiàn)，但它只能作用于字符串?dāng)?shù)值，否則就會(huì)返回 NaN（不是數(shù)字）。我們來(lái)看下面的例子：

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

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

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

3. 減少條件代碼

如果你看到這樣的代碼：

if (conected) {
    login();
}

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

conected && login();

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

user && user.login();

4. 使用 || 設(shè)置默認(rèn)值

現(xiàn)在 ES6 中支持默認(rèn)值參數(shù)。在比較舊的瀏覽器中模擬這一特性，你可以使用 || 操作符，通過將默認(rèn)值設(shè)置為第二個(gè)參數(shù)來(lái)實(shí)現(xiàn)。如果第一個(gè)參數(shù)返回 FALSE，第二個(gè)值將被作為默認(rèn)值，例如：

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

5. 在循環(huán)中緩存 array.length

當(dāng)在循環(huán)中處理很大的數(shù)組時(shí)，這個(gè)小技巧雖然很簡(jiǎn)單，卻會(huì)帶來(lái)巨大的性能提升。通常情況下，基本上所有人都會(huì)這么循環(huán)數(shù)組：

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

如果這是一個(gè)小的數(shù)組那還好，但如果是大數(shù)組，每一次循環(huán)都會(huì)重復(fù)計(jì)算數(shù)組的長(zhǎng)度，所有就會(huì)產(chǎn)生一部分延遲。為了避免這種情況，你應(yīng)當(dāng)把 array.length 緩存到一個(gè)變量中，而不是在循環(huán)中每次計(jì)算 array.length ：

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

更簡(jiǎn)化一些的話，你可以這么寫：

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

6. 檢測(cè)對(duì)象中的屬性

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

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

這時(shí)，如果 document 對(duì)象中不存在 querySelector 方法的話，將使用 document.getElementById() 作為回調(diào)。

7. 獲取數(shù)組中最后的元素

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

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. 數(shù)組截?cái)?/h2>

這個(gè)技巧可以鎖定數(shù)組的長(zhǎng)度，當(dāng)你需要根據(jù)你設(shè)置的元素個(gè)數(shù)來(lái)刪除一些元素時(shí)，這個(gè)方法非常有幫助。比如，當(dāng)數(shù)組中有 10 個(gè)元素，而你只想獲取其中前 5 個(gè)的話，你可以截?cái)鄶?shù)組，通過設(shè)置 array.length = 5 使其更小?？聪旅娴睦樱?/p>

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() 函數(shù)允許使用字符串和正則來(lái)替換字符串，默認(rèn)情況下，它只會(huì)替換第一個(gè)出現(xiàn)的。但你可以通過在正則最后加上 /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"

10. 合并數(shù)組

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

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

然而，這個(gè)函數(shù)并不適用于合并大的數(shù)組，因?yàn)樗枰獎(jiǎng)?chuàng)建一個(gè)新的數(shù)組，而這會(huì)消耗很多內(nèi)存。這時(shí)，你可以使用 Array.push.apply(arr1, arr2) 來(lái)代替創(chuàng)建新的數(shù)組，它可以把第二個(gè)數(shù)組合并到第一個(gè)中，從而較少內(nèi)存消耗：

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

11. 把節(jié)點(diǎn)列表(NodeList)轉(zhuǎn)換為數(shù)組

如果你運(yùn)行 document.querySelectorAll("p") 方法，它可能會(huì)返回一個(gè) DOM 元素的數(shù)組 — 節(jié)點(diǎn)列表對(duì)象。但這個(gè)對(duì)象并不具有數(shù)組的全部方法，如 sort(),reduce(), map(), filter()。為了使用數(shù)組的那些方法，你需要把它轉(zhuǎn)換為數(shù)組。只需使用 [].slice.call(elements) 即可實(shí)現(xiàn)：

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

12. 打亂數(shù)組元素的順序

不適用 Lodash 等這些庫(kù)打亂數(shù)組元素順序，你可以使用這個(gè)技巧：

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

總結(jié)

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

via：jscrambler.com，本文由 Specs 翻譯整理，發(fā)布在 WEB資源網(wǎng)。