js 代码优化

一. Map 优化代码

// 假设数据
  type: 1

当 type =1 时，需要转换成 '身份证'
当 type =2 时，需要转换成 '驾驶证'
当 type =3 时，需要转换成 '军官证'
当 type =4 时，需要转换成 '毕业证'
...

方法1. 使用 if / else if

function changeType(type){
    if(type  === 1){
        return  '身份证'
    }else if(type === 2){
        return '驾驶证'
    }else if(type === 3){
        return '军官证'  
    }else if(type === 4){
        return '毕业证'  
    }
}

方法2. 使用 switch

function changeType(type){
    switch(type){
        case 1:
            return '身份证'
            break;
        case 2:
            return '驾驶证'
            break;
        case 3:
            return '军官证'  
            break;  
        case 4:
            return  '毕业证'  
            break;  
    }
}

以上两种方法代码过多，太冗余繁杂

方法3. 使用 Map 优化

function changeType(type){
    let typeMap = new Map([
        [1, '身份证'],
        [2, '驾驶证'],
        [3, '军官证'],
        [4, '毕业证' ]
    ]);
    return typeMap.get(type)
}

方法4. 使用 对象 key-value映射关系 优化

function changeType(type){
    let typeMap ={
        1: '身份证',
        2: '驾驶证',
        3: '军官证',
        4: '毕业证',
    };
    return typeMap[type]
}

二. includes 优化代码

// 假设数据
  type为 1，2，3，4 时，请求通过

方法1. 使用 || 运算符

function fun(type){
    if(type === 1 || type === 2 || type === 3 || type === 4){
        return '请求通过'
    }
}

当 type 变的很多的时候，重复代码量跟着变多

方法2. 使用 includes

function fun(type){
    let typeList = [1, 2, 3, 4]
    if(typeList.includes(type)){
        return '请求通过'
    }
}

三. if 语句 优化代码

1. 单个if

function log(){}

let flag = true
let bflag = true

// 普通写法
if(flag && bflag){
    log()
}
// 优化写法
flag && bflag && log()

2. 多个if

if(a==1){
    return "结果"
}
if(b==2){
    return "结果"
}
if(c==3){
    return "结果"
}
// 优化写法
if(a==1 || b==2 || c==3){
    return "结果"
}
// 或
if(a==1 || b==2 || c==3)return "结果"

四. if / else 语句 优化代码

1. 单个 if / else

function log(){}

let flag = true

if(flag){
    log()
}else{
    return;
}
// 优化写法
let flag = true

if(!flag)return;

log()

function demo(flag){
    if(flag){
        return "1"
    }else{
        return "2"
    }
}
// 三元优化写法
function demo(flag){
    return flag ? "1" : "2"
}

2. 多个 if / else

let  userInfo:{
            age:18,
            hobby:['敲代码','打篮球']
        }
// hobby 不确定有没有值
if(userInfo){
    if(userInfo.hobby){
        if(Array.isArray(userInfo.hobby)){
            if(userInfo.hobby.length){
                // 渲染
            }
        }
    }
}
// 优化后
try {
   if(userInfo.hobby.length){
       //渲染显示
   }
} catch (error) {
   
}
// 或
if(userInfo?.hobby?.length){
    //遍历 result.data.userInfo.hobby 进行渲染显示
}