第 015 期 優化令人生畏的條件語句的 4 個技巧

嵌套太深，分支太多的條件語句令人生畏，難以維護。本文介紹減少嵌套深度和條件分支數量的一些技巧。

優化技巧

技巧1：儘早返回無效條件

function supply(fruit, quantity) {
  const redFruits = ['apple', 'pear', 'cherry'];
  // 條件 1: 水果存在
  if (fruit) {
    // 條件 2: 屬於紅色水果
    if (redFruits.includes(fruit)) {
      console.log('紅色水果');
      // 條件 3: 水果數量大於 10 個
      if (quantity > 10) {
        console.log('數量大於 10 個');
      }
    }
  } else {
    throw new Error('沒有水果啦!');
  }
}

優化爲:

function supply(fruit, quantity) {
  const redFruits = ['apple', 'pear', 'cherry'];
  // 條件 1: 當 fruit 無效時，提前處理錯誤
  if (!fruit) throw new Error('沒有水果啦');
  // 條件 2: 當不是紅色水果時，提前 return
  if (!redFruits.includes(fruit)) return;
  
  console.log('紅色水果');
  
  // 條件 3: 水果數量大於 10 個
  if (quantity > 10) {
    console.log('數量大於 10 個');
  }
}

技巧2：直接執行對象上的方法替代條件判斷

switch (action) {
  case 'add':
    return add()
  case 'update':
    return update()
  case 'list':
    return list();
  default:
    throw 'Not Support Action'
}

優化爲：

const handler = {
  add() {},
  update() {},
  list() {}
}

handler(action)()

技巧3：多個字符串相等判斷用 includes

if (
  action === 'add' ||
  action === 'update' ||
  action === 'delete'
) {
  console.log('change')
}

優化爲

if(['add', 'update', 'delete'].includes(action)) {
  console.log('change')
}

技巧4：對象的屬性存在判斷用可選鏈操作符

if (obj && obj.a && obj.a.fn) {
  obj.a.fn()
}

優化爲

obj?.a?.fn?.()

參考文檔

• 編寫高質量可維護的代碼：優化邏輯判斷