嵌套太深，分支太多的条件语句令人生畏，难以维护。本文介绍减少嵌套深度和条件分支数量的一些技巧。

优化技巧

技巧1：尽早返回无效条件

  1. function supply(fruit, quantity) {
  2.   const redFruits = ['apple', 'pear', 'cherry'];
  3.   // 条件 1: 水果存在
  4.   if (fruit) {
  5.     // 条件 2: 属于红色水果
  6.     if (redFruits.includes(fruit)) {
  7.       console.log('红色水果');
  8.       // 条件 3: 水果数量大于 10 个
  9.       if (quantity > 10) {
  10.         console.log('数量大于 10 个');
  11.       }
  12.     }
  13.   } else {
  14.     throw new Error('没有水果啦!');
  15.   }
  16. }

优化为:

  1. function supply(fruit, quantity) {
  2.   const redFruits = ['apple', 'pear', 'cherry'];
  3.   // 条件 1: 当 fruit 无效时，提前处理错误
  4.   if (!fruit) throw new Error('没有水果啦');
  5.   // 条件 2: 当不是红色水果时，提前 return
  6.   if (!redFruits.includes(fruit)) return;
  8.   console.log('红色水果');
  10.   // 条件 3: 水果数量大于 10 个
  11.   if (quantity > 10) {
  12.     console.log('数量大于 10 个');
  13.   }
  14. }

技巧2：直接执行对象上的方法替代条件判断

  1. switch (action) {
  2.   case 'add':
  3.     return add()
  4.   case 'update':
  5.     return update()
  6.   case 'list':
  7.     return list();
  8.   default:
  9.     throw 'Not Support Action'
  10. }

优化为：

  1. const handler = {
  2.   add() {},
  3.   update() {},
  4.   list() {}
  5. }
  7. handler(action)()

技巧3：多个字符串相等判断用 includes

  1. if (
  2.   action === 'add' ||
  3.   action === 'update' ||
  4.   action === 'delete'
  5. ) {
  6.   console.log('change')
  7. }

优化为

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

技巧4：对象的属性存在判断用可选链操作符

  1. if (obj && obj.a && obj.a.fn) {
  2.   obj.a.fn()
  3. }

优化为

  1. obj?.a?.fn?.()

参考文档