2021年你需要了解的13 种JavaScript 代码技巧

凝雪探世界
• 阅读 1203

1. 多表达式多 if 判断

我们可以在数组中存储多个值,并且可以使用数组include方法。

`// 长`
`if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {` `//logic``}`
`// 短`
`if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {` `//logic``}`

2. 简写 if else

如果 if-else 的逻辑比较降低,可以使用下面这种方式镜像简写,当然也可以使用三元运算符来实现。

`// 长`
`let test: boolean;``if (x > 100) {` `test = true;``} else {` `test = false;``}`
`// 短`
`let test = (x > 10) ? true : false;``
// 也可以直接这样`
`let test = x > 10;`

3. 合并变量声明

当我们声明多个同类型的变量时,可以像下面这样简写。

`// 长` 
`let test1;``let test2 = 1;`
`// 短`
`let test1, test2 = 1;`

4. 合并变量赋值

当我们处理多个变量并将不同的值分配给不同的变量时,这种方式非常有用。

`// 长` 
`let test1, test2, test3;``test1 = 1;``test2 = 2;``test3 = 3;`
`// 短`
`let [test1, test2, test3] = [1, 2, 3];`

5. && 运算符

如果仅在变量值为 true 的情况下才调用函数,则可以使用 && 运算符。

`// 长`
`if (test1) {` `callMethod();` `}` 
`// 短`
`test1 && callMethod();`

6. 箭头函数

`// 长`
`function add(a, b) { ``return a + b;` `}`
`// 短`
`const add = (a, b) => a + b;`

7. 短函数调用

可以使用三元运算符来实现这些功能。

`const fun1 = () => console.log('fun1');`
`const fun2 = () => console.log('fun2');`
`// 长`
`let test = 1;``if (test == 1) {` `fun1();``} else{` `fun2();``}`
`// 短`
`(test === 1? fun1:fun2)();`

8. Switch 简记法

我们可以将条件保存在键值对象中,并可以根据条件使用。

`// 长`
`switch (data) {`
 `case 1:` `test1();`
 `break;`
 `case 2:` `test2();`
 `break;` `case 3:` 
 `test();` `break;` 
`// And so on...``}`
`// 短`
`const data = {` 
`1: test1,` 
`2: test2,` 
`3: test``};`
`data[something] && data[something]();`

9. 默认参数值

`// 长`
`function add(test1, test2) {` 
`if (test1 === undefined)` 
`test1 = 1;` 
`if (test2 === undefined)` 
`test2 = 2;` `return test1 + test2;``}`
`// 短`
`const add = (test1 = 1, test2 = 2) => (test1 + test2);`

10. 扩展运算符

`// 长-合并数组`
`const data = [1, 2, 3];`
`const test = [4 ,5 , 6].concat(data);`
`// 短-合并数组`
`const data = [1, 2, 3];`
`const test = [4 ,5 , 6, ...data];`
`// 长-拷贝数组`
`const test1 = [1, 2, 3];``const test2 = test1.slice()`
`// 短-拷贝数组`
`const test1 = [1, 2, 3];``const test2 = [...test1];`

11. 模版字符串

`// 长`
`const welcome = 'Hi ' + test1 + ' ' + test2 + '.'`
`// 短`
``const welcome = `Hi ${test1} ${test2}`;``

12. 简写对象

`let test1 = 'a';` 
`let test2 = 'b';`
`// 长` 
`let obj = {test1: test1, test2: test2};` 
`// 短` 
`let obj = {test1, test2};`

13. 在数组中查找最大值和最小值

`const arr = [1, 2, 3];`
 `Math.max(…arr); 
// 3`
`Math.min(…arr); // 1`
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Souleigh ✨ Souleigh ✨
3年前
34 个 JavaScript 代码优化技巧
1. 含有多个条件的if语句我们可以在数组中存储多个值,并且可以使用数组的includes方法。//longhandif (x  'abc' || x  'def' || x  'ghi' || x 'jkl') {    //logic}//shorthandif ('abc', 'def
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
2年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Stella981 Stella981
2年前
SpringBoot使用RedisTemplate操作Redis时,key值出现 -xac-xed-x00-x05t-x00-tb
原因分析原因与RedisTemplate源码中的默认序列化方式有关defaultSerializernewJdkSerializationRedisSerializer(classLoader!null?classLoader:this.getClass().getClassLoader()
Easter79 Easter79
2年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Easter79 Easter79
2年前
SpringBoot使用RedisTemplate操作Redis时,key值出现 -xac-xed-x00-x05t-x00-tb
原因分析原因与RedisTemplate源码中的默认序列化方式有关defaultSerializernewJdkSerializationRedisSerializer(classLoader!null?classLoader:this.getClass().getClassLoader()
凝雪探世界
凝雪探世界
Lv1
女 · 环球巨人科技有限公司 · 前端开发
Talk is cheap. Show me the code.
文章
9
粉丝
2
获赞
9