原文 | https://levelup.gitconnected.com/handy-javascript-shorthands-9ad9cc76d06d
翻譯 | 楊小二
在最新版的JavaScript 中，JavaScript 語言引入了更多的有用文法。在本文中，我将介紹幾個在JavaScript新舊版本中易于閱讀的技巧。我們将從三元運算符、聲明多個變量、箭頭函數、預設參數值等方面開始。
1、三元運算符
我們可以使用三元運算符以簡潔的方式編寫 if...else 語句。
而不是寫：
const x = 20;
let grade;
if (x >= 50) {
grade = "pass";
} else {
grade = "fail";
} 我們可以寫：
const x = 20;
let grade = (x >= 50) ? "pass" : "fail"; 他們都檢查 x 是否大于或等于 50，然後配置設定字元串 'pass' 如果為真，否則為假。
我們還可以使用三元運算符編寫嵌套的 if 語句，如下所示：
const x = 20;
let grade = (x >= 50) ? "pass" : (x >= 25) ? "good fail" : 'bad fail'; 這與下面代碼一樣：
const x = 20;
let grade;
if (x >= 50) {
grade = "pass";
} else {
if (x >= 25) {
grade = "good fail";
} else {
grade = "bad fail";
}
} 2、設定預設值
如果變量為假，我們可以通過編寫以下内容來設定預設值：
let x;
let y = x || 10; 這與下面代碼一樣：
let x;
let y;
if (x === undefined || x === null || x === 0 || x === '' || isNaN(x)) {
y = 10;
} 因為 x || 10 表示如果 x 為假，即 x 為 undefined、null、0、空字元串或 NaN，那麼我們将 10 指派給 y，這與：
if (x === undefined || x === null || x === 0 || x === '' || isNaN(x)) {
y = 10;
} 3、聲明多個變量的簡寫
我們可以通過編寫來聲明多個變量：
let x = y = z = 5; 這與下面代碼一樣：
let x = 5;
let y = 5;
let z = 5; 它的工作原理是，首先将 5 配置設定給 z，然後将 z 的值配置設定給 y，最後将 y 的值配置設定給 x 。
4、If Truthy
檢查某些東西是否為真的JavaScript簡寫，它不是 undefined、null、0、空字元串或 NaN，如下所示：
if (x){
console.log('x is truthy')
} 上面的代碼檢查 x 是否為真，如果是，則執行 console.log。
5、For...Of 循環簡寫
從 ES6 開始，我們可以使用 for...of 循環來周遊數組或類數組對象中的變量，其中包括 Maps、Sets、參數對象、生成器、疊代器以及任何帶有 [Symbol.iterator]方法。
我們可以寫：
let fruits = ['apple', 'orange', 'grape'];
for (let fruit of fruits) {
console.log(fruit);
} 這比使用帶有索引的正常 for 循環更幹淨，并且它也适用于其他可疊代對象。例如，我們可以将它與生成器一起使用：
let fruits = function*() {
yield 'apple';
yield 'orange';
yield 'fruits';
}
for (let fruit of fruits()) {
console.log(fruit);
} 5、Array.forEach
我們可以使用 Array.forEach 方法來周遊數組，盡管它比循環慢。
要使用它，我們可以編寫如下代碼：
let fruits = ['apple', 'orange', 'grape'];
fruits.forEach((fruit, index) => console.log(fruit)); 6、十進制底指數
我們可以指定指數，而不是寫出帶有所有尾随零的整數。
例如，如果我們有：
1e0 為1
1e1 10
1e2 100
1e3 為 1000 等。
7、數字分隔符
最新的浏覽器允許我們使用下劃線來分隔數字，以便于閱讀。例如，我們可以寫：
100_000_000 一億，下劃線可以放在我們選擇的任何地方。
8、對象屬性簡寫
而不是寫：
const foo = 1,
bar = 2;
const obj = {
foo: foo,
bar: bar
}; 我們可以寫：
const foo = 1,
bar = 2;
const obj = {
foo,
bar
}; 兩段代碼完全一樣。
9、箭頭函數
如果箭頭函數隻有一行，那麼我們就不需要大括号，我們可以在不使用 return 關鍵字的情況下從它傳回一個值。
例如：
() => 1 與下面代碼是相同的：
() => {
return 1
} 如果我們不關心 this 的值，我們可以使用箭頭函數，因為箭頭函數不會改變函數内部的 this 值。
10、預設參數值
我們可以在 ES6 中指定預設參數值。例如，我們可以這樣寫：
const add = (a = 1, b = 2) => {
return a + b
} 這與下面代碼一樣：
const add = (a, b) => {
if (typeof a === 'undefined') {
a = 1;
}
if (typeof b === 'undefined') {
b = 1;
}
return a + b
} 上面的技巧大多來自 ES6。這個版本的 JavaScript 提供了許多快捷的方式方法，可以讓我們更輕松地編寫代碼和閱讀。
for...of 循環非常有用，因為它可以周遊數組和類似數組的對象。沒有其他循環可以做到這一點。
數字分隔符較新，僅在最新浏覽器中可用。
最後，感謝你的閱讀。
學習更多技能
請點選下方公衆号
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)