专栏首页前端皮小蛋?️ 一种使用 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";
}

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

结论

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

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

今天的内容就这么多

希望对大家有所帮助 :)

本文分享自微信公众号 - 前端皮小蛋(gh_e69260c16440),作者:南山皮小蛋

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-04-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React 条件渲染最佳实践(7 种方法)

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

    秋风的笔记
  • Java Review (四、流程控制)

    不论哪一种编程语言,都会提供两种基本的流程控制结构:分支结构和循环结构。其中分支结构用 于实现根据条件来选择性地执行某段代码,循环结构则用于实现根据循环条件重复...

    三分恶
  • [浅析]特定场景下取代if-else和switch的方案

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

    守候i
  • Python 为什么不支持 switch 语句?

    在这篇文章里,我们会聊一聊为什么 Python 决定不支持 switch 语句。

    Python进击者
  • 流程控制

    练习:提示用户输入一个整数。如果该整数是5的倍数,打印“5的倍数”如果是2的倍数打印“2的倍数”

    泰斗贤若如
  • Python 为什么不支持 switch 语句?

    主要是因为 switch 在其它语言中太常见了,而 Python 却不支持,这样的独特性本身就值得关注,而回答这个问题,也能更加看清 Python 在程序设计上...

    Python猫
  • Python 为什么不支持 switch 语句?

    主要是因为 switch 在其它语言中太常见了,而 Python 却不支持,这样的独特性本身就值得关注,而回答这个问题,也能更加看清 Python 在程序设计上...

    崔庆才
  • 条件语句小技巧

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

    dys
  • go从已知列表中查找字符串

    songleo
  • 编程小知识之switch语句

    switch 语句大家都不陌生,平时在遇到较多相同的 if 语句判断时就会想到他,举个简单的例子:

    用户2615200
  • 嘿~这里有一份超实用的 switch 教程,真的好想推荐给你

    在上次推文中介绍了关系运算符和条件运算符,今天介绍它们的好搭档,分支结构。如下图所示,左侧是顺序结构,右侧是分支结构

    谭庆波
  • 《快学 Go 语言》第 3 课 —— 分支与循环

    上面这个等式每一个初学编程的同学都从老师那里听说过。它并不是什么严格的数据公式,它只是对一般程序的简单认知。数据结构是内存数据关系的静态表示,算法是数据结构从一...

    老钱
  • Go语言条件语句

    Go语言的条件语句在概念和流程上与其他编程语言完全相同,因此这里不再赘述,写法上结合了Python和C++,即条件表达式不需要加括号,但仍然保留了花括号。具体例...

    Steve Wang
  • 对复杂if-else代码块的优化方案

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

    冬天里的懒猫
  • 前端day09-JS学习笔记

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

    帅的一麻皮
  • Go 语言学习之流程控制

    在 Go 语言中,if...else... 语句的条件表达式必须是布尔类型,可以省略小括号,并且左大括号不能另起一行。通过代码,我们演示 if...else.....

    frank.
  • Go 专栏|流程控制,一网打尽

    最近看奥运会看的我热血沸腾,中国奥运健儿简直太棒了,不只是成绩,还有气质,精气神,全方位的棒。

    AlwaysBeta
  • 9个小技巧让你的 if else看起来更优雅

    if else 是我们写代码时,使用频率最高的关键词之一,然而有时过多的 if else 会让我们感到脑壳疼,例如下面这个伪代码:

    Java中文社群-磊哥
  • 流程控制

    在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

    星辰_大海

扫码关注云+社区

领取腾讯云代金券