[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("小貓"); ```