美文网首页
第 015 期 优化令人生畏的条件语句的 4 个技巧

第 015 期 优化令人生畏的条件语句的 4 个技巧

作者: 前端GoGoGo7 | 来源:发表于2021-04-12 13:18 被阅读0次

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

    优化技巧

    技巧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?.()
    

    参考文档

    相关文章

      网友评论

          本文标题:第 015 期 优化令人生畏的条件语句的 4 个技巧

          本文链接:https://www.haomeiwen.com/subject/cfcxlltx.html