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

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

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

　　1.判斷空和未定義

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

　　let username;

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

　　userName = name;

　　} else {

　　userName = "";

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

　　let userName = name || "";

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

　　2.數(shù)組定義

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

　　let a = new Array();

　　a[0] = "s1";

　　a[1] = "s2";

　　a[2] = "s3";

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

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

　　挺好看的吧!

　　注意：我知道這個(gè)技巧更簡(jiǎn)單，但對(duì)我來(lái)說(shuō)很簡(jiǎn)單，它可能會(huì)幫助一些從其他編程語(yǔ)言開(kāi)始的人。

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

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

　　let big;

　　if (x > 10) {

　　big = true;

　　}

　　else {

　　big = false;

　　}

　　在這：

　　let big = x > 10 ? true : false;

　　或者更簡(jiǎn)單：

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

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

　　if (likeJs === true)

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

　　if (likeJs)

　　4.聲明變量

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

　　let x;

　　let y;

　　let z = 3;

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

　　let x, y, z = 3;

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

　　當(dāng)涉及到文本分析和驗(yàn)證以及某些類(lèi)型的網(wǎng)絡(luò)爬蟲(chóng)的數(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ù)，如下所示：

　　"string".charAt(0);

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

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

　　7.以 10 為底的冪

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

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

　　8.模板文字

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

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

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

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

　　9.箭頭函數(shù)

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

　　function sum(n1,n2){

　　return n1 + n2;

　　}

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

　　const sum = function(n1,n2){

　　return n1+n2;

　　}

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

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

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

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

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

　　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)特性正是為了簡(jiǎn)化這一點(diǎn)，同時(shí)通過(guò)用下面的語(yǔ)句替換前面的語(yǔ)句來(lái)幫助代碼可讀性：

　　function init({s, t}){

　　return s + t;

　　}

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

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

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

　　return s + t;

　　}

　　init({s: 1});

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

　　11.鍵值名稱(chēng)

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

　　const name = "Joseph"

　　const person = { name: name }

　　// { name: "Joseph" }

　　雖然你可以這樣做：

　　const name = "Joseph"

　　const person = { name }

　　// { name: "Joseph" }

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

　　const name = "Joseph"

　　const canCode = true

　　const person = { name, canCode }

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

　　12.Map

　　考慮以下對(duì)象數(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)在想象一下，我們只想將動(dòng)物的名字添加到另一個(gè)數(shù)組中。通常我們會(huì)這樣做：

　　let animalNames = [];

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

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

　　}

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

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

　　return animal.nome;

　　})

　　請(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 來(lái)做到這一點(diǎn)?

　　let smallAnimals = [];

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

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

　　smallAnimals.push(animals[i])

　　}

　　}

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

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

　　return animal.size === "small"

　　})

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

　　14.Reduce

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

　　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 需要一個(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í)返回聚合值。

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

　　End -