[TOC] ## 前言 代碼優化實踐的持續總中 ## 有連續字母的索引返回 針對連續字母以及指針有嚴格對應關系的，完全可以通過字符串的匹配關系來進行優化。 ``` //優化前 switch (i) { case 0: list.roomName = 'A' break case 1: list.roomName = 'B' break case 2: list.roomName = 'C' break case 3: list.roomName = 'D' break ... } //優化后 const roomNameStr = 'ABCDEFGHIJKLMNOP' list.roomName = roomNameStr.charAt(i) ``` ## 邏輯與與邏輯或 相信大家對&& 以及 || 的符號并不陌生，但對其一些用法可能并不清楚。 ``` // 靈活的賦值過程 ，當某值存在的時候 取值；否則取另外一個值 ，在配置項中經常用 const defaultOptions = {} let options = options ? options : defaultOptions //除了通過三目 也可以通過邏輯或 ,代表優先取第一個值，可以用來優化鏈式優先級取值的過程 let options = options || defaultOptions //邏輯與 代表取最后一個值 ；當然我們很多時候是判斷很多布爾型數據同時滿足 let number = 1 && 3 // 覺得很不可思議吧，我們怎么會這么寫呢？ //其實是這樣的 當多個布爾值并列與的時候，如果前一個為true 則不取值，繼續向后判斷 ，如果都為true 那么執行去語句，取最后一個為true的值，否則就肯定是false了 // 得到0 當然這時候看你想做的是什么 是取0 還是取布爾型 let a = true && 0 // 如果是前者，建議是這樣寫的,對于原本非布爾型的為了得到其轉換后的布爾型，加雙！進行轉換即可 let a = true && !!0 // 那么用邏輯與還有另外的妙用，就是條件正確的情況下執行代碼,這種就很常見了 option && code here ``` ## 變量相關規范 ### 變量名規范，避免無用的中文注釋 ``` // 規范前 let fName = 'jackie'; // 看起來命名挺規范，縮寫，駝峰法都用上，ESlint各種檢測規范的工具都通過，But，fName是啥？這時候，你是不是想說What are you 弄啥呢？ let lName = 'willen'; // 這個問題和上面的一樣 // 規范后 let firstName = 'jackie'; // 怎么樣，是不是一目了然。少被噴了一次 let lastName = 'willen'; ``` ### 變量管理 1 無用的變量不要定義 2有用的變量盡可能放在使用作用域，避免后期維護困難 3 全局變量建議單例模式去管理 4 變量分好是變量還是常量 ### 變量賦值兜底 也稱為對異常情況的處理，這樣的代碼會經常寫，需要考慮，對空、非正常情況下希望的賦值以及返回。 ``` let len = arr ? arr.length : 0 let str = person.name || '' ``` ### 對于一些常量寫好相應的變量來管理 ``` // 優化前 18 代表什么 ? if(age>18){ } // 優化后 const ADULT_AGE = 18 if(age>ADULT_AGE){ } ``` ## 函數規范 ### 函數名說明其用途 一般情況下函數都是一個動詞名詞的組合，代表一個功能 ### 純函數 要保證函數所需的變量以及外界條件盡可能少，每次同樣的輸出得到同樣的結果。 ### 單一功能函數 在一個函數中，盡量只實現一個核心功能，不要在一個函數中實現多個功能，要正確準確的實現函數的拆分，函數的復用。 ### 函數傳參 每個函數的傳參要語義化，可以的話指定其默認值 ### 函數注釋 必要寫明的幾個注釋的字段：建議使用jsdoc的相關規范 - 作者：模塊維護人 - 入參：幾個參數，是否必填，參數數據類型 - 返回參數：返回參數，返回情況 - 主要用途：函數價值，使用場景 ## 針對枚舉值的篩選過濾優化 ``` // 優化前 const userRoles = ["角色1","角色2"]; let hasRole = userRoles.includes('小管家') || userRoles.includes('營銷部經理') ; // 優化后 const userRoles = ["角色1","角色2"]; let judgeRoleList = ['小管家','營銷部經理']; let hasRole = judgeRoleList.some(role =>userRoles.includes(role) ); ``` ##