[TOC] #### 1. 分支代碼 --- 前端開發(fā)中經(jīng)常遇到的一個(gè)困擾，就是有的時(shí)候代碼里邊會(huì)出現(xiàn)很多的分支，下面舉了個(gè)例子，這個(gè)分支比較少，有些情況下會(huì)有幾十個(gè)分支，導(dǎo)致了代碼非常難看，那么有沒有什么辦法來優(yōu)化這個(gè)結(jié)構(gòu)呢？ JS 是一種非常靈活的語言，即便不刻意的去用一些設(shè)計(jì)模式，使用一些簡單的操作，都可以來優(yōu)化這種分支代碼 ```javascript function speak(name) { if (name === "老牛") { console.log("老牛哞哞叫"); } else if (name === "老虎") { console.log("老虎嗷嗷叫"); } else if (name === "小貓") { console.log("小貓喵喵叫"); } else { console.log("不知道怎么叫"); } } speak("老牛"); ``` #### 2. 對(duì)象映射 --- 使用一個(gè)對(duì)象進(jìn)行映射，這樣代碼就簡單很多，無論有多少分支，都會(huì)被轉(zhuǎn)換為兩個(gè)分支，并且很容易擴(kuò)展新的內(nèi)容 ```javascript function speak(name) { const map = { 老牛: "老牛哞哞叫", 老虎: "老虎嗷嗷叫", 小貓: "小貓喵喵叫", }; if (map[name]) { console.log(map[name]); } else { console.log("不知道怎么叫"); } } speak("老牛"); ``` 這種映射方式在開發(fā)中一般用于狀態(tài)值轉(zhuǎn)為具體名稱時(shí)使用 ```javascript function statusText(status) { const map = { "-1": "已取消", 0: "待付款", 1: "待發(fā)貨", 2: "待收貨", 3: "已完成", }; return map[status] ?? ""; } statusText(1) ``` #### 3. 映射函數(shù) --- 當(dāng) name 參數(shù)匹配到某一個(gè)屬性時(shí)，就一定會(huì)輸出，萬一不能分支里邊做的事情不一樣呢 ？比如：老牛是要將內(nèi)容輸出，老虎是將內(nèi)容寫入文件，小貓是將內(nèi)容發(fā)送到服務(wù)器。我們可以改進(jìn)代碼，將每個(gè)屬性對(duì)應(yīng)的東西改為一個(gè)函數(shù) ```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. 終極代碼 --- 如果說代碼更復(fù)雜一點(diǎn)呢，比如：判斷條件不一定是 name 等于某一個(gè)值，也就是判斷條件不同時(shí) 現(xiàn)有代碼如下所示，因?yàn)榕袛鄺l件不同，所以不能根據(jù)對(duì)象的鍵名映射了 ```javascript function speak(name) { if (name.includes("牛")) { console.log(name + "哞哞叫"); } else if (name.endsWith("貓")) { console.log(name + "喵喵叫"); } else { console.log("不知道怎么叫"); } } ``` 優(yōu)化后代碼如下所示，在 map 中定義判斷條件和執(zhí)行邏輯的函數(shù) ```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("小貓"); ```