多个v-if v-else判断的优化

1. 简单分支判断： 

// 1. 简单分支优化
function getUserDescribe(name) {
    if (name === "小刘") {
        console.log("刘哥哥");
    } else if (name === "小红") {
        console.log("小红妹妹");
    } else if (name === "陈龙") {
        console.log("大师");
    } else if (name === "李龙") {
        console.log("师傅");
    } else if (name === "大鹏") {
        console.log("恶人");
    } else {
        console.log("此人比较神秘！");
    }
}

可以转化为：

// // 转换为：
function getUserDescribe(name) {
    const describeForNameMap  = {
        '小红':()=>console.log('我是小红'),
        '小明':()=>console.log('我是小明'),
        '小丽':()=>console.log('我是小丽'),
        '大明':()=>console.log('我是大明'),
    }
    describeForNameMap[name]?describeForNameMap[name]():console.log('此人比较神秘');
}
getUserDescribe('大明')

2 .复杂分支判断：

function getUserDescribe(name) {
    if (name.length > 3) {
        console.log("名字太长");
    } else if (name.length < 2) {
        console.log("名字太短");
    } else if (name[0] === "陈") {
        console.log("小陈");
    } else if (name[0] === "李" && name !== "李鹏") {
        console.log("小李");
    } else if (name === "李鹏") {
        console.log("管理员");
    } else {
        console.log("此人比较神秘！");
    }
}

转化为：

function getUserDescribe(name){
    const describeForNameMap = [
        [
            (name)=>name.length>3,
            ()=>console.log('名字太长')
        ],
        [
            (name)=>name.length<2,
            ()=>console.log('名字太短')
        ],
        [
            (name)=>name.length=3||2,
            ()=>console.log('名字整好')
        ],
    ]
    // 先获取满足条件的子数组
    const getDescribe = describeForNameMap.find(item=>item[0].name)
    // 子数组存在则运行子数组中的第二个元素（执行函数）
    getDescribe?getDescribe[1]():console.log('此人好神秘');
}