10個你不能錯過的JavaScript技巧
原文 | https://levelup.gitconnected.com/handy-javascript-shorthands-9ad9cc76d06d
翻譯 | 楊小二
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' 如果為真，否則為假。
我們還可以使用三元運(yùn)算符編寫嵌套的 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、設(shè)置默認(rèn)值
如果變量為假，我們可以通過編寫以下內(nèi)容來設(shè)置默認(rèn)值：
let x;let y = x || 10;
這與下面代碼一樣：
let x;let y;if (x === undefined || x === null || x === 0 || x === '' || isNaN(x)) {y = 10;}
因?yàn)?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 是否為真，如果是，則執(zhí)行 console.log。
5、For...Of 循環(huán)簡寫
從 ES6 開始，我們可以使用 for...of 循環(huán)來遍歷數(shù)組或類數(shù)組對象中的變量，其中包括 Maps、Sets、參數(shù)對象、生成器、迭代器以及任何帶有 [Symbol.iterator]方法。
我們可以寫：
let fruits = ['apple', 'orange', 'grape'];for (let fruit of fruits) {console.log(fruit);}
這比使用帶有索引的常規(guī) for 循環(huán)更干凈，并且它也適用于其他可迭代對象。例如，我們可以將它與生成器一起使用：
let fruits = function*() {yield 'apple';yield 'orange';yield 'fruits';}for (let fruit of fruits()) {console.log(fruit);}
5、Array.forEach
我們可以使用 Array.forEach 方法來遍歷數(shù)組，盡管它比循環(huán)慢。
要使用它，我們可以編寫如下代碼：
let fruits = ['apple', 'orange', 'grape'];fruits.forEach((fruit, index) => console.log(fruit));
6、十進(jìn)制底指數(shù)
我們可以指定指數(shù)，而不是寫出帶有所有尾隨零的整數(shù)。
例如，如果我們有：
1e0為1
1e110
1e2100
1e3為 1000 等。
7、數(shù)字分隔符
最新的瀏覽器允許我們使用下劃線來分隔數(shù)字，以便于閱讀。例如，我們可以寫：
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、箭頭函數(shù)
如果箭頭函數(shù)只有一行，那么我們就不需要大括號，我們可以在不使用 return 關(guān)鍵字的情況下從它返回一個值。
例如：
() => 1與下面代碼是相同的：
() => {return 1}
如果我們不關(guān)心 this 的值，我們可以使用箭頭函數(shù)，因?yàn)榧^函數(shù)不會改變函數(shù)內(nèi)部的 this 值。
10、默認(rèn)參數(shù)值
我們可以在 ES6 中指定默認(rèn)參數(shù)值。例如，我們可以這樣寫：
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 循環(huán)非常有用，因?yàn)樗梢员闅v數(shù)組和類似數(shù)組的對象。沒有其他循環(huán)可以做到這一點(diǎn)。
數(shù)字分隔符較新，僅在最新瀏覽器中可用。
最后，感謝你的閱讀。
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號
