前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第 015 期 优化令人生畏的条件语句的 4 个技巧

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

作者头像
前端GoGoGo
发布2021-04-14 15:02:45
2610
发布2021-04-14 15:02:45
举报

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

优化技巧

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

代码语言:javascript
复制
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('没有水果啦!');
  }
}

优化为:

代码语言:javascript
复制
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:直接执行对象上的方法替代条件判断

代码语言:javascript
复制
switch (action) {
  case 'add':
    return add()
  case 'update':
    return update()
  case 'list':
    return list();
  default:
    throw 'Not Support Action'
}

优化为:

代码语言:javascript
复制
const handler = {
  add() {},
  update() {},
  list() {}
}

handler(action)()

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

代码语言:javascript
复制
if (
  action === 'add' ||
  action === 'update' ||
  action === 'delete'
) {
  console.log('change')
}

优化为

代码语言:javascript
复制
if(['add', 'update', 'delete'].includes(action)) {
  console.log('change')
}

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

代码语言:javascript
复制
if (obj && obj.a && obj.a.fn) {
  obj.a.fn()
}

优化为

代码语言:javascript
复制
obj?.a?.fn?.()

参考文档

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 优化技巧
    • 技巧1:尽早返回无效条件
      • 技巧2:直接执行对象上的方法替代条件判断
        • 技巧3:多个字符串相等判断用 includes
          • 技巧4:对象的属性存在判断用可选链操作符
          • 参考文档
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档