if...else
語句,那么這是一個很好節省代碼的方式。
Longhand:
const x = 20;let answer;if (x > 10) { answer = 'is greater'; } else { answer = 'is lesser'; }
Shorthand:
const answer = x > 10 ? 'is greater' : 'is lesser';
你還可以像下面這樣嵌套if
語句:
const big = x > 10 ? " greater 10" : x
分配一個變量值到另一個變量的時候,你可能想要確保變量不是null
、undefined
或空。你可以寫一個有多個if
的條件語句或者Short-circuit Evaluation。
Longhand:
if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let variable2 = variable1; }
Shorthand:
const variable2 = variable1 || 'new';
不要相信我,請先相信自己的測試(可以把下面的代碼粘貼在es6console)
let variable1;let variable2 = variable1 || '';console.log(variable2 === ''); // prints truevariable1 = 'foo'; variable2 = variable1 || '';console.log(variable2); // prints foo
在函數中聲明變量時,像下面這樣同時聲明多個變量可以節省你大量的時間和空間:
Longhand:
let x;let y;let x = 3;
Shorthand:
let x, y, z=3;
這可能是微不足道的,但值得提及。做“如果檢查”時,賦值操作符有時可以省略。
Longhand:
if (likeJavaScript === true)
Shorthand:
if (likeJavaScript)
注:這兩種方法并不完全相同,簡寫檢查只要
likeJavaScript
是true
都將通過。
這有另一個示例。如果a
不是true
,然后做什么。
Longhand:
let a;if ( a !== true ) {// do something...}
Shorthand:
let a;if ( !a ) {// do something...}
如果你只想要原生的JavaScript,而不想依賴于jQuery或Lodash這樣的外部庫,那這個小技巧是非常有用的。
Longhand:
for (let i = 0; i < allImgs.length; i++)
Shorthand:
for (let index in allImgs)
Array.forEach
簡寫:
function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element); } [2, 5, 9].forEach(logArrayElements);// logs:// a[0] = 2// a[1] = 5// a[2] = 9
如果參數是null
或者是undefined
,我們可以簡單的使用一個Short-circuit邏輯運算,實現一行代碼替代六行代碼的寫法。
Longhand:
let dbHost;if (process.env.DB_HOST) { dbHost = process.env.DB_HOST; } else { dbHost = 'localhost'; }
Shorthand:
const dbHost = process.env.DB_HOST || 'localhost';
你可能看過這個。它本質上是一個寫數字的奇特寫法,就是一個數字后面有很多個0
。例如1e7
本質相當于10000000
(1
的后面有7
個0
)。它代表了十進制計數等于10000000
。
Longhand:
for (let i = 0; i < 10000; i++) {}
Shorthand:
for (let i = 0; i < 1e7; i++) {} // All the below will evaluate to true1e0 === 1;1e1 === 10;1e2 === 100;1e3 === 1000;1e4 === 10000;1e5 === 100000;
定義對象文字(Object literals)讓JavaScript變得更有趣。ES6提供了一個更簡單的辦法來分配對象的屬性。如果屬性名和值一樣,你可以使用下面簡寫的方式。
Longhand:
const obj = { x:x, y:y };
Shorthand:
const obj = { x, y };
經典函數很容易讀和寫,但它們確實會變得有點冗長,特別是嵌套函數中調用其他函數時還會讓你感到困惑。
Longhand:
function sayHello(name) { console.log('Hello', name); } setTimeout(function() { console.log('Loaded') }, 2000); list.forEach(function(item) { console.log(item); });
Shorthand:
sayHello = name => console.log('Hello', name); setTimeout(() => console.log('Loaded'), 2000); list.forEach(item => console.log(item));
return
在函數中經常使用到的一個關鍵詞,將返回函數的最終結果。箭頭函數用一個語句將隱式的返回結果(函數必須省略{}
,為了省略return
關鍵詞)。
如果返回一個多行語句(比如對象),有必要在函數體內使用()
替代{}
。這樣可以確保代碼是否作為一個單獨的語句返回。
Longhand:
function calcCircumference(diameter) { return Math.PI * diameter }
Shorthand:
calcCircumference = diameter => ( Math.PI * diameter; )
你可以使用if
語句來定義函數參數的默認值。在ES6中,可以在函數聲明中定義默認值。
Longhand:
function volume(l, w, h) { if (w === undefined) w = 3; if (h === undefined) h = 4; return l * w * h; }
Shorthand:
volume = (l, w = 3, h = 4 ) => (l * w * h); volume(2) //output: 24
是不是厭倦了使用+
來連接多個變量變成一個字符串?難道就沒有一個更容易的方法嗎?如果你能使用ES6,那么你是幸運的。在ES6中,你要做的