19个javascript提高编码效率技巧
来源:互联网 发布:淘宝代购网店怎么开 编辑:程序博客网 时间:2024/06/02 04:02
1. 三元运算符
当你想用一行代码来写if...else
语句的时候,使用三元操作符是非常好的选择,例如:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
可以简写为:
- 1
- 1
也可以嵌套if
语句:
- 1
- 1
2. 简写短路求值
当给一个变量分配另一个值的时候,你可能想确定初值不是null
,undefined
或空值。这时,你可以写一个多重条件的if
语句:
- 1
- 2
- 3
- 1
- 2
- 3
或者可以使用短路求值的方法:
- 1
- 1
3. 简写变量声明
在定义函数的时候,你可能需要先声明多个变量,例如:
- 1
- 2
- 3
- 1
- 2
- 3
这时,你可以使用简写的方式节省很多时间和空间,即同时声明多个变量:
- 1
- 1
4. 简写 if 执行条件
这可能微不足道,但值得一提。在你做if
条件检查的时候,其赋值操作可以省略,例如:
- 1
- 1
可以简写为:
- 1
- 1
只有当likeJavaScript
是真值的时候,以上两个语句才可以替换。如果判断假值,例如:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
可以简写为:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
5. 简写 JavaScript 循环方法
当你想使用纯 javascript 而不依赖外库(例如jQuery
)的时候,这是非常有用的。
- 1
- 1
可以简写为:
- 1
- 1
也可以使用Array.forEach
:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
6. 短路求值
如果想通过判断参数是否为null
或者undefined
来分配默认值的话,我们不需要写六行代码,而是可以使用一个短路逻辑运算符,只用一行代码来完成相同的操作。例如:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
可以简写为:
- 1
- 1
7. 十进制指数
当数字的尾部为很多的零时(如10000000
),咱们可以使用指数(1e7
)来代替这个数字,例如:
- 1
- 1
可以简写为:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
8. 简写对象属性
在 JavaScript 中定义对象很简单,而且ES6
提供了一个更简单的分配对象属性的方法。如果属性名与key
值相同,例如:
- 1
- 1
则可以简写为:
- 1
- 1
9. 简写箭头函数
传统函数很容易让人理解和编写,但是当它嵌套在另一个函数中的时候,它就会变得冗长和混乱。例如:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
这时,可以简写为:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
10. 简写隐式返回值
我们经常使用return
语句来返回函数最终结果,仅有一行声明语句的箭头函数能隐式返回其值(这时函数必须省略{}
以便省略return
关键字)。如果想要返回多行语句,则需要使用()
包围函数体。例如:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
可以简写为:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
11. 默认参数值
我们经常可以使用if
语句来为函数中的参数定义默认值。但是在ES6
中,咱们可以在函数本身声明参数的默认值。例如:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
可以简写为:
- 1
- 2
- 3
- 1
- 2
- 3
12. 字符串模板
你是不是厌倦了使用+
将多个变量转换为字符串?有没有更简单的方法呢?如果你能够使用ES6
,那么很幸运,你仅需使用反引号并将变量置于${}
之中即可。例如:
- 1
- 2
- 3
- 1
- 2
- 3
可以简写为:
- 1
- 2
- 3
- 1
- 2
- 3
13. 简写赋值方法
如果你正在使用任何流行的 Web 框架,那么你很有可能使用数组或以对象本文的形式将数据在组件和 API 之间进行通信。一旦数据对象到达一个组件,你就需要解压它。例如:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
可以简写为:
- 1
- 2
- 3
- 1
- 2
- 3
也可以分配变量名:
- 1
- 2
- 3
- 1
- 2
- 3
14. 简写多行字符串
如果你曾发现自己需要在代码中编写多行字符串,那么这估计就是你编写它们的方法,即在输出的多行字符串间用+
来拼接:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
但是如果使用反引号,你就可以达到简写的目的:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
15. 扩展运算符
在ES6
中,包括扩展运算符,它可以使你的操作更简单,例如:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
可以简写为:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
不像concat()
函数,你可以使用扩展运算符在一个数组中任意处插入另一个数组,例如:
- 1
- 2
- 1
- 2
也可以使用扩展运算符:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
16. 强制参数
默认情况下,如果不传递值,JavaScript 会将函数参数设置为undefined
,而其他一些语言则会报出警告或错误。想要执行参数分配,则可以让if
语句抛出undefined
的错误,或者使用“强制参数”的方法。例如:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
可以简写为:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
17. Array.find 简写
如果你曾负责编写 JavaScript 中的find
函数,那么你很有可能使用了for
循环。在此,介绍ES6
中一个名为find()
的数组函数。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
可以简写为:
- 1
- 2
- 1
- 2
18. 简写 Object[key]
你知道Foo.bar
也可以写成Foo['bar']
吗?起初,似乎没有什么理由让你这样写。然而,这个符号给了你编写可重用代码的基础。考虑如下简化的验证函数示例:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
这个函数可以完美的完成它的任务。但是,考虑一个场景,你有很多表单,你需要进行验证,但有不同的字段和规则。那么,构建一个可以在运行时配置的通用验证函数不是很好吗?
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
现在我们就有了一个可以在所有的form
中重用的验证函数,而无需为每个form
编写其自定义的验证函数啦!
19. 简写双重按位非运算符
按位运算符绝对是你初学 JavaScript 时了解的但一直没有用武之地的运算符。因为如果不处理二进制,谁会没事操作0
和1
呢?但是,双重按位非运算符非常实用,例如你可以使用它来替代floor()
函数,而且与其他相同的操作相比,按位运算符的操作速度更快。
- 1
- 1
可以简写为:
- 19个javascript提高编码效率技巧
- [JavaScript]提高编码效率的15个最新JavaScript包和工具
- 提高你效率的36个技巧
- 提高网站效率的53个技巧
- 提高PHP开发效率53个技巧
- 提高个人效率的6个技巧
- 提高Eclipse效率的10个技巧
- 19个JavaScript编码小技巧
- 提高编码效率的Visual Studio使用技巧
- Xcode提高编码效率小技巧(一)
- 如何提高编码效率
- 提高php编码效率
- 数据库设计的14个技巧及提高运行效率
- 提高开发效率的53个PHP编程技巧.
- 53个小技巧提高PHP编程效率
- 53个小技巧提高PHP编程效率
- 提高php运行效率的50个技巧
- 效率大提高:数据库设计的14个技巧
- 性能测试实战--linux远程连接配置
- MyBatis 多表联合查询及优化
- Storm流式计算任务提交及分配
- 归并排序的算法应用
- JavaSE-Headfirst Java笔记
- 19个javascript提高编码效率技巧
- 快乐数
- JavaScript的内置对象 2017-07-31
- hdu2095 find your present (2)(C语言
- RHCE——配置和保护OPENSSH服务
- Objective
- Guava Cache 数据变化实现回调的监听器RemovalListener
- Java数值类型提升机制
- 感想一篇and博客开张