在JavaScript中使用Switch(true)模式

原文：https://seanbarry.dev/posts/switch-true-pattern

翻译：前端开发博客公众号

有一种似乎不太为人所知的简洁模式。在我加入Vortexa的应用程序开发团队（我们正在招聘）之前，我实际上还没有听说过它-但是现在我经常使用它。它称为switch true，非常简单。

基本介绍

大多数JavaScript开发人员都熟悉switch语句（mdn docs），但是对于那些刚接触该语言的人，让我们简要地介绍一下它。

switch语句使您可以将表达式与多种不同情况之一进行匹配：

const city = "London";

const getCountryByCity = () => {
  switch (city) {
    case "Edinburgh":
      return "Edinburgh is the capital city of Scotland";
    case "Madrid":
      return "Madrid is the capital city of Spain";
    case "London":
      return "London is the capital city of England";
    default:
      return "Cannot find which country this city is the capital of.";
  }
};

在这个例子中，表达式（城市变量）与switch语句中的每个case相匹配。如果案例与表达式的结果相匹配，案例将被执行--在这个例子中，它将返回一个字符串。

Switch (true)

switch true模式的基本原则是，你可以与表达式以及值相匹配。案例中的表达式将在匹配前被评估。如果你的案例中的表达式被评估为 "真"，它将被匹配。

switch (true) {
  case 1 + 1 === 2:
  // This case evaluates to true so it will be executed
  default:
  // This will not be executed
}

为什么这很有用

这种模式可以在许多不同的情况下使用--通常用来替代复杂的if/else语句。

一个常见的情况是，如果你正在验证数据，并且有一组标准会导致验证失败，这种模式就会变得很方便。

const user = {
  firstName: "Seán",
  lastName: "Barry",
  email: "my.address@email.com",
  number: "00447123456789",
};

if (!user) {
  throw new Error("User must be defined.");
} else if (!user.firstName) {
  throw new Error("User's first name must be defined");
} else if (typeof user.firstName !== "string") {
  throw new Error("User's first name must be a string");
} else if (// ... lots more validation here)

return user;

这可以用switch true这样的方式重新编写。

const user = {
  firstName: "Seán",
  lastName: "Barry",
  email: "my.address@email.com",
  number: "00447123456789",
};

switch (true) {
  case !user:
    throw new Error("User must be defined.");
  case !user.firstName:
    throw new Error("User's first name must be defined");
  case typeof user.firstName !== "string":
    throw new Error("User's first name must be a string");
  default:
    return user;
}

在写if/else和switch true时，都可以抽象出验证标准，以提高可读性。

switch (true) {
  case !isDefined(user):
    throw new Error("User must be defined.");
  case !isString(user.firstName):
    throw new Error("User's first name must be a string");
  case !isValidEmail(user.email):
    throw new Error("User's email address must be a valid email address");
  case !isValidPhoneNumber(user.number):
    throw new Error("User's phone number must be a valid phone number");
  // any number of other validation cases here
  default:
    return user;
}

总结

在我看来，这种模式在检查多个条件时比大量的if/else块提供了更清晰的可读性。我相信这将会是一个很有争议的问题，但是了解这些模式总是很有用的，这样在适当的时候就可以使用它们。

- EOF -

推荐阅读  点击标题可跳转

[译] 7 个基础 JavaScript 函数

50道JavaScript基础面试题（附答案）

写好 JS 条件语句的 5 条守则

觉得本文对你有帮助？请分享给更多人

推荐关注「前端开发博客」，提升前端技能

后台回复以下关键字：

1. 回复「1024」领取前端进阶资料

2. 回复「电子书」领取海量面试和JS资料

3. 回复「资料」领取前端群分享及培训机构的资料
   

4. 回复「Vue」获取 Vue 精选文章

5. 回复「面试」获取 面试 精选文章

6. 回复「JS」获取 JavaScript 精选文

7. 回复「CSS」获取 CSS 精选文章

如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~

大家点个在看，星标我的公众号，及时获得推文。