劈柴不照紋，累死劈柴人。上學(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)題。可以進(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ù)或充滿零的著名數(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)
本技巧適用于那些充滿參數(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ù)訪問(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 -
京公網(wǎng)安備 11010802030320號(hào)