在函数中声明变量时,像下面这样同时声明多个变量可以节省你大量的时间和空间:

Longhand:

Shorthand:

如果存在

这可能是微不足道的,但值得提及。做“如果检查”时,赋值操作符有时可以省略。

Longhand:

Shorthand:

注:这两种方法并不完全相同,简写检查只要likeJavaScript是true都将通过。

这有另一个示例。如果a不是true,然后做什么。

Longhand:

Shorthand:

JavaScript的for循环

如果你只想要原生的JavaScript,而不想依赖于jQuery或Lodash这样的外部库,那这个小技巧是非常有用的。

Longhand:

Shorthand:

js map 箭头函数_js函数中定义函数_js箭头函数

Short-circuit Evaluation

如果参数是null或者是undefined,我们可以简单的使用一个Short-circuit逻辑运算,实现一行代码替代六行代码的写法。

Longhand:

js箭头函数_js函数中定义函数_js map 箭头函数

Shorthand:

十进制指数

你可能看过这个。它本质上是一个写数字的奇特写法,就是一个数字后面有很多个0。例如1e7本质相当于10000000(1的后面有7个0)。它代表了十进制计数等于10000000。

Longhand:

Shorthand:

js箭头函数_js函数中定义函数_js map 箭头函数

对象属性

定义对象文字(Object literals)让JavaScript变得更有趣。ES6提供了一个更简单的办法来分配对象的属性。如果属性名和值一样,你可以使用下面简写的方式。

Longhand:

Shorthand:

箭头函数

经典函数很容易读和写,但它们确实会变得有点冗长,特别是嵌套函数中调用其他函数时还会让你感到困惑。

Longhand:

js函数中定义函数_js map 箭头函数_js箭头函数

Shorthand:

js函数中定义函数_js箭头函数_js map 箭头函数

隐式返回

return在函数中经常使用到的一个关键词,将返回函数的最终结果。箭头函数用一个语句将隐式的返回结果(函数必须省略{},为了省略return关键词)。

如果返回一个多行语句(比如对象),有必要在函数体内使用()替代{}。这样可以确保代码是否作为一个单独的语句返回。

Longhand:

Shorthand:

默认参数值

你可以使用if语句来定义函数参数的默认值。在ES6中,可以在函数声明中定义默认值。

Longhand:

js map 箭头函数_js箭头函数_js函数中定义函数

Shorthand:

Template Literals

是不是厌倦了使用+来连接多个变量变成一个字符串?难道就没有一个更容易的方法吗?如果你能使用ES6,那么你是幸运的。在ES6中,你要做的是使用撇号和${},并且把你的变量放在大括号内。

Longhand:

Shorthand:

Destructuring Assignment

如果你正在使用任何一个流行的Web框架时,就有很多机会使用数组的形式或数据对象的形式与API之间传递信息。一旦数据对象达到一个对个组件时,你需要将其展开。

Longhand:

js map 箭头函数_js函数中定义函数_js箭头函数

Shorthand:

你甚至可以自己指定变量名:

多行字符串

你会发现以前自己写多行字符串的代码会像下面这样:

Longhand:

js map 箭头函数_js箭头函数_js函数中定义函数

但还有一个更简单的方法。使用撇号。

Shorthand:

js函数中定义函数_js map 箭头函数_js箭头函数

Spread Operator

Spread Operator是ES6中引入的,使JavaScript代码更高效和有趣。它可以用来代替某些数组的功能。Spread Operator只是一个系列的三个点(…)。

Longhand:

js map 箭头函数_js箭头函数_js函数中定义函数

Shorthand:

js map 箭头函数_js箭头函数_js函数中定义函数

不像concat()函数,使用Spread Operator你可以将一个数组插入到另一个数组的任何地方。

另外还可以当作解构符:

强制参数

默认情况下js箭头函数,JavaScript如果不给函数参数传一个值的话,将会是一个undefined。有些语言也将抛出一个警告或错误。在执行参数赋值时,你可以使用if语句,如果未定义将会抛出一个错误,或者你可以使用强制参数(Mandatory parameter)。

Longhand:

js函数中定义函数_js箭头函数_js map 箭头函数

Shorthand:

js函数中定义函数_js map 箭头函数_js箭头函数

Array.find

如果你以前写过一个查找函数,你可能会使用一个for循环。在ES6中,你可以使用数组的一个新功能find()。

Longhand:

js map 箭头函数_js箭头函数_js函数中定义函数

Shorthand:

Object[key]

你知道Foo.bar也可以写成Foo[bar]吧。起初,似乎没有理由应该这样写。然而,这个符号可以让你编写可重用代码块。

下面是一段简化后的函数的例子:

js函数中定义函数_js map 箭头函数_js箭头函数

这个函数可以正常工作。然而,需要考虑一个这样的场景:有很多种形式需要应用验证,而且不同领域有不同规则。在运行时很难创建一个通用的验证功能。

Shorthand:

js函数中定义函数_js箭头函数_js map 箭头函数

现在我们有一个验证函数,可以各种形式的重用,而不需要为每个不同的功能定制一个验证函数。

Double Bitwise NOT

如果你是一位JavaScript新手的话,对于逐位运算符(Bitwise Operator)你应该永远不会在任何地方使用。此外,如果你不处理二进制0和1,那就更不会想使用。

然而js箭头函数,一个非常实用的用例,那就是双位操作符。你可以用它替代Math.floor()。Double Bitwise NOT运算符有很大的优势,它执行相同的操作要快得多。你可以在这里阅读更多关于位运算符相关的知识。

Longhand:

Shorthand:

限时特惠:本站每日持续更新海量设计资源,一年会员只需29.9元,全站资源免费下载
站长微信:ziyuanshu688