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

　　現在，我們一起來看看這些技巧。

　　1.判斷空和未定義

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

　　進行相同評估的更簡單方法是：

　　如果你不相信，請測試一下!

　　2.數組定義

　　所以你必須創建一個 Array 對象，然后用它的元素填充它，對吧?你的代碼可能看起來像這樣：

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

　　挺好看的吧!

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

　　3.三元運算符

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

　　在這：

　　或者更簡單：

　　let big = x > 10; 但它也適用于函數調用嗎?如果我有兩個不同的函數，并且我想在 if 為真時調用一個，在 if 為假的情況下調用一個，通常你會執行以下操作：

　　但是，你也可以使用三元進行相同的函數調用：

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

　　當他們可以這樣做時：

　　4.聲明變量

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

　　他們什么時候可以這樣做：

　　5.使用正則表達式

　　當涉及到文本分析和驗證以及某些類型的網絡爬蟲的數據提取時，正則表達式是創建優雅而強大的代碼的好工具。

　　你可以在以下鏈接中了解有關如何使用正則表達式的更多信息：

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

　　https://regexr.com/

　　https://regex101.com/

　　6.charAt() 快捷鍵

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

　　但是得到這個，通過記住 String 是一個字符數組的類比，你會得到相同的結果：

　　7.以 10 為底的冪

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

　　8.模板文字

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

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

　　9.箭頭函數

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

　　我們也可以像這樣聲明這個函數：

　　但是使用箭頭函數：

　　10.參數解構

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

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

　　參數解構特性正是為了簡化這一點，同時通過用下面的語句替換前面的語句來幫助代碼可讀性：

　　最重要的是，我們仍然可以在參數對象的屬性中添加默認值：

　　這樣，s 的值為 1，但 t 的值將默認為該屬性，即 20。

　　11.鍵值名稱

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

　　雖然你可以這樣做：

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

　　12.Map

　　考慮以下對象數組：

　　現在想象一下，我們只想將動物的名字添加到另一個數組中。通常我們會這樣做：

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

　　請注意，map 需要一個最多三個參數的函數：

　　第一個是當前對象(如在 foreach 中)

　　第二個是當前迭代的索引

　　第三個是整個數組

　　顯然，這個函數將為動物數組中的每個對象調用一次。

　　13.Filter

　　如果我們想遍歷與上一個技巧中相同的動物對象數組，但這次只返回那些大小為“小”的對象怎么辦?

　　我們將如何使用常規 JS 來做到這一點?

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

　　Filter 期望一個函數的參數是當前迭代的對象(如在 foreach 中)，它應該返回一個布爾值，指示該對象是否將成為返回數組的一部分(true 表示它通過了測試 并將成為其中的一部分)。

　　14.Reduce

　　Javascript 的另一個重要特性是 reduce。它允許我們以非常簡單和強大的方式在集合之上進行分組和計算。例如，如果我們想將動物對象數組中所有動物的重量相加，我們會怎么做?

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

　　Reduce 需要一個帶有以下參數的函數：

　　第一個是累加器變量的當前值(在所有迭代結束時，它將包含最終值)

　　第二個參數是當前迭代的對象

　　第三個參數是當前迭代的索引

　　第四個參數是將要迭代的所有對象的數組

　　此函數將對數組中的每個對象執行一次，并在其執行結束時返回聚合值。