JavaScript中如何实现判断

发布时间:2021-10-18 09:16:51 作者:小新
阅读:122
前端开发者专用服务器,限时0元免费领! 查看>>

这篇文章将为大家详细讲解有关JavaScript中如何实现判断,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

一、一元判断

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());
};

关于“JavaScript中如何实现判断”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:
  1. javascript中如何判断数据类型
  2. JavaScript中复杂判断的用法

开发者交流群:

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:Nginx反向代理学习是怎么样的

下一篇:怎么 利用python实现词频统计功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
开发者交流群×