[TOC] #### 1. 分支代码 --- 前端开发中经常遇到的一个困扰,就是有的时候代码里边会出现很多的分支,下面举了个例子,这个分支比较少,有些情况下会有几十个分支,导致了代码非常难看,那么有没有什么办法来优化这个结构呢? JS 是一种非常灵活的语言,即便不刻意的去用一些设计模式,使用一些简单的操作,都可以来优化这种分支代码 ```javascript function speak(name) { if (name === "老牛") { console.log("老牛哞哞叫"); } else if (name === "老虎") { console.log("老虎嗷嗷叫"); } else if (name === "小猫") { console.log("小猫喵喵叫"); } else { console.log("不知道怎么叫"); } } speak("老牛"); ``` #### 2. 对象映射 --- 使用一个对象进行映射,这样代码就简单很多,无论有多少分支,都会被转换为两个分支,并且很容易扩展新的内容 ```javascript function speak(name) { const map = { 老牛: "老牛哞哞叫", 老虎: "老虎嗷嗷叫", 小猫: "小猫喵喵叫", }; if (map[name]) { console.log(map[name]); } else { console.log("不知道怎么叫"); } } speak("老牛"); ``` 这种映射方式在开发中一般用于状态值转为具体名称时使用 ```javascript function statusText(status) { const map = { "-1": "已取消", 0: "待付款", 1: "待发货", 2: "待收货", 3: "已完成", }; return map[status] ?? ""; } statusText(1) ``` #### 3. 映射函数 --- 当 name 参数匹配到某一个属性时,就一定会输出,万一不能分支里边做的事情不一样呢 ?比如:老牛是要将内容输出,老虎是将内容写入文件,小猫是将内容发送到服务器。我们可以改进代码,将每个属性对应的东西改为一个函数 ```javascript function speak(name) { const map = { 老牛: () => console.log("老牛哞哞叫"), 老虎: () => console.log("老虎嗷嗷叫".repeat(3)), 小猫: () => { for (let index = 0; index < 3; index++) console.log(index); }, }; if (map[name]) { map[name](); } else { console.log("不知道怎么叫"); } } speak("小猫"); ``` #### 4. 终极代码 --- 如果说代码更复杂一点呢,比如:判断条件不一定是 name 等于某一个值,也就是判断条件不同时 现有代码如下所示,因为判断条件不同,所以不能根据对象的键名映射了 ```javascript function speak(name) { if (name.includes("牛")) { console.log(name + "哞哞叫"); } else if (name.endsWith("猫")) { console.log(name + "喵喵叫"); } else { console.log("不知道怎么叫"); } } ``` 优化后代码如下所示,在 map 中定义判断条件和执行逻辑的函数 ```javascript function speak(name) { const map = [ [() => name.includes("牛"), () => console.log(name + "哞哞叫")], [() => name.endsWith("猫"), () => console.log(name + "喵喵叫")], ]; const item = map.find(item => item[0]()); if (item) { item[1](); } else { console.log("不知道怎么叫"); } } speak("小猫"); ```