让你彻底弄懂js中的&& 与 || 逻辑运算符

小郝不负流年
小郝不负流年   + 关注
2021-01-29 22:23:00   阅读772   评论0

(1) || 

短路原理: 知道了前面第一个的结果就知道后的输出。

如果第一个为:true,则取第一个的值;

如果第一个为:false,则取第二个的值。

(2) &&

同样是短路原理

1、只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;

2、只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;

记住:在js逻辑运算中,0、""、''、null、false、undefined、NaN 都会判为false,其他都为true。


开发中的应用:

1、看到很多代码if(!!attr),为什么不直接写if(attr)?
其实这是一种更严谨的写法:
请测试 typeof 5和typeof !!5的区别。!!的作用是把一个其他类型的变量转成的bool类型。


2、像var Yahoo = Yahoo || {};这种是非常广泛应用的。 获得初值的方式是不是很优雅?比if。。。。else…好很多,比?:也好不少。


3、 callback&&callback()

在回调中,经常这么写,更严谨,先判断 callback 是不是存在,如果存在就执行,这样写的目的是为了防止报错 


4、综合实例

需求:

假设对成长速度显示规定如下:

成长速度为5显示1个箭头;
成长速度为10显示2个箭头;
成长速度为12显示3个箭头;
成长速度为15显示4个箭头;
其他都显示都显示0各箭头。
用代码怎么实现?

如果需求改成:

成长速度为>12显示4个箭头;
成长速度为>10显示3个箭头;
成长速度为>5显示2个箭头;
成长速度为>0显示1个箭头;
成长速度为<=0显示0个箭头。

那么你有没有想过用一行就代码实现呢?

ok,让我们来看看js强大的表现力吧:

var add_level = (add_speed == 5 && 1) || (add_speed == 10 && 2) || (add_speed == 12 && 3) || (add_speed == 15 && 4) ||0;

更强大的,也更优的:

var add_level = {‘5’:1, ’10’:2, ’12’:3, ’15’:4}[add_speed] || 0;

第二个需求:

var add_level = (add_speed > 12 && 4) || (add_speed > 10 && 3) || (add_speed > 5 && 2) || (add_speed > 0 && 1) || 0;

对我有用,我要     转载  
文章分类: js  
所属标签: js   逻辑运算符  
  • 0条评论
  • 只看作者
  • 按时间|按热度
  • 由于本人多次涉及需要打印这个证明,而每次都会忘记入口,在网上各种搜索各种摸索很是浪费时间。故本次将操作流程整理记录下来,以备忘。同时也分享给大家。1、打开湖北政务服务网,地址:http://zwfw.hubei.gov.cn/s/index.html2、切换区域到“武汉市”3、在“特色服务”模块找到“(个人)武汉市社会保险公共服务平台”4、进入“(个人)武汉市社会保险公共服务平台”,登录账号密码<imgsrc="https://cdnstatic.hoscen.cn/blog/article/184053017752895488/img/497065960be44747825acb86a17483c1.png"style=
  • java中的注解@Generated用来标注源代码中的某些东西是由某些工具生成的,而不是人写的。这个注解可以用于:包、类、注解类、方法、构造方法、变量、本地变量、方法参数。
  • 如何使用postman模拟http发送xml参数报文的POST请求?1、postman工具通过安装软件或使用谷歌插件都可以,这里不再赘述。2、配置postman,选择POST,填写URL;切换到Headers,添加Content-Type:text/xml 3、切换到body,选择raw,XML,下方填写你的请求报文4、点击Send发送请求,如图可以看到响应状态、时间、结果等信息5、讲到这里就结束了,是不是学会了?快去试试吧!
  • 解决办法:是idea的加载有问题,关闭IDEA,在工程的根目录下删除.idea文件,重新打开IDEA加载就好了。
  • Failedtoloadprojectconfiguration:cannotparsefileF:/xx/.idea/modules.xml:ParseErrorat[row,col]:[1,1]Message:文件提前结束。解决办法:关闭idea,删掉这个文件,重新打开idea
  • 建立服务器内网其他IP端口的隧道,可以将远程的服务映射到本地进行访问。finalshell配置隧道方法:
  • 上传图片微服务网关报错:UT000054:Themaximumsize1048576foranindividualfileinamultipartrequestwasexceeded原因:所用容器对文件的限制一般项目用的是spring 对spring参数进行配置即可spring:servlet:multipart:#MultipartPropertiesmax-request-size:10MB#总文件大小max-file-size:10MB#单个文件大小注意如果是nginx代理配置限制,报错信息里面会标记nginx。届时需要设置nginx在server_name下加上client_max_body_size20m;
  • 目录:1、安装node.js环境2、安装cnpm3、安装vue-cli脚手架构建工具4、用vue-cli构建项目5、安装项目所需的依赖6、项目运行7、项目打包1、安装node.js环境下载地址:https://nodejs.org/zh-cn/安装过程没有太多好说的,安装完成后 win+R打开命令行输入node -v , 如图,出现版本号说明安装成功。npm包管理器是集成在node中的 , npm -v可以查看版本2、安装cnpm由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时
  • 控制台信息:Unabletostartthedaemonprocess.Thisproblemmightbecausedbyincorrectconfigurationofthedaemon.Forexample,anunrecognizedjvmoptionisused.PleaserefertotheUserManualchapteronthedaemonathttps://docs.gradle.org/6.3/userguide/gradle_daemon.htmlProcesscommandline:E:\DevelopTools\Java\OpenJDK8U-jdk_x86-32_windows_hotspot_8u282b08\jdk8u282-b08\bin\java.exe-XX:MaxHeapSize=1024m-Xms1024m-Xmx2048m-Dfile.encoding=UTF-8-Duser.country=CN-Duser.language=zh-Duser.variant-cpE:\DevelopTools\gradle-6.8.2-all\gradle_resp\wrapper\dists\gradle-6.3-bin\8tpu6egwsccjzp10c1jckl0rx\gradle-6.3\lib\gradle-launcher-6.3.jarorg.gradle.launcher.daemon.bootstrap.GradleDaemon6.3Pleasereadthefollowingprocessoutputtofindoutmore:-----------------------ErroroccurredduringinitializationofVMCouldnotreserveenoughspacefor2097152KBobjectheapPickedupJAVA_
  • 问题maven同一个版本号部署远程仓库,出现报错:Returncodeis: 400,ReasonPhrase:Repositorydoesnotallowupdatingassets:maven-releases. 解决maven在部署(deploy)时候抛的异常,存储库不允许更新资产,这个就是和私有maven库更新策略有关。具体设置步骤:1.访问私有库管理界面http://xxx.xxx.xxx.xxx:80812.登录管理员账号(默认:admin/admin123)3.进入设置界面->repository->repositories->maven-releases(自己需要部署的目标库)->setting->Deploymentpollcy(Allowredeploy)允许更新