JS有很多小技巧可以使代码更精简、更简单。今天主要分享4个技巧,在平时的工作中可以大大的缩短代码量和开发时间。
短路判断
当只需要简单的if
条件时,可使用此方法
let x = 0;
let foo = () => console.log('执行了');
if(x === 0){
foo()
}
通过使用&&
运算符来实现同样的if功能,如果&&
之前的条件为false,则&&
之后的代码将不会执行。
let x = 0;
let foo = () => console.log('执行了');
x === 0 && foo()
还可增加更多的if
条件,不过这也会增加语句的复杂性,不建议超过2个以上条件。
let x = 0;
let y = 0;
let foo = () => console.log('执行了');
x === 0 && y === 0 && foo()
可选链操作符 ( ? )
我们经常会判断JS对象中是否存在某个key,因为有时不确定后台API返回的数据是否是正确的。
user
对象中包含一个属性name
的对象,name
对象有一个属性firstName
,使用user.name.firstName
直接进行判断的话,如果name
属性不存在的话就会报错,所以在判断之前还需要判断user.name
是否存在,需要嵌套两层if
判断。
let user = {
name : {
firstName : '傲夫靠斯'
}
}
if(user.name){
if(user.name.firstName){
console.log('user对象 包含 firstName 字段')
}
}
这时我们可以使用?
操作符进行简化操作,如果user.name
不存在,也将返回false,所以直接使用一层判断
let user = {
name : {
firstName : '傲夫靠斯'
}
}
if(user.name?.firstName){
console.log('user对象 包含 firstName 字段')
}
空值合并操作符 ( ?? )
与if/else
相比来说,三元运算符更加简短。如果逻辑简单,使用起来很方便。
例如
let user = {
name : {
firstName : '傲夫靠斯'
}
}
let foo = () => {
return user.name?.firstName ?
user.name.firstName :
'firstName 不存在'
}
console.log(foo())
首先使用?
运算符来判读是否存在,存在即返回,不存在则返回false,进入后面的逻辑
使用??
运算法使代码更加精简
let user = {
name : {
firstName : '傲夫靠斯'
}
}
let foo = () => {
return user.name?.firstName ??
'firstName 不存在'
}
console.log(foo())
return终止函数
下面函数判断x的值,使用大量if else嵌套
let x = 1;
let foo = () => {
if(x < 1){
return 'x 小于 1'
} else {
if(x > 1){
return 'x 大于 1'
}else{
return 'x 等于 1'
}
}
}
console.log(foo())
这种if else嵌套可以删除else条件来简化代码,因为return语句将终止代码执行并返回函数。
let x = 1;
let foo = () => {
if(x < 1){
return 'x 小于 1'
}
if(x > 1){
return 'x 大于 '
}
return 'x 等于 1'
}
console.log(foo())
总结
好的代码可能并不需要写成足够短,必须优先考虑它的可读性,而不是一味的追求简短。因为在其他人维护代码时会非常困难,需要花费大量时间去阅读代码。
觉得文章不错,欢迎关注公号(点击关注),每天更新一篇有用的内容。