-
if里面的多重判断
槽点
你是否遇到过这种情况if判断里面一开始只有1个或者两个条件但是后来随着需求的增加或者调整，条件判断越来越多，可读性和维护性就会变得特别差，看下面
let pictureType = 'jpg' //加入这个变量是动态获取的
if (pictureType == 'png' || pictureType == 'img' || pictureType == 'jpg') {
console.log('is picture')
}else{
console.log('is not picture')
}
优化
let pictureType = 'jpg' //加入这个变量是动态获取的
const picutreTypeArr = ['png', 'img','jpg']
if(picutreTypeArr.includes(pictureType)){
console.log('is picture')
}else {
console.log('is not picture')
}
优化后虽然感觉代码多了一行但是可读性和扩展性提高了很多，顿时逼格高了一点
-
尽量少的嵌套（先抛出错误）
槽点
我之前写判断的时候总是先判断如果是xx然后dosomeThing,不是后怎么样
//判断是否有人
if(peopel){
//是不是女的
if(isGril){
//是不是美女
if(isBeautifulGril){
console.log('是个美女')
}
}
}else{
console.log('no people')
}
优化
//判断是否有人
if(!people){
console.log('no people')
return
}
//是不是女的
if(isGril){
//是不是美女
if(isBeautifulGril){
console.log('是个美女')
}
}
这样就少了一层嵌套
es6解构赋值
槽点
我比较常使用的ui组件是element,用过其中table和分页器的都知道，我们可以把@currentPage的事件和页面初始的时候的方法写成一个，但是页面初始的时候因为没有点击分页器的val是没有值的，我们写成如下这样
getTableList(val){
let page = val ? val : 1
const tableParam = {
start : (page - 1) * 10,
limit: 10
}
//请求表格
}
优化
getTableList(val = 1){
const tableParam = {
start : (val - 1) * 10,
limit: 10
}
//请求表格
}
在我们写参数的过程中如果给定一个默认值，代码的可读性会大大增加
善用对象的key-value
槽点
moreIf(color){
if(color === 'red'){
return ['apple','Pitaya']
} else if (color === 'yellow'){
return ['bannana','pear']
} else if(color === 'green'){
return ['Jujube']
}
},
优化
moreIf(color){
const colorFriult = {
red: ['apple','Pitaya'],
yellow: ['bannana','pear'],
green: ['Jujube']
}
return colorFriult[color] || []
},
以后碰到在往上加
