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中,你要做的