JavaScript一元判断和多元判断怎么实现
这篇“JavaScript一元判断和多元判断怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript一元判断和多元判断怎么实现”文章吧。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比菏泽网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式菏泽网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖菏泽地区。费用合理售后完善,十余年实体公司更值得信赖。
一、一元判断
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一元判断和多元判断怎么实现”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
网站名称:JavaScript一元判断和多元判断怎么实现
URL标题:http://ybzwz.com/article/jphjoi.html