25个JavaScript代码简写技巧(下篇)

14. 多行字符串

若是您发现本身须要在代码中编写多行字符串,那么您能够编写它:数组

常规:性能优化

可是有一种更简单的方法。只需使用反引号。

简写:函数

15. 展开(spread)操做符

ES6中引入的展开运算符有几个用例,能够使JavaScript代码更高效,更有趣。它能够用来替换某些数组函数。展开操做符只是连续的三个点。post

常规:性能

简写:优化

与 concat() 函数不一样,您能够使用spread运算符在另外一个数组内的任何位置插入数组。3d

您还能够将spread运算符与ES6解构表示法结合使用:cdn

16. 强制参数

默认状况下,若是未传递值,JavaScript会将函数参数设置为undefined。其余一些语言会引起警告或错误。要强制执行参数赋值,能够使用 if 语句在未定义时抛出错误。对象

常规:blog

简写:

17. Array.find

若是您曾经在纯JavaScript中编写过 find 函数,那么您可能已经使用了for循环。在ES6中,引入了一个名为 find() 的新数组函数

常规:

简写:

18. Object[key]

你知道Foo.bar也能够写成Foo ['bar']吗?起初,彷佛没有理由应该这样写。可是,这种表示法能够为编写可重用代码块提供方便。

思考一下,验证函数的这个简化示例:

这个功能完美地完成了它的工做,可是请考虑这样一种状况,即您须要验证的表单有不少,表单都具备不一样字段和规则。构建可在运行时配置的通用验证函数不是更好吗?

简写:

如今咱们有了一个通用验证函数,能够在全部表​​单中重用,而无需为每一个表单编写自定义验证函数。

19. 双取反运算

双取反运算符有一个很是实用的场景。您能够将它用做 Math.floor() 的替代品。 双取反运算符的优势是它能够更快地执行相同的操做。

常规:

简写:

20. 数学指数幂函数

常规:

简写:

21. 将字符串转换为数字

有时,您的代码会接收String类型的参数,但须要以数字类型处理。这不是什么大问题,咱们能够进行快速转换。

常规:

简写:

22. 对象属性赋值

考虑如下代码:

你会如何把它们合并为一个对象?

一种方法是编写一个将第二个对象的数据复制到第一个对象的函数。

最简单的方法是,使用ES6中引入的 Object.assign 函数:

您还能够使用ES8中引入的对象销毁表示法:

您能够合并的对象属性数量没有限制。若是确实具备相同属性名称的对象,则将按合并的顺序覆盖值。

23. 取反运算 和 IndexOf

使用数组执行查找时,indexOf() 函数用于检索您要查找的项目的位置。若是未找到该项,则返回值-1。在JavaScript中,0被认为是'falsy',而大于或小于0的数字被认为是'truthy'。所以,必须像这样编写正确的代码。

常规:

简写:

取反(〜)运算符对 -1 之外的任何值,都返回 truthy 值。对它进行非运算,直接 !〜。

或者,咱们也能够使用 includes() 函数:

24. Object.entries()

这是ES8中引入的一项功能,容许您将对象转换为键/值对数组。请参阅如下示例:

25. Object.values()

这也是ES8中引入的一个新功能,它执行与 Object.entries() 相似的功能,但没有key部分:

看到这里,都已经介绍完了。才疏学浅,若是您有其余好的技巧,欢迎留言评论。


相关文章:

25个JavaScript代码简写技巧(上篇)

使用Array.isArray更好地检查数组

Vue.js应用性能优化一

Vue.js应用性能优化二

Vue.js应用性能优化三

如何使用Vue.js渲染JSON中定义的动态组件

构建Vue.js组件的10个技巧

相关文章
相关标签/搜索