如何優化if..else程式碼
if...else是我們平時寫程式碼時經常用到的,而且使用起來也沒啥問題。問題是當業務邏輯比較複雜時,一堆條件判斷就看的讓人頭大了,而且功能迭代時,還有可能在上面進行增量修改,內容越來越長,巢狀越來越深,可讀性就變得越來越差。作為一個有追求的銀,不但要求功能能實現,還要儘可能的美觀好看~
接下來,我們就從幾個方面來給程式碼換裝
三元表示式
if (status === 'A') { handleA(); } else { handleOther(); }
像這種簡單的if...else可以直接用三元表示式替換
status === 'A' ? handleA() : handleOther();
跟上面程式碼相比,少了好幾行呢是吧,哈哈。
函式封裝
function fn () { if (A) { // TODO } if (B) { // TODO } if (C) { // TODO } }
上面的這種程式碼是很常見的,根據不同的狀態執行不同的邏輯,但是所有的邏輯處理堆到一個函式裡面就會使這個函式體變得很大。本著單一性的原則,我們可以把程式碼進行拆分,每個if裡面的邏輯處理封裝成一個函式,這樣看起來會比較清晰。
function handleA () { // TODO } function handleB () { // TODO } function handleC () { // TODO } function fn () { if (A) { handleA(); } if (B) { handleB(); } if (C) { handleC(); } }
物件封裝
if (status === 'A') { // TODO } else if (status === 'B') { // TODO } else if (status === 'C') { // TODO }
像這種if..else if...的格式,從上到下判斷,只會進入其中一個分支, 而且條件都是用一個全等就能判斷出來的,可以利用物件鍵值對的形式,狀態條件作為鍵,值是一個函式去執行業務邏輯來進行封裝。
const map = { A: () => {}, B: () => {}, C: () => {} } map[status]();
每個分支的邏輯都被寫成一個獨立的函式,之後再有不同的條件判斷,豐富物件鍵值對就行了,清晰明瞭。
或者用es6的Map
const map = new Map([ ['A', () => {}], ['B', () => {}], ['C', () => {}] ]) const action = map.get(status); action();
Map與Object的區別是Map可以用任何型別的資料作為key。
也可以用switch語句:
switch (status) { case 'A': // TODO break; case 'B': // TODO break; default: // TODO }
不用寫那麼多'==='了,不過switch判斷的是'==='而不是'=='.
這是條件狀態很單一的時候,那條件判斷比較複雜的時候呢?比如 a && b && c 之類的,可以把條件也作為一個函式儲存起來,當函式返回true時,執行對應的邏輯處理函式。
const rules = [ { match: (a, b, c) => {}, // 條件判斷 action: () => {} // 對應的業務邏輯 }, { match: (a, b, c) => {}, action: () => {} }, { match: (a, b, c) => {}, action: () => {} } ] for (let i = 0; i < rules.length; i++) { if (rules[i].match(a, b, c)) { // 只要條件判斷返回true,就執行對應的業務邏輯,並結束迴圈 return rules[i].action(a, b, c) } }
以上只是條件語句比較複雜數量比較多時的程式碼優化方法,if...else該用還得用,用的時候儘量把常用的條件體放到前面,這樣找到正確分支的速度就會快。