前言在日常的前端开发过程中，ifelse判断语句的使用应该比较频繁。一些比较复杂的场景可能会用到很多判断。当一段代码大量使用ifelse时，代码会显得冗余，阅读起来不够清晰。除了ifelse，逻辑运算符&&||和三木操作员？:在开发过程中经常使用。ifelse基本上使用letname="zhangsan";if(name==="zhangsan"){console.log("zhangsan");//zhangsan}else{console.log("lisi");}简化if判断，优化代码单行ifelseif(name==="zhangsan")console.log("zhangsan");elseconsole.log("丽丝");使用&&||优化letuserInfo={name:"zhangsan",};if(userInfo.name==="zhangsan"){console.log("zhangsan");}if(!userInfo.age){//userInfo.age-->false年龄属性不存在console.log("年龄属性不存在");}userInfo.name==="zhangsan"&&console.log("zhangsan");userInfo.age||console.log("年龄属性不存在");//age属性不存在使用三元运算符优化letname="zhangsan";name==="zhangsan"?console.log("zhangsan"):console.log("lisi");mergeifletuserObj={name:"zhangsan",children:{name:"lisi"}};if(userObj.children){if(userObj.children.name=="lisi"){console.log(userObj.children.name);}}if(userObj.children&&userObj.children.name=="lisi")console.log(userObj.children.name);useincludesorindexofletage="22";if(age=="22"||age=="24"||age=="25"){console.log(age);}letageArray=["22","24","25"];if(ageArray.includes(age)){console.log(age);}if(ageArray.indexOf(age)>-1){console.log(age);}使用switch流程优化多个ifelseletval="lisi";switch(val){case"zhangsan":console.log(val);休息;case"lisi":console.log(val);休息;case"小明":console.log(val);休息;case"小王":console.log(val);休息;default:console.log(val);}使用objectkey-value优化多个if语句letuserArray=[{name:"zhangsan"},{name:"lisi"},{name:"xiaoming"},{name:"xiaowang"},];//多个ifelseif(userArray.name==="zhangsan"){console.log(userArray.name);}elseif(userArray.name==="lisi"){console.log(userArray.name);}elseif(userArray.name==="小明"){console.log(userArray.name);}elseif(userArray.name==="小王"){console.log(userArray.name);}else{console.log("其他用户");}functiongetUser(username){returnuserArray.filter((item)=>item.name==username)[0];}console.log(getUser("张三"));使用mapletfilterUser=function(username){return`nameis${username}`;};letuserMap=newMap([["zhangsan",filterUser("zhangsan")],["lisi",filterUser("lisi")],["xiaoming",filterUser("xiaoming")],["xiaowang",filterUser("小王")],]);console.log(userMap.get("zhangsan"));//名字为zhangsan推荐一些常用的JavaScript语法糖箭头函数/***箭头函数***/functionuserInfo(name,age){return`名字是：${name}，年龄是：${age}`;}letuserInfo=(name,age)=>`The名字是：${name}，年龄是：${age}`；console.log(userInfo("张三","23"));三元运算符处理函数functionlog1(){console.log(1);}functionlog2(){console.log(2);}letnum=2;if(num===1){log1();}else{log2();}num===1?log1():log2();函数默认参数处理letgetUser=(name="zhangsan",age=23)=>`nameis:${name},ageis:${age}`;console.log("默认参数",getUser());console.log("传参",getUser("lisi",29));数据类型转换letnum1=+"123";console.log(num1);Null、UndefinedBoolean等特殊值处理，使用||combination!/****Null,UndefinedBoolean等特殊值处理，使用||组合！***/letname1=undefined;letname2=null;letname3=true;letname4=false;letname5="lisi";console.log(name1||"其他");//其他console.log(name2||"其他");//其他人console.log(name3||"其他人");//trueconsole.log(!name3||"其他人&“；”）；//其他console.log(name4||"其他");//其他console.log(name5||"其他");//lisiconsole.log(!name5||"其他人");//别人链判断运算符?。运算时会先从左到右执行运算符，左边的对象是否为null或undefined，如果是，则不再执行右边的运算，而是返回undefined更多链式判断运算符，请参考链判断算子https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chainingletuser={name:"zhangsan",children:{name:"lisi",children:{name:"xiaoming"}},};letname1=user?.name;letname2=user?.children?.name;letname3=user?.children?.children?.name;console.log(name1);console.log(name2);console.log(name3);nullcoalescingoperator??概念空合并运算符（??）是一个逻辑运算符，当左操作数为空或未定义时，返回右操作数，否则返回左操作数。与逻辑或运算符(||)不同，逻辑或运算符在左操作数为假时返回右操作数。如果你使用||为某些变量设置默认值，您可能会遇到意想不到的行为。比如当false时（例如，''或0）。constfoo=null??“默认字符串”；const测试=未定义??“默认字符串”；consttest1=123??“默认字符串”；控制台日志（测试）；//“默认字符串”console.log(foo);//“默认字符串”console.log(test1);//123constbaz=0??42；控制台日志（baz）；//0conststr=""??42；conststr1=“”||42；控制台日志（str）；//""console.log(str1);//42总结以上是if代码优化的一些建议。ifelse在使用的过程中有时候会比较麻烦，但是判断语句是否对if语句进行优化也是一种比较直接的方式，还是要根据具体的业务场景来做。个人需要判断JavaScript的语法糖。在日常的开发过程中，可以省去一些繁琐的判断或者语义ES6或者以后版本的ECMA语法更新很多，对于一些语法扩展，在开发过程中还是提供了很多帮助。源码地址码云https://gitee.com/lewyon/vue-notegithubhttps://github.com/akari16/vue-note文章博客地址：JavaScript中的if语句优化和一些语法糖技巧推荐欢迎来到关注公众号：程序员布欧，时不时更新一些前端介绍文章，不容易啊。转载请注明出处和作者。
