在文章中，我將分享15 個(gè)關(guān)于JavaScript 的優(yōu)秀技巧。這些技巧或者你可能已經(jīng)掌握了，不過沒有關(guān)系，這個(gè)技巧也不可能適用所有人，我分享的目的是把這些有趣好玩又便捷的技巧讓更多人知道，以及在需要的時(shí)候，可以想到它們。

　　現(xiàn)在，我們一起來看看這些技巧。

　　1.判斷空和未定義

　　我們很快就會(huì)在 JavaScript 中學(xué)到的一件事是，并非一切都像它看起來的那樣，并且在像這樣的動(dòng)態(tài)語言中，變量可能會(huì)以多種方式導(dǎo)致你出現(xiàn)問題。可以進(jìn)行的一個(gè)非常常見的測試是檢查變量是否為空或未定義，甚至“空”，如下例所示：

　　進(jìn)行相同評(píng)估的更簡單方法是：

　　如果你不相信，請(qǐng)測試一下!

　　2.數(shù)組定義

　　所以你必須創(chuàng)建一個(gè) Array 對(duì)象，然后用它的元素填充它，對(duì)吧?你的代碼可能看起來像這樣：

　　在一行中做同樣的事情怎么樣?

　　挺好看的吧!

　　注意：我知道這個(gè)技巧更簡單，但對(duì)我來說很簡單，它可能會(huì)幫助一些從其他編程語言開始的人。

　　3.三元運(yùn)算符

　　著名的“單行 if/else”，三元運(yùn)算符對(duì)于 Java 和 C# 等語言對(duì)于許多程序員來說已經(jīng)是老熟人了。它也存在于 JS 中，并且可以像這樣輕松地轉(zhuǎn)換代碼塊：

　　在這：

　　或者更簡單：

　　let big = x > 10; 但它也適用于函數(shù)調(diào)用嗎?如果我有兩個(gè)不同的函數(shù)，并且我想在 if 為真時(shí)調(diào)用一個(gè)，在 if 為假的情況下調(diào)用一個(gè)，通常你會(huì)執(zhí)行以下操作：

　　但是，你也可以使用三元進(jìn)行相同的函數(shù)調(diào)用：

　　另外，值得一提的是測試變量是否為真的 ifs，一些程序員仍然這樣做：

　　當(dāng)他們可以這樣做時(shí)：

　　4.聲明變量

　　是的，即使是變量的聲明也有其怪癖。雖然這不是一個(gè)秘密，但你仍然會(huì)看到很多程序員做出這樣的聲明：

　　他們什么時(shí)候可以這樣做：

　　5.使用正則表達(dá)式

　　當(dāng)涉及到文本分析和驗(yàn)證以及某些類型的網(wǎng)絡(luò)爬蟲的數(shù)據(jù)提取時(shí)，正則表達(dá)式是創(chuàng)建優(yōu)雅而強(qiáng)大的代碼的好工具。

　　你可以在以下鏈接中了解有關(guān)如何使用正則表達(dá)式的更多信息：

　　https://developer.mozilla.org/enUS/docs/Web/JavaScript/Guide/Regular_Expressions

　　https://regexr.com/

　　https://regex101.com/

　　6.charAt() 快捷鍵

　　你只想從一個(gè)字符串中選擇一個(gè)字符，在一個(gè)特定的位置，對(duì)吧?我敢打賭，你首先想到的是使用 charAt 函數(shù)，如下所示：

　　但是得到這個(gè)，通過記住 String 是一個(gè)字符數(shù)組的類比，你會(huì)得到相同的結(jié)果：

　　7.以 10 為底的冪

　　這只是對(duì) Base-10 指數(shù)數(shù)或充滿零的著名數(shù)字的一種更精簡的表示法。對(duì)于數(shù)學(xué)比較接近的人來說，看到其中一個(gè)不會(huì)太驚訝，但是一個(gè)數(shù)字 10000 在 JS 中可以很容易地被 1e4 替換，即 1 后跟 4 個(gè)零，如下所示：

　　8.模板文字

　　這種語義特性是 ECMAScript 版本 6 或更高版本所獨(dú)有的，并且極大地簡化了讀取變量集中的字符串連接。例如，下面的串聯(lián)：

　　這個(gè)很簡單，你可能做了更糟糕的連接。從 ES6 開始，我們可以使用模板文字進(jìn)行這種連接：

　　9.箭頭函數(shù)

　　箭頭函數(shù)是聲明函數(shù)的縮短方式。是的，自第一個(gè) JavaScript 版本以來，有更多方法可以做同樣的事情。例如，下面是一個(gè)求和函數(shù)：

　　我們也可以像這樣聲明這個(gè)函數(shù)：

　　但是使用箭頭函數(shù)：

　　10.參數(shù)解構(gòu)

　　本技巧適用于那些充滿參數(shù)的函數(shù)，并且你決定用一個(gè)對(duì)象替換所有這些函數(shù)。或者對(duì)于那些真正需要配置對(duì)象作為參數(shù)的函數(shù)。

　　到目前為止都沒有問題，畢竟誰從來沒有經(jīng)歷過這個(gè)?問題是必須繼續(xù)訪問由參數(shù)傳遞的對(duì)象，然后是我們要讀取的每個(gè)屬性，對(duì)吧?像這樣：

　　參數(shù)解構(gòu)特性正是為了簡化這一點(diǎn)，同時(shí)通過用下面的語句替換前面的語句來幫助代碼可讀性：

　　最重要的是，我們?nèi)匀豢梢栽趨?shù)對(duì)象的屬性中添加默認(rèn)值：

　　這樣，s 的值為 1，但 t 的值將默認(rèn)為該屬性，即 20。

　　11.鍵值名稱

　　一個(gè)非常令人上癮的功能是為對(duì)象分配屬性的縮寫方式。想象一下，你有一個(gè) person 對(duì)象，該對(duì)象具有將通過 name 變量分配的 name 屬性。它看起來像這樣：

　　雖然你可以這樣做：

　　也就是說，如果你的變量與屬性同名，則不需要調(diào)用它，只需傳遞變量即可。多個(gè)屬性也是如此：

　　12.Map

　　考慮以下對(duì)象數(shù)組：

　　現(xiàn)在想象一下，我們只想將動(dòng)物的名字添加到另一個(gè)數(shù)組中。通常我們會(huì)這樣做：

　　但是使用 Map，我們可以這樣做：

　　請(qǐng)注意，map 需要一個(gè)最多三個(gè)參數(shù)的函數(shù)：

　　第一個(gè)是當(dāng)前對(duì)象(如在 foreach 中)

　　第二個(gè)是當(dāng)前迭代的索引

　　第三個(gè)是整個(gè)數(shù)組

　　顯然，這個(gè)函數(shù)將為動(dòng)物數(shù)組中的每個(gè)對(duì)象調(diào)用一次。

　　13.Filter

　　如果我們想遍歷與上一個(gè)技巧中相同的動(dòng)物對(duì)象數(shù)組，但這次只返回那些大小為“小”的對(duì)象怎么辦?

　　我們將如何使用常規(guī) JS 來做到這一點(diǎn)?

　　然而，使用過filter操作符，我們可以用一種更簡潔、更清晰的方式來做到這一點(diǎn)：

　　Filter 期望一個(gè)函數(shù)的參數(shù)是當(dāng)前迭代的對(duì)象(如在 foreach 中)，它應(yīng)該返回一個(gè)布爾值，指示該對(duì)象是否將成為返回?cái)?shù)組的一部分(true 表示它通過了測試 并將成為其中的一部分)。

　　14.Reduce

　　Javascript 的另一個(gè)重要特性是 reduce。它允許我們以非常簡單和強(qiáng)大的方式在集合之上進(jìn)行分組和計(jì)算。例如，如果我們想將動(dòng)物對(duì)象數(shù)組中所有動(dòng)物的重量相加，我們會(huì)怎么做?

　　但是使用 reduce 我們可以這樣做：

　　Reduce 需要一個(gè)帶有以下參數(shù)的函數(shù)：

　　第一個(gè)是累加器變量的當(dāng)前值(在所有迭代結(jié)束時(shí)，它將包含最終值)

　　第二個(gè)參數(shù)是當(dāng)前迭代的對(duì)象

　　第三個(gè)參數(shù)是當(dāng)前迭代的索引

　　第四個(gè)參數(shù)是將要迭代的所有對(duì)象的數(shù)組

　　此函數(shù)將對(duì)數(shù)組中的每個(gè)對(duì)象執(zhí)行一次，并在其執(zhí)行結(jié)束時(shí)返回聚合值。