JavaScript逻辑的优化(if,else if,else)

JavaScript逻辑的优化

  • 简单的逻辑
  • 复杂的逻辑

简单的逻辑

<script>
    /**
     * 未优化。期望调用函数,传递什么参数执行哪个分支的逻辑
     * 简单的逻辑
     * @param name {String} 参数
     */
    function speak1(name) {
        if (name === "老牛") {
            console.log("老牛哞哞叫");
        }else if (name === "老虎") {
            console.log("老虎嗷嗷叫");
        }else if (name === "小猫") {
            console.log("小猫喵喵叫");
        }else {
            console.log("不知道怎么叫");
        }
    }
    speak1("老虎"); // 输出: 老虎嗷嗷叫

    /**
     * 已优化
     * 简单的逻辑
     * @param name {String} 参数
     */
    function goodSpeak1(name) {
        const map = {
            "老牛": () => console.log("老牛哞哞叫"),
            "老虎": () => console.log("老虎嗷嗷叫"),
            "小猫": () => console.log("小猫喵喵叫"),
            // 可以继续增加逻辑
        }
        if (map[name]) {
            map[name]();
        }else {
            console.log("不知道怎么叫");
        }
    }
    goodSpeak1("老虎"); // 输出: 老虎嗷嗷叫
</script>

复杂的逻辑

<script>
    /**
     * 未优化。期望调用函数,传递什么参数执行哪个分支的逻辑
     * 复杂的逻辑
     * @param name {String} 参数
     */
    function speak2(name) {
        if (name.includes("牛")) {
            console.log(name + "哞哞叫");
        }else if (name.endsWith("虎") && name.length <= 3) {
            console.log(name + "嗷嗷叫");
        }else if (name.endsWith("猫") && !name.includes("狗")) {
            console.log(name + "喵喵叫");
        }else {
            console.log("不知道怎么叫");
        }
    }
    speak2("东北虎"); // 输出: 东北虎嗷嗷叫

    /**
     * 已优化
     * 复杂的逻辑
     * @param name
     */
    function goodSpeak2(name) {
        const map = [
            [
                () => name.includes("牛"),
                () => console.log(name + "哞哞叫")
            ],
            [
                () => name.endsWith("虎") && name.length <= 3,
                () => console.log(name + "嗷嗷叫")
            ],
            [
                () => name.endsWith("猫") && !name.includes("狗"),
                () => console.log(name + "喵喵叫")
            ],
            // 可以继续增加逻辑
        ];
        //遍历map,找到第0项也就是条件为true的结果存入target
        const target = map.find(m => m[0]());
        if (target) {
            target[1]();
        } else {
            console.log("不知道怎么叫");
        }
    }
    goodSpeak2("东北虎"); // 输出: 东北虎嗷嗷叫
</script>

你可能感兴趣的:(JavaScript小功能案例,javascript,前端)