js每日一练 第三天

function speak(name){

    if(name === '老牛'){

        console.log("哞哞眸")

    }else if(name === '老虎'){

        console.log('嗷嗷嗷')

    }else if(name === '小猫'){

        console.log('喵喵喵')

    }else{

        console.log('没有匹配的')

    }

};

问：如何优化上面的分支代码 ？

首先我们看看上面的代码都有一个特点就是name等于某一个值的时候去输出另外一个值

第一种优化

我们可以使用一种映射关系的形式来进行优化

function speak(name){

    const map = {

        '老牛':"哞哞眸",

        '老虎':"嗷嗷嗷",

        '小猫':"喵喵喵"

    }

    if(map[name]){

        console.log(map[name])

    }else{

        console.log('没有匹配的')

    }

};

第二种优化

我们可以把上面的映射形式换成函数来进行优化 这样更方便扩展

function speak(name){

    const map = {

        '老牛':()=>console.log('哞哞哞'),

        '老虎':()=>console.log('文件写入'),

        '小猫':()=>console.log('相片展示')

    }

    if(map[name]){

        map[name]()

    }else{

        console.log('没有匹配的')

    }

};

第三种优化

我门可以把映射的形式写成一种元组的形式

function speak(name){

    const map = [

        [

            ()=>name.includes('老牛'), // 这个为匹配条件

            ()=>console.log('哞哞哞') // 条件匹配成功之后要做的事

        ],

        [

            ()=>name.includes('老虎'), // 这个为匹配条件

            ()=>console.log('文件写入') // 条件匹配成功之后要做的事

        ],

        [

            ()=>name.includes('小猫'), // 这个为匹配条件

            ()=>console.log('相片展示') // 条件匹配成功之后要做的事

        ]

     ];

        const target = map.find(item=>item[0]()) // 获取了匹配成功后的那个数组

         if(target){ // 判断是否匹配成功

                target[1]() // 运行成功之后要做的事情

            }else{

                console.log('没有匹配的')；

            }

};

说一下这三种情况的适用场景

第一种 适合一成不变的只需要做固定的事情 切条件只有一种情况的

第二种 适合做每种条件都做不同的事 切条件不需要固定

第三种 适合做比较复杂一点事 而且拓展性较强 且更加灵活 可以把map单独取出去当作配置文件