学习
实践
活动
专区
工具
TVP
写文章
专栏首页前端皮小蛋?️ 一种使用 if-else / switch 更好的方式

?️ 一种使用 if-else / switch 更好的方式

is-else & switch

背景

今天面试了一天, 累坏了, 发一篇简单的, 示例代码参考了Jack Taylor。

前两天做 Code Review 的时候, 发现很多 if-else / switch 语句,并不是特别优雅。在一些逻辑复杂的地方,看起来比较臃肿, 不是那么好读。

举个例子:

function getTranslation(rhyme) {
  const lowercasedRhyme = rhyme.toLowerCase();
  if ( lowercasedRhyme === "apples and pears") {
    return "Stairs";
  } else if (lowercasedRhyme === "hampstead heath") {
    return "Teeth";
  } else if (lowercasedRhyme === "loaf of bread") {
    return "Head";
  } else if (lowercasedRhyme === "pork pies") {
    return "Lies";
  } else if (lowercasedRhyme === "whistle and flute") {
    return "Suit";
  }
  return "Rhyme not found";
}

这样做看起来十分臃肿, 而且做了太多 lowercasedRhyme === 'xxx'的判断, 以后有一个新的分支, 都需要判断一次。

如果换成 switch 语句:

function getTranslation(rhyme) {
  switch (rhyme.toLowerCase()) {
    case "apples and pears":
      return "Stairs";
    case "hampstead heath":
      return "Teeth";
    case "loaf of bread":
      return "Head";
    case "pork pies":
      return "Lies";
    case "whistle and flute":
      return "Suit";
    default:
      return "Rhyme not found";
  }
}

情况有所改善, 但是依旧显得臃肿,我们只需要返回一个值。

遇到具有更复杂的功能时,也很容易错过 break声明, 造成错误。

再换一种方式:

function getTranslationMap(rhyme) {
  const rhymes = {
    "apples and pears": "Stairs",
    "hampstead heath": "Teeth",
    "loaf of bread": "Head",
    "pork pies": "Lies",
    "whistle and flute": "Suit",
  };
  return rhymes[rhyme.toLowerCase()] ?? "Rhyme not found";
}

我们直接使用 key-value 的形式去取用数据, 最后用 ?? 最为兜底。

这里的 ??, 就是所谓的空位合并运算符 :

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

不熟悉的朋友, 可以去看一下文档: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

如果遇到了更复杂一点的逻辑, 在适合的场景也可以用这种方式来做, 比如:

function calculate(num1, num2, action) {
  const actions = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
    divide: (a, b) => a / b,
  };

  return actions[action]?.(num1, num2) ?? "Calculation is not recognised";
}

有一点注意一下,这里我们同时用到了 ?.?? 操作符。

结论

今天讨论的这个问题,其实比较主观, 带有一定的个人偏好。

代码的可读性可维护性, 应该是我们都需要注意的。

今天的内容就这么多

希望对大家有所帮助 :)

文章分享自微信公众号:
前端皮小蛋

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

作者:南山皮小蛋
原始发表时间:2021-04-17
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 以更好的方式使用 Vue Mixins

    Mixin 组件在项目中经常被用来重用一些业务逻辑,但它们有一些不确定的细微差别,这在项目开发中越来越明显。我偶尔也会遇到这种情况,它们会给代码库的重构或新功能...

    前端小智@大迁世界
  • 介绍一种使用poweshell 监控的方式

    本篇将使用PowerShell脚本对SQL Server 的关键指标进行监控. 以下,用数据库空间容量为例,实现一下逻辑: 一、建表 为每台服务器创建一个...

    用户1217611
  • Java中枚举类型Enum的一种使用方式

    再比如,我们在操作数据库的时候,通常使用数字保存到数据库中,但是在界面上显示的时候,需要展示其中文意思,那么我们就可以通过下边的方式:

    Java后端技术
  • 浅谈Android AsyncTask内存安全的一种使用方式

    内部类和内部匿名类会导致内存泄漏,所以很多时候异步代码写的很多。之后一直在想,异步代码到底应该怎么写。怎么才是规范的写法。怎么才是简洁的写法。

    砸漏
  • 在FME中使用循环的另一种方式

    循环可以让很多数据处理的工作变得简单。透过循环,也可以让FME魔板更加简洁! 在之前的推送使用FME沿线生成点(二)中,使用了循环来沿着线来均匀的生成点。今天,...

    数据处理与分析
  • React 条件渲染最佳实践(7 种方法)

    在 React 中,条件渲染可以通过多种方式,不同的使用方式场景取决于不同的上下文。在本文中,我们将讨论所有可用于为 React 中的条件渲染编写更好的代码的方...

    秋风的笔记
  • Java程序优化之替换swtich

    关键字switch语句用于多条件判断,功能类似于if-else语句,两者性能也差不多,不能说switch会降低系统性能。在绝大部门情况下,switch语句还是有...

    纪莫
  • 条件语句小技巧

    “高性能javascript” 这本书中提到了一个“查找表”的概念,建议在有大量离散值要测试时,if-else 和 switch 都比使用查找表慢很多,依据是运...

    dys
  • 前端day09-JS学习笔记

    .注意点 : if-else if -else结构中必须以if开头,中间的else if可以是多个,末尾的esle可以省略(一般都不会省略)

    帅的一麻皮
  • 研究人员使用宽场脑成像技术研究意图控制,探索更好的脑机接口使用方式

    通过我们对外部物体的感官体验,可以有效地控制外部物体。为了研究因果关系的学习和影响方式,研究人员设计了一种使用宽场钙信号(wide-field calcium ...

    脑机接口社区
  • 还在用策略模式解决 if-else?Map+函数式接口方法才是YYDS!

    点击上方“芋道源码”,选择“设为星标” 管她前浪,还是后浪? 能浪的浪,才是好浪! 每天 10:33 更新文章,每天掉亿点点头发... 源码精品专栏 原创 |...

    芋道源码
  • 对复杂if-else代码块的优化方案

    对于很多码农而言,if-else可能是最高频的代码关键字,毕竟,这也比较符合人们二维思考问题的方式,试想大部分问题的答案都是只有两个维度,要么true,要么fa...

    冬天里的懒猫
  • if-else与switch

    对于条件分支语句,在设计条件的时候,需要考虑实际执行情况,才能提高效率,可以参考之前的博客:

    全栈程序员站长
  • JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式!

    在单线程环境中编程的缺陷以及如何解决这些缺陷来构建健壮的JavaScript UI。按照惯例,在本文的最后,分享5个如何使用async/ wait编写更简洁代码...

    Javanx
  • JavaScript优化技巧

    作为开发人员,我们一直在寻找让我们的代码更快更好的方法。但在此之前,编写高性能代码需要做三件事:

    前端小智@大迁世界
  • [浅析]特定场景下取代if-else和switch的方案

    相信很多人有这样的经历,在项目比较忙的时候,都是先考虑实现,用当时以为最好的方式先实现方案,在项目不忙的时候,再看下以前代码,想下有什么更好的实现方案,或者优化...

    守候i
  • Java程序设计的基本结构 - 选择结构

    使用if-else选择结构时,一个最基本的原则就是一定会有一个判断条件,并且如果出现else一定会有一个与之对应的if。

    一头小山猪

作者介绍

皮小蛋

Shopee前端工程师

Shopee · 前端工程师 (已认证)

专栏

精选专题

活动推荐

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券