劈柴不照紋，累死劈柴人。上學(xué)的時候就總有那些“小怪物們”總能解出來難題， 總能最快的完成作業(yè)，總能輕松考個的好成績，還不耽誤下課一起玩。怎么回事兒?人家有技巧啊!那現(xiàn)在干開發(fā)了，你想不想成為“小怪物”?來，我給你介紹!

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

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

　　1.判斷空和未定義

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

　　let username;

　　if (name !== null || name !== undefined || name !== '') {

　　userName = name;

　　} else {

　　userName = "";

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

　　let userName = name || "";

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

　　2.數(shù)組定義

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

　　let a = new Array();

　　a[0] = "s1";

　　a[1] = "s2";

　　a[2] = "s3";

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

　　let a = ["s1", "s2", "s3"]

　　挺好看的吧!

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

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

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

　　let big;

　　if (x > 10) {

　　big = true;

　　}

　　else {

　　big = false;

　　}

　　在這：

　　let big = x > 10 ? true : false;

　　或者更簡單：

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

　　function x() { console.log('x') };

　　function y() { console.log('y') };

　　let z = 3;

　　if (z == 3) {

　　x();

　　} else {

　　y();

　　}

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

　　function x() { console.log('x') };

　　function y() { console.log('y') };

　　let z = 3;

　　(z==3 ? x : y)(); // Shortcut

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

　　if (likeJs === true)

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

　　if (likeJs)

　　4.聲明變量

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

　　let x;

　　let y;

　　let z = 3;

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

　　let x, y, z = 3;

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

　　當(dāng)涉及到文本分析和驗(yàn)證以及某些類型的網(wǎng)絡(luò)爬蟲的數(shù)據(jù)提取時，正則表達(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() 快捷鍵

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

　　"string".charAt(0);

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

　　"string"[0]; // Returns 's'

　　7.以 10 為底的冪

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

　　for (let i = 0; i < 1e4; i++) {

　　8.模板文字

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

　　const question = “My number is “ + number + “, ok?”

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

　　const question = `My number is ${number}, ok?`

　　9.箭頭函數(shù)

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

　　function sum(n1,n2){

　　return n1 + n2;

　　}

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

　　const sum = function(n1,n2){

　　return n1+n2;

　　}

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

　　const sum = (n1,n2) => n1 + n2;

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

　　本技巧適用于那些充滿參數(shù)的函數(shù)，并且你決定用一個對象替換所有這些函數(shù)?；蛘邔τ谀切┱嬲枰渲脤ο笞鳛閰?shù)的函數(shù)。

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

　　function init(config){

　　const s = config.s;

　　const t = config.t;

　　return s + t;// or config.s + config.t

　　}

　　init({s: "1", t: "2"});

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

　　function init({s, t}){

　　return s + t;

　　}

　　init({s: 1, t: 2});

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

　　function init({s = 10, t = 20}){

　　return s + t;

　　}

　　init({s: 1});

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

　　11.鍵值名稱

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

　　const name = "Joseph"

　　const person = { name: name }

　　// { name: "Joseph" }

　　雖然你可以這樣做：

　　const name = "Joseph"

　　const person = { name }

　　// { name: "Joseph" }

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

　　const name = "Joseph"

　　const canCode = true

　　const person = { name, canCode }

　　// { name: "Joseph", canCode: true }

　　12.Map

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

　　const animals = [

　　{

　　"name": "cat",

　　"size": "small",

　　"weight": 5

　　},

　　{

　　"name": "dog",

　　"size": "small",

　　"weight": 10

　　},

　　{

　　"name": "lion",

　　"size": "medium",

　　"weight": 150

　　},

　　{

　　"name": "elefante",

　　"size": "large",

　　"weight": 5000

　　}

　　]

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

　　let animalNames = [];

　　for (let i = 0; i < animals.length; i++) {

　　animalNames.push(animals[i].name);

　　}

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

　　let animalNames = animais.map((animal) => {

　　return animal.nome;

　　})

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

　　· 第一個是當(dāng)前對象(如在 foreach 中)

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

　　· 第三個是整個數(shù)組

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

　　13.Filter

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

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

　　let smallAnimals = [];

　　for (let i = 0; i < animals.length; i ++) {

　　if (animals[i].size === "small") {

　　smallAnimals.push(animals[i])

　　}

　　}

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

　　let smallAnimals = animais.filter((animal) => {

　　return animal.size === "small"

　　})

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

　　14.Reduce

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

　　let totalWeight = 0;

　　for (let i = 0; i < animals.length; i++) {

　　totalWeight += animals[i].weight;

　　}

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

　　let totalWeight = animals.reduce((total, animal) => {

　　return total += animal.weight;

　　}, 0)

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

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

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

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

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

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

　　有了這些技巧，讓你的開發(fā)事半功倍，不加班，不熬夜，不脫發(fā)。再也不是夢!

　　End -