JavaScript中判断的优雅写法示例

2024-04-02 19:04:59 739人浏览八月长安

摘要

目录前言一、一元判断1.1 举个例子🌰1.2 放入 Object 中1.3 放入 Map 中二、多元判断2.1 举个例子🌰2.2 将判断条件拼成字符串

前言

我们在写 javascript 时经常遇到一些逻辑判断，可以使用 if/else 或者 switch 来实现，但是对于复杂的判断，过多的条件往往会让我们的代码变得冗长，可读性下降。故我们需要优化我们的代码，使之更优雅💎。

一、一元判断

1.1 举个例子🌰

我们写一个常见的 if/else 判断的函数，然后对他进行优化。


const myFunction = (status) => {
  if (status === 1) {
    console.log("status1");
  } else if (status === 2) {
    console.log("status2");
  } else if (status === 3) {
    console.log("status3");
  }
};

1.2 放入 Object 中

我们知道， JavaScript 的 Object 其实就是一些键值对的无序集合，正因如此我们可以借助其存放判断的条件。例如上述情况，判断条件是一个数字类型，后续操作也仅仅是用到了一个字符串，这时我们就可以创建一个对象，把所用到的数字和字符串分别作为 Object 的键名和对应值。


// 将判断条件放入 Object 中
const statusObj = {
  1: "status1",
  2: "status2",
  3: "status3",
};

// 优化后函数💎
const myFunction = (status) => {
  console.log(statusObj[status]);
};

1.3 放入 Map 中

除了原始对象以外，我们还可以使用 Map 对象。我们来看下 MDN 对其的描述：

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。

不难看出，Map 对象其实就是普通对象的加强版，特别是任何值都可以作为其键值对，这意味着函数、正则等也可以作为其键或值，这也就大大方便了我们将其作为判断的操作。具体关于 Map 对象的细节此处不再展开。


// 将判断条件放入 Map 中
const statusMap = new Map([
  [1, "status1"],
  [2, "status2"],
  [3, "status3"],
]);

// 优化后函数💎
const myFunction = (status) => {
  console.log(statusMap.get(status));
};

二、多元判断

2.1 举个例子🌰

既然一元判断可以优化，那么多元判断也可以进行优化，下面是有两种判断条件的案例。


// 举个例子🌰
const myFunction = (right, status) => {
  if (right === "administrator" && status === 1) {
    console.log("管理员喜欢王冰冰");
  } else if (right === "administrator" && status === 2) {
    console.log("管理员不喜欢王冰冰");
  } else if (right === "user" && status === 1) {
    console.log("用户喜欢王冰冰");
  } else if (right === "user" && status === 2) {
    console.log("用户不喜欢王冰冰");
  }
};

// 有重复情况的例子🌰
const myFunction = (right, status) => {
  if (right === "administrator" && status === 1) {
    console.log("管理员喜欢王冰冰");
  } else if (right === "administrator" && status === 2) {
    console.log("管理员喜欢王冰冰");
  } else if (right === "user" && status === 1) {
    console.log("用户喜欢王冰冰");
  } else if (right === "user" && status === 2) {
    console.log("用户喜欢王冰冰");
  }
};

2.2 将判断条件拼成字符串放入 Object 中

两种情况也同样可以用 Object 进行优化。


// 优化"例子🌰"

// 将判断条件放入 Object 中
const actionsObj = {
  "administrator-1": "管理员喜欢王冰冰",
  "administrator-2": "管理员不喜欢王冰冰",
  "user-1": "用户喜欢王冰冰",
  "user-2": "用户不喜欢王冰冰",
};

// 优化后函数💎
const myFunction = (right, status) => {
  console.log(actionsObj[`${right}-${status}`]);
};

// 可以将函数作为"value",以下几种情况类似,不再赘述🥕
const actionsObj = {
  "administrator-1": () => console.log("管理员喜欢王冰冰"),
  "administrator-2": () => console.log("管理员喜欢王冰冰"),
  "user-1": () => console.log("管理员喜欢王冰冰"),
  "user-2": () => console.log("管理员喜欢王冰冰"),
};

// 优化后函数💎
const myFunction = (right, status) => {
  actionsObj[`${right}-${status}`]();
};

// 优化"有重复情况的例子🌰"
// 可以提取公共函数,以下几种情况类似,不再赘述🍓
const actions = () => {
  const f1 = () => console.log("管理员喜欢王冰冰");
  const f2 = () => console.log("用户喜欢王冰冰");

  return {
    "administrator-1": f1,
    "administrator-2": f1,
    "user-1": f2,
    "user-2": f2,
  };
};

// 优化后函数💎
const myFunction = (right, status) => {
  actions()[`${right}-${status}`]();
};

2.3 将判断条件拼成字符串放入 Map 中

同样的，我们也可以用 Map 对象。我们把两个条件存成字符串。


// 优化"例子🌰"

// 将判断条件放入 Map 中
const actionsMap = new Map([
    ['administrator-1', '管理员喜欢王冰冰'],
    ['administrator-2', '管理员不喜欢王冰冰'],
    ['user-1', '用户喜欢王冰冰'],
    ['user-2', '用户不喜欢王冰冰']
]);

// 优化后函数💎
const myFunction = (right, status) => {
    console.log(actionsMap.get(`${right}-${status}`));
};

2.4 将判断条件放入 Object 后再放入 Map 中


// 优化"例子🌰"

// 将判断条件放入 Map 中
const actionsMap = new Map([
    [{ right: 'administrator', status: 1 }, () => console.log('管理员喜欢王冰冰')],
    [{ right: 'administrator', status: 2 }, () => console.log('管理员不喜欢王冰冰')],
    [{ right: 'user', status: 1 }, () => console.log('用户喜欢王冰冰')],
    [{ right: 'user', status: 2 }, () => console.log('用户不喜欢王冰冰')]
]);

// 优化后函数💎
const myFunction = (right, status) => {
    const action = [...actionsMap].filter(([e]) => (e.right === right && e.status === status));
    action.forEach(([_, index]) => index.call());
};

2.5 将判断条件写成正则后再放入 Map 中

利用正则表达式可以处理相对复杂一点的情况。


// 优化"有重复情况的例子🌰"

// 将判断条件写成 正则 后再放入 Map 中
const actions = () => {
    const f1 = () => console.log('管理员喜欢王冰冰');
    const f2 = () => console.log('用户喜欢王冰冰');

    return new Map([
        [/^administrator-[1-2]/, f1],
        [/^user-[1-2]/, f2]
    ]);
};

// 优化后函数💎
const myFunction = (right, status) => {
    const action = [...actions()].filter(([e]) => e.test(`${right}-${status}`));
    action.forEach(([_, index]) => index.call());
};

结语

我们利用原生 Object 和 Map 对象对判断进行了优化，不过在真正的开发过程中，我们还是要遵循实用优先的原则，避免过度优化。

到此这篇关于JavaScript中判断的优雅写法的文章就介绍到这了,更多相关JavaScript判断优雅写法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript中判断的优雅写法示例

本文链接: https://www.lsjlt.com/news/154628.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

JavaScript中判断的优雅写法示例

目录前言一、一元判断1.1 举个例子🌰1.2 放入 Object 中1.3 放入 Map 中二、多元判断2.1 举个例子🌰2.2 将判断条件拼成字符串...

99+

2024-04-02
Java8 Optional优雅空值判断的示例代码

先介绍一下API，与其他文章不同的是，本文采取类比的方式来讲，同时结合源码。而不像其他文章一样，一个个API罗列出来，让人找不到重点。 1、Optional(T value),emp...

99+

2024-04-02
javascript中类型判断的示例分析

小编给大家分享一下javascript中类型判断的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Javascript中数...

99+

2024-04-02
js中boolean判断的示例

这篇文章将为大家详细讲解有关js中boolean判断的示例，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。JavaScript是什么JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为...

99+

2023-06-14
Python中优雅使用assert断言的方法实例

目录什么是 assert 断言断言和异常的使用场景使用断言的几个原则建议不使用断言的情况：总结什么是 assert 断言 Assert statements are a co...

99+

2024-04-02
Java中List常用操作比for循环更优雅的写法示例

目录引言简单遍历筛选符合某属性条件的List集合获取某属性返回新的List集合获取以某属性为key，其他属性或者对应对象为value的Map集合以某个属性进行分组的Map集合其他情况...

99+

2024-04-02
Oracle数仓中判断时间连续性的几种SQL写法示例

零、需求介绍现有一张表数据如下：此表是一张镜像表，policyno列代表一个保单号，state列代表这个保单号在snapdate当天的最后一次状态（state每天可能会变很多次，镜像表只保留snapdate时间点凌...

99+

2023-02-05

oracle 判断时间 oracle判断时间连续性 oracle判断日期是否连续
基于javascript中typeof和类型判断的示例分析

小编给大家分享一下基于javascript中typeof和类型判断的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！typ...

99+

2024-04-02
JavaScript中$(function(){})写法的示例分析

小编给大家分享一下JavaScript中$(function(){})写法的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！$(function(){})写...

99+

2023-06-03
php中null判断的示例分析

这篇文章给大家分享的是有关php中null判断的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。关于null判断//写法一 is_null($a); //写法二 $a&nb...

99+

2024-04-02
python中如何优雅的一次性判断多个条件

这篇文章主要介绍python中如何优雅的一次性判断多个条件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！优雅的一次性判断多个条件假如有三个条件，只要有一个为真就可以通过，也许你会这么写：x, y, ...

99+

2023-06-27
如何在JavaScript中优化逻辑判断

如何在JavaScript中优化逻辑判断？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。嵌套层级优化function supply(fruit, quan...

99+

2023-06-15
JS优雅的写法有哪些

今天小编给大家分享一下JS优雅的写法有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。JS的一些优雅写法reduce可以使...

99+

2023-07-05
PHP中null判断赋值的示例分析

小编给大家分享一下PHP中null判断赋值的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！null判断赋值几种写法//当...

99+

2024-04-02
javascript中判断数据类型的方法

这篇文章主要介绍了javascript中判断数据类型的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。js判断数据类型的方法：1、利用typeof操作符，语法“typeof...

99+

2023-06-15
Python优雅的写法有哪些

本篇内容介绍了“Python优雅的写法有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！为多个变量赋值有时，有多个变量需要赋值，这时你会怎...

99+

2023-06-17
Vue后台中优雅书写状态标签的方法实例

目录前言优化抽离变量二次封装 el-tag 组件使用总结前言在后台系统开发中，对于列表，常常有一些状态字段的展示，比如审核状态、退货申请状态等等，并且往往伴随有状态筛选的列表查询...

99+

2024-04-02
怎么写出优雅耐看的JavaScript代码

这篇文章主要介绍“怎么写出优雅耐看的JavaScript代码”，在日常操作中，相信很多人在怎么写出优雅耐看的JavaScript代码问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解...

99+

2024-04-02
JavaScript条件判断与比较运算示例代码

目录一、条件判断二、比较运算一、条件判断 JavaScript 中有三种方法可以用来进行条件判断： 1、使用 if-else 语句。这种方法用于在特定条件为 true 时执行一段代码...

99+

2023-01-29

js比较运算 js 条件判断
javascript中判断闰年的方法是什么

这篇文章主要介绍“javascript中判断闰年的方法是什么”，在日常操作中，相信很多人在javascript中判断闰年的方法是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解...

99+

2024-04-02