请选择 进入手机版 | 继续访问电脑版

一行代码实现 if 判断, 多结果判断

[复制链接]
来自北方 发表于 2021-1-1 17:47:30 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
JavaScript 中判定运算是最常见的运算之一, 最通例的固然就是 if
但最常用, 最机动的却另有其"人"
与运算符

使用了与运算符的特性, 第一项为 false 时, 不执行背面直接返回第一项效果
用法: statement1 && statement2
注意: statement1 需要 return 一个布尔值, 否则会认为 undefined
  1. //  完整 demo 在文末console.log(_true && true_fun());// 执行 true_fun()// 返回 true_fun() 的执行效果console.log(_false && true_fun());// 不执行 true_fun()// 返回 _falseconsole.log(true_fun() && false_fun());// 执行 true_fun() 后执行 false_fun()// 返回 false_fun() 的执行效果console.log(false_fun() && true_fun());// 执行 false_fun()// 不执行 true_fun()// 返回 false_fun() 的执行效果
复制代码
条件运算符

条件运算符又叫三元表达式, 三元运算符,
条件运算符的语法很直白, 判定 condition
condition 为 true 执行 statement1
condition 为 false 执行 statement2
用法: condition ? statement1 : statement2
  1. //  完整 demo 在文末console.log(_true ? true_fun() : false_fun());// 执行 true_fun()// 返回 true_fun() 的执行效果console.log(_false ? true_fun() : false_fun());// 执行 false_fun()// 返回 false_fun() 的执行效果
复制代码
使用匿名数组实现多效果判定

无论 if_else, &&, ?_: 都是收支一个布尔值, 返回两个预期效果中的一个
当遇到多给预期效果时, 就会用到 switch_case, 大概用多层 if_else 嵌套来实现
虽然功能能正确执行, 但是代码量比力大, 可读性比力差
这里有个相对轻量级的, 可以实现多效果判定的方法
都知道一个数组, 通过 [] 传入一个合法下标, 即可得到对应的项的内容
使用数组的这个功能, 就可以实现多效果判定
用法: [statement1, statement2, statement3 …][condition]
注意:


  • condition 传入的不是布尔值, 而是目标项的下标值
  • 把匿名数组改成具名数组, 可以实现复用
  1. //  完整 demo 在文末var condition = 0console.log([statement1_fun, statement2_fun, statement3_fun][condition]())// 返回 statement1_fun 方法自己// 返回效果后, 用 () 实现执行方法console.log(["男", "女", "未知"][condition])condition = 1console.log([statement1_fun, statement2_fun, statement3_fun][condition]())console.log(["男", "女", "未知"][condition])condition = 2console.log([statement1_fun, statement2_fun, statement3_fun][condition]())console.log(["男", "女", "未知"][condition])// 与前例同理
复制代码
使用匿名对象实现多效果判定

这个方法实在就是 “使用匿名数组实现多效果判定” 的拓展
数组变成对象, 传入下标变成传入属性名
使用对象属性名的多样性, 实现更复杂的判定需求
相对的, 代码复杂度会提高, 可读性变差, 失去了"一行代码"的轻便
用法: { statement1: “statement1”, statement2: “statement2”, statement3: “statement3” … }[condition]
注意: 如果你以为写出来的代码难以阅读, 说明你遇到的需求并不适合使用这个方法
  1. var condition = "a"console.log({ a: "a", b: "b", c: "c" }[condition])// 代码变得复杂了, 倒霉于阅读, 大概你最后会以为 switch_case 或 多层 if_else 反而更好用
复制代码
完整 Demo

单独执行一个 step 更容易明白
  1. function true_fun() {        console.log("true")        return 1}function false_fun() {        console.log("false")        return 0}function statement1_fun() {        console.log("statement1_fun")        return "statement1_fun"}function statement2_fun() {        console.log("statement2_fun")        return "statement2_fun"}function statement3_fun() {        console.log("statement3_fun")        return "statement3_fun"}var _true = 1;var _false = 0;function step1() {        console.log(_true && true_fun());        // 执行 true_fun()        // 返回 true_fun() 的执行效果        console.log(_false && true_fun());        // 不执行 true_fun()        // 返回 _false        console.log(true_fun() && _true);        // 执行 true_fun()        // 返回 _true        console.log(true_fun() && false_fun());        // 执行 true_fun() 后执行 false_fun()        // 返回 false_fun() 的执行效果        console.log(false_fun() && true_fun());        // 执行 false_fun()        // 不执行 true_fun()        // 返回 false_fun() 的执行效果};function step2() {        console.log(_true ? true_fun() : false_fun());        // 执行 true_fun()        // 返回 true_fun() 的执行效果        console.log(_false ? true_fun() : false_fun());        // 执行 false_fun()        // 返回 false_fun() 的执行效果};function step3() {        var condition = 0        console.log([statement1_fun, statement2_fun, statement3_fun][condition]())        // 返回 statement1_fun 方法自己        // 返回效果后, 用 () 实现执行方法        console.log(["男", "女", "未知"][condition])        condition = 1        console.log([statement1_fun, statement2_fun, statement3_fun][condition]())        console.log(["男", "女", "未知"][condition])        condition = 2        console.log([statement1_fun, statement2_fun, statement3_fun][condition]())        console.log(["男", "女", "未知"][condition])        // 与前例同理}function step4() {        var condition = "a"        console.log({                a: "a",                b: "b",                c: "c"        }[condition])        // 代码变得复杂了, 倒霉于阅读, 大概你最后会以为 switch_case 或 多层 if_else 反而更好用}step1()step2()step3()step4()
复制代码
end

来源:https://blog.csdn.net/u013970232/article/details/112055652
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )