我已經(jīng)為所有JavaScript程序員收集了一些最酷，最有用的速記代碼清單。使用這些代碼清單，可以使你的代碼看起來(lái)更專業(yè)。

1、單行If-Else語(yǔ)句

你可能熟悉這樣的常規(guī)if-else語(yǔ)句：

if?(10?100)?{??console.log("True");}?else?{??console.log("False");}

輸出

True

但是，你知道嗎，你可以通過(guò)使用三元運(yùn)算符，以更短，更簡(jiǎn)潔的方式編寫(xiě)上面的代碼？

10?<100?？console.log（“True”）：console.log（“False”）

輸出：

True

通常，三元運(yùn)算符遵循以下簡(jiǎn)單模式：

condition ? trueExpression : falseExpression

三元運(yùn)算符也可以鏈接在一起以形成更長(zhǎng)的鏈。但是，它通常會(huì)使代碼變得很冗長(zhǎng)。明智地使用它們，不會(huì)使事情變得更復(fù)雜。

2、合并數(shù)組

你可以使用傳播運(yùn)算符（...）將一個(gè)數(shù)組的元素?cái)U(kuò)展為另一個(gè)數(shù)組，例如：

const?numbers?=?[10,?20,?30,?40];const?allNumbers?=?[...numbers,?50,?60,?70,?80];console.log(allNumbers);

輸出：

[10,?20,?30,?40,?50,?60,?70,?80]

3、從陣列中刪除重復(fù)項(xiàng)

const?numbers?=?[1,?1,?20,?3,?3,?3,?9,?9];const?uniqueNumbers?=?[...new?Set(numbers)];console.log(uniqueNumbers);

輸出：

[1,?20,?3,?9]

4、將任何內(nèi)容轉(zhuǎn)換為布爾值

除了true和false之外，JavaScript還將其他類(lèi)型視為真或假。

• 0，""，null，undefined，NaN，和false總是假?。

• 其他一切都是真實(shí)的。

正因?yàn)槿绱耍贘avaScript中，你可以將任何值轉(zhuǎn)換為true和false與一元運(yùn)算符（!）：

const?bool1?=?!0;????????//?trueconst?bool2?=?!100;??????//?falseconst?bool3?=?!"test";???//?falseconst?bool4?=?!!"test";??//?trueconsole.log(bool1,?bool2,?bool3,?bool4);

輸出：

true?false?false?true

5、交換兩個(gè)變量而沒(méi)有第三個(gè)

let?x?=?1;let?y?=?2;[x,?y]?=?[y,?x];console.log(x,?y);

輸出：

2 1

6、將數(shù)字轉(zhuǎn)換為字符串

const?num?=?1?+“”;console.log（typeof?num）;?console.log（num）;

輸出：

string1

7、將字符串轉(zhuǎn)換為數(shù)字

const?numStr?=?"124";const?num?=?+numStr;console.log(typeof?num);console.log(num);

輸出：

number?124

8、將變量嵌入到字符串

通過(guò)使用反引號(hào)（`）將字符串括起來(lái)并將變量插入之間，將變量整齊地嵌入到字符串之間${}：

const?age?=?41;const?sentence?=?`I'm?${age}?years?old`;console.log(sentence);

輸出：

I'm?41?years?old

9、將字符串拆分為數(shù)組

要將字符串拆分為數(shù)組，可以使用擴(kuò)展運(yùn)算符（...）：

const?str?=?"Test"const?strAsArr?=?[...str]console.log(strAsArr)

輸出：

["T",?"e",?"s",?"t"]

10、可選鏈接

“可選的鏈接運(yùn)算符（?.）允許讀取位于連接對(duì)象鏈深處的屬性的值，而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效。”?— MDN Web文檔

假設(shè)你有一個(gè)data對(duì)象，并且想要安全地訪問(wèn)data.test.value。首先，你需要檢查：

• data 是否被定義。

• data.test 是否被定義。

在data.test.value，你可以調(diào)用之前，因?yàn)椋泔@然無(wú)法讀取undefined屬性。

const?data?=?{test：{value：1}}if（data?&&?data.test）{???console.log（data.test.value）;?}

輸出：

1

幸運(yùn)的是，使用可選鏈接的方法，你可以簡(jiǎn)單明了地編寫(xiě)上面的代碼：

const?value?=?data?.test?.value;console.log(value)

輸出：

1

現(xiàn)在，你還可以安全地嘗試訪問(wèn)不存在的屬性，而不會(huì)出現(xiàn)問(wèn)題：

console.log(data?.this?.does?.not?.exist?.for?.sure)

輸出：

undefined

加餐：提高JSON的可讀性

我確定你以前用過(guò)JSON.stringify()。但是，你可能不使用它的一種方法是對(duì)JSON數(shù)據(jù)進(jìn)行整齊縮進(jìn)。

讓我們看看如何完成此任務(wù)。該JSON.stringify()方法接受兩個(gè)可選參數(shù)：

• 替換功能，用于過(guò)濾顯示的JSON。在這種情況下，可以是null，因?yàn)槲覀儾恍枰?/p>

• 一個(gè)空格值，可以是所需空格的數(shù)目或字符串。在這種情況下，讓我們使用制表符（'\t'）縮進(jìn)JSON對(duì)象以使其看起來(lái)不錯(cuò)：

const?readableJSON?=?JSON.stringify({?a:?'A',?b:?'B'?},?null,?'\t');console.log(readableJSON);

輸出：

{??????"a":?"A",??????"b":?"B"}

結(jié)論

我希望，我今天分享的這些技巧對(duì)你有用。如你還有什么問(wèn)題，你可以在留言區(qū)與我一起分享探討，同時(shí)，你如果還有其他好的方法，你也可以分享出來(lái)，一起學(xué)習(xí)進(jìn)步。

感謝閱讀。

作者：web前端開(kāi)發(fā)https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/115774671

回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~

點(diǎn)擊“閱讀原文”查看 120+ 篇原創(chuàng)文章