JavaScript中判断的优雅写法示例

目录
  • 前言
  • 一、一元判断
    • 1.1 举个例子🌰
    • 1.2 放入 Object 中
    • 1.3 放入 Map 中
  • 二、多元判断
    • 2.1 举个例子🌰
    • 2.2 将判断条件拼成字符串放入 Object 中
    • 2.3 将判断条件拼成字符串放入 Map 中
    • 2.4 将判断条件放入 Object 后再放入 Map 中
    • 2.5 将判断条件写成 正则 后再放入 Map 中
  • 结语

前言

我们在写 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判断优雅写法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • javascript if条件判断方法小结

    条件语句用于基于不同的条件来执行不同的动作. 条件语句 通常在写代码时,您总是需要为不同的决定来执行不同的动作.您可以在代码中使用条件语句来完成该任务. 在 JavaScript 中,我们可使用以下条件语句: •if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码•if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码•if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行•switch 语句 - 使用

  • js判断输入字符串是否为空、空格、null的方法总结

    判断字符串是否为空 var strings = ''; if (string.length == 0) { alert('不能为空'); } 判断字符串是否为"空"字符即用户输入了空格 var strings = ' '; if (strings.replace(/(^s*)|(s*$)/g, "").length ==0) { alert('不能为空'); } 判断输入字符串是否为空或者全部都是空格 function isNull( str ){ if ( str

  • JS中怎样判断undefined(比较不错的方法)

    最近做项目碰到的问题.拿出来跟大家分享一下吧. 用servlet赋值给html页面文本框值后,用alert来弹出这个值.结果显示"undefined".所以我就自然的用这个值和字符串"undefined"去比较,很不幸,比较的结果是false. 没办法,只能google一下,寻求大神了. 原来必须用typeof,写法就是: 复制代码 代码如下: if(typeof(value)=="undefined"){ alert("undefin

  • JavaScript中判断两个字符串是否相等的方法

    先将用户的输入值全部转换为大写(或小写),然后再行比较: var name = document.form1.txtUserName.value.toLowerCase(); if(name == "urname") { // statements go here. } JavaScript有两种相等运算符.一种是完全向后兼容的,标准的"==",如果两个操作数类型不一致,它会在某些时候自动对操作数进行类型转换,考虑下面的赋值语句: var strA = "

  • js判断为空Null与字符串为空简写方法

    最近突然发现自己写的JavaScript代码比较臃肿,所以开始研究JavaScript的简写方法.这样一来,可以让我们的JavaScript代码看起来比较清爽,同时也可以提高我们的技术.那么判断为空怎么简写呢? 下面就是有关判断为空的简写方法. 代码如下 复制代码 代码如下: if (variable1 !== null || variable1 !== undefined || variable1 !== '') { var variable2 = variable1; } 上面的意思是说如果

  • js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本

    因为ie10-ie11的版本问题,不再支持document.all判断,所以ie判断函数要重新写了 function isIE() { //ie? if (!!window.ActiveXObject || "ActiveXObject" in window) return true; else return false; } 第一种,只区分浏览器,不考虑版本 复制代码 代码如下: function myBrowser(){     var userAgent = navigator.

  • js中怎么判断两个字符串相等的实例

    在javascript判断两个变量值是否相等,可以使用 ==(等同)操作符 或者 ===(恒等)操作符 == 操作符 "等同"操作符,简单判断2个变量值是否相等,变量类型不一致时,会做类型转换,即忽略变量的类型进行比较 例子1 var str1 = "123456" ; // 字符串 var str2 = "123456" ; // 字符串 alert(str1==str2) ; // 打印出 true,即相等 例子2 var str1 = 12

  • JS中判断某个字符串是否包含另一个字符串的五种方法

    String对象的方法 方法一: indexOf()   (推荐) var str = "123" console.log(str.indexOf("2") != -1); // true indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则该方法返回 -1. 方法二:match() var str = "123" var reg = RegExp(/3/); if(str.match(reg

  • JS中判断null、undefined与NaN的方法

    写了个 str ="s"++; 然后出现Nan,找了一会. 收集资料如下判断: 1.判断undefined: var tmp = undefined; if (typeof(tmp) == "undefined"){ alert("undefined"); } 说明:typeof 返回的是字符串,有六种可能:"number"."string"."boolean"."object

  • js判断一个字符串是否包含一个子串的方法

    本文实例讲述了js判断一个字符串是否包含一个子串的方法.分享给大家供大家参考.具体如下: 在我们前端日常开发中,经常会遇到判断一个字符串中是否包含某个子串,这里我们将去探究一些解决此种需求的方法以及正确的使用它们.理想情况下,我们要找的是一个能匹配我们的目的(if x contains y)的方法,并返回true或false. 一.String.prototype.indexOf和String.prototype.lastIndexOf 这两个方法,可能是我们最容易想到的,如果包含子串,则返回大

随机推荐