12個非常有用的JavaScript技巧

編者按：

現在公眾號有置頂功能了，大家把微信更新到最新版本，點開「大數據實驗室」公眾號。點「置頂公眾號」鍵，就可以置頂了，這樣。不管我們什麼時候更新，您都能容易找到。

在這篇文章中，我將分享12個非常有用的JavaScript技巧。這些技巧可以幫助你減少並優化代碼。

1) 使用!!將變數轉換成布爾類型

有時，我們需要檢查一些變數是否存在，或者它是否具有有效值，從而將它們的值視為true。對於做這樣的檢查，你可以使用||（雙重否定運算符），它能自動將任何類型的數據轉換為布爾值，只有這些變數才會返回false：0，null，""，undefined或NaN，其他的都返回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的值大於零，則account.hasMoney的值就是true。

2) 使用+將變數轉換成數字

這個轉換超級簡單，但它只適用於數字字元串，不然就會返回NaN（不是數字）。看看這個例子：

function toNumber(strNumber) {

return +strNumber;

}

console.log(toNumber("1234")); // 1234

console.log(toNumber("ACB")); // NaN

這個轉換操作也可以作用於Date，在這種情況下，它將返回時間戳：

3) 短路條件

如果你看到過這種類似的代碼:

if (conected) {

login();

}

那麼你可以在這兩個變數之間使用&&（AND運算符）來縮短代碼。例如，前面的代碼可以縮減到一行：

conected && login();

你也可以用這種方法來檢查對象中是否存在某些屬性或函數。類似於以下代碼：

user && user.login();

4) 使用||設置默認值

在ES6中有默認參數這個功能。為了在舊版瀏覽器中模擬此功能，你可以使用||（OR運算符），並把默認值作為它的第二個參數。如果第一個參數返回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

5) 在循環中緩存array.length

這個技巧非常簡單，並且在循環處理大數組時能夠避免對性能造成巨大的影響。基本上幾乎每個人都是這樣使用for來循環遍歷一個數組的：

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) 檢測對象中的屬性

當你需要檢查某些屬性是否存在，避免運行未定義的函數或屬性時，這個技巧非常有用。如果你打算編寫跨瀏覽器代碼，你也可能會用到這個技術。例如，我們假設你需要編寫與舊版Internet Explorer 6兼容的代碼，並且想要使用document.querySelector()來通過ID獲取某些元素。 但是，在現代瀏覽器中，這個函數不存在。所以，要檢查這個函數是否存在，你可以使用in運算符。看下這個例子：

if ( querySelector in document) {

document.querySelector("#id");

} else {

document.getElementById("id");

}

在這種情況下，如果在document中沒有querySelector函數，它就會使用document.getElementById()作為代替。

7) 獲取數組的最後一個元素

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個元素的數組，但是你只想獲得前五個元素，則可以通過設置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()函數允許使用String和Regex來替換字元串，這個函數本身只能替換第一個匹配的串。但是你可以在正則表達式末尾添加/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元素數組，即NodeList對象。但是這個對象並沒有一些屬於數組的函數，例如：sort()，reduce()，map()，filter()。為了啟用這些函數，以及數組的其他的原生函數，你需要將NodeList轉換為數組。要進行轉換，只需使用這個函數：[] .slice.call（elements）：

var elements = document.querySelectorAll("p"); // NodeList

var arrayElements = [].slice.call(elements); // 現在已經轉換成數組了

var arrayElements = Array.from(elements); // 把NodeList轉換成數組的另外一個方法

12) 對數組元素進行洗牌

如果要像外部庫Lodash那樣對數據元素重新洗牌，只需使用這個技巧：

var list = [1, 2, 3];

console.log(list.sort(function() {

return Math.random() - 0.5

})); // [2,1,3]

結論

現在，你已經學到了一些有用的JS技巧，它們主要用於縮減JavaScript代碼量，其中一些技巧在許多流行的JS框架都使用到，如Lodash，Underscore.js，Strings.js等。

原文：12 Extremely Useful Hacks for JavaScript

作者：Caio Ribeiro Pereira

翻譯：雁驚寒

李迅雷（中泰證券首席經濟學家）：2017年宏觀策略布局與展望

陳華良（中泰證券金融市場部總經理）：機構經紀服務升級展望

申毅（上海申毅投資股份有限公司CEO）：智能化革命對證券業的裨益

何波（中泰證券信息技術部副總經理）:XTP——為量化而生

馬永諳(理財魔方創始合伙人):FOF管理在智能投顧中的應用探索

吳旭華(恒生電子私募業務部總經理):i私募數據服務平台對fof業務的支持

張翔(西南財大金融學院金融工程系主任):私募基金基準指數構建與FOF評價

圓桌論壇——主題：FOF資產配置中的量化技術

陸政哲 浙江九章（原幻方量化） 投研部副總經理

李斌 復興資本 董事長

言程序 言起投資管理諮詢有限公司 總經理

池伊華 渤海銀行上海分行 副行長

郭弘仁 歌斐資產管理有限公司 董事總經理

觀看直播費用：100元

直播時間：2017年5月21日 10:00—15:30

重播時間：會議結束後立即開始重播，循環播放至5月22日下午17:30

手機進入直播方式

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！