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

2019-09-12 admin

14. 多行字符串

如果您发现自己需要在代码中编写多行字符串,那么您可以编写它:

常规:

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

简写:

15. 展开(spread)操作符

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

常规:

简写:

与 concat() 函数不同,您可以使用spread运算符在另一个数组内的任何位置插入数组。

您还可以将spread运算符与ES6解构表示法结合使用:

16. 强制参数

默认情况下,如果未传递值,JavaScript会将函数参数设置为undefined。其他一些语言会引发警告或错误。要强制执行参数赋值,可以使用 if 语句在未定义时抛出错误。

常规:

简写:

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部分:

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


相关文章:

Vue.js应用性能优化一

Vue.js应用性能优化二

Vue.js应用性能优化三

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

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

[转载]原文链接:https://segmentfault.com/a/1190000020366414

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74916.html

文章标题:25个JavaScript代码简写技巧(下篇)

相关文章
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 <span id=“mt9” class=“sent...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
JavaScript短路原理精简代码
js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
回到顶部