19+ JavaScript 常用的简写技巧
来源:互联网 发布:linux配置caffe 编辑:程序博客网 时间:2024/05/24 06:42
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
可以简写为:
- 1
- 1
20. Suggest One of U?
我很喜欢这些简写的方法,也希望能找到更多的简写方法,如果您知道的话,请在此留言,非常感谢!
翻译声明:本文源自「sitepoint」,19+ JavaScript Shorthand Coding Techniques。
- 19+ JavaScript 常用的简写技巧
- 19+ JavaScript 常用的简写技巧
- 19+ JavaScript 常用的简写技巧
- JavaScript 常用的简写技巧
- JavaScript 常用的简写技巧
- 12个常用的JavaScript简写技巧
- 12个常用的JavaScript简写技巧
- 12个常用的javascript简写技巧
- JavaScript里最常用的十种代码简写技巧
- 19 个 JavaScript 常用的简写技术
- 19 个 JavaScript 常用的简写技术
- 19个JavaScript常用的简写技术
- 19 个 JavaScript 常用的简写技术
- 19 个 JavaScript 常用的简写技术
- 19 个 JavaScript 常用的简写技术
- 19个JavaScript常用的简写技术
- 常用的javascript简写写法
- JavaScript 开发人员需要知道的简写技巧
- I2C 学习
- 【Java】冒泡排序
- java socket编程如何识别网络主机
- USACO Section 1.4 Arithmetic Progressions
- Java 8 默认方法和多继承
- 19+ JavaScript 常用的简写技巧
- Redis 事务
- HDU 3867 计算几何扫描线
- Unity5自动命名Assetbundle并打包
- hdu2973 YAPTCHA(威尔逊定理)
- (POJ
- 【Firefox】【kaios】如何添加一个webidl
- 位操作,移位操作
- poj 1459 Power Network (dinic算法)