英文 | https://betterprogramming.pub/10-javascript-snippets-for-cleaner-looking-code-76f6e2cf6fc4
翻譯 | 小愛
我已經為所有JavaScript程式員收集了一些最酷，最有用的速記代碼清單。使用這些代碼清單，可以使你的代碼看起來更專業。
1、單行If-Else語句
你可能熟悉這樣的正常if-else語句：
if (10 < 100) {
console.log("True");
} else {
console.log("False");
} 輸出
True 但是，你知道嗎，你可以通過使用三元運算符，以更短，更簡潔的方式編寫上面的代碼？
10 <100 ？console.log（“True”）：console.log（“False”） 輸出：
True 通常，三元運算符遵循以下簡單模式：
condition ? trueExpression : falseExpression 三元運算符也可以連結在一起以形成更長的鍊。但是，它通常會使代碼變得很冗長。明智地使用它們，不會使事情變得更複雜。
2、合并數組
你可以使用傳播運算符（...）将一個數組的元素擴充為另一個數組，例如：
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、從陣列中删除重複項
const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); 輸出：
[1, 20, 3, 9] 4、将任何内容轉換為布爾值
除了true和false之外，JavaScript還将其他類型視為真或假。
- 0，""，null，undefined，NaN，和false總是假 。
- 其他一切都是真實的。
正因為如此，在JavaScript中，你可以将任何值轉換為true和false與一進制運算符（!）：
const bool1 = !0; // true
const bool2 = !100; // false
const bool3 = !"test"; // false
const bool4 = !!"test"; // true
console.log(bool1, bool2, bool3, bool4); 輸出：
true false false true 5、交換兩個變量而沒有第三個
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y); 輸出：
2 1 6、将數字轉換為字元串
const num = 1 +“”;
console.log（typeof num）;
console.log（num）; 輸出：
string
1 7、将字元串轉換為數字
const numStr = "124";
const num = +numStr;
console.log(typeof num);
console.log(num); 輸出：
number
84 8、将變量嵌入到字元串
通過使用反引号（`）将字元串括起來并将變量插入之間，将變量整齊地嵌入到字元串之間${}：
const age = 41;
const sentence = `I'm ${age} years old`;
console.log(sentence); 輸出：
I'm 41 years old 9、将字元串拆分為數組
要将字元串拆分為數組，可以使用擴充運算符（...）：
const str = "Test"
const strAsArr = [...str]
console.log(strAsArr) 輸出：
["T", "e", "s", "t"] 10、可選連結
“可選的連結運算符（?.）允許讀取位于連接配接對象鍊深處的屬性的值，而不必明确驗證鍊中的每個引用是否有效。” — MDN Web文檔
假設你有一個data對象，并且想要安全地通路data.test.value。首先，你需要檢查：
- data 是否被定義。
- data.test 是否被定義。
在data.test.value，你可以調用之前，因為，你顯然無法讀取undefined屬性。
const data = {test：{value：1}}
if（data && data.test）{
console.log（data.test.value）;
} 輸出：
1 幸運的是，使用可選連結的方法，你可以簡單明了地編寫上面的代碼：
const value = data?.test?.value;
console.log(value) 輸出：
1 現在，你還可以安全地嘗試通路不存在的屬性，而不會出現問題：
console.log(data?.this?.does?.not?.exist?.for?.sure) 輸出：
undefined 加餐：提高JSON的可讀性
我确定你以前用過JSON.stringify()。但是，你可能不使用它的一種方法是對JSON資料進行整齊縮進。
讓我們看看如何完成此任務。該JSON.stringify()方法接受兩個可選參數：
- 替換功能，用于過濾顯示的JSON。在這種情況下，可以是null，因為我們不需要它。
- 一個空格值，可以是所需空格的數目或字元串。在這種情況下，讓我們使用制表符（'\t'）縮進JSON對象以使其看起來不錯：
const readableJSON = JSON.stringify({ a: 'A', b: 'B' }, null, '\t');
console.log(readableJSON); 輸出：
{
"a": "A",
"b": "B"
} 結論
我希望，我今天分享的這些技巧對你有用。如你還有什麼問題，你可以在留言區與我一起分享探讨，同時，你如果還有其他好的方法，你也可以分享出來，一起學習進步。
感謝閱讀。
學習更多技能
請點選下方公衆号
![Ajax——模闆引擎[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)