总结JavaScript中布尔操作符||与&&的使用技巧


Posted in Javascript onNovember 17, 2015

你是否看到过这样的代码:a=a||""; 可能javascript初学者会对此感到茫然。今天就跟大家分享一下我的一些心得。
其实:
 

a=a||"defaultValue";

a=a||"defaultValue";

与:

if(!a){
a="defaultValue";
}
if(!a){ 
  a="defaultValue"; 
}

 
和:

if(a==null||a==""||a==undefined){
a="defaultValue";
}

if(a==null||a==""||a==undefined){ 
  a="defaultValue"; 
}

 
是等价的!
为了弄清这个问题,首先我们必须了解一个问题:javascript中数据类型在转换为bool类型时发生了什么。
 
在javascript中,数据类型可以分为“真值”和“假值”。顾名思义,真值转换为bool时值为true;假值转换为bool时值为false。下表罗列了一些常见的数据类型转换为bool时的值:
总结JavaScript中布尔操作符||与&&的使用技巧 
在if表达式中,javascript首先将条件表达式转换为bool类型,表达式为真值则执行if中的逻辑,否则跳过。
 
于是有了:
 

if(!a){
a="defaultValue";
}


if(!a){ 
  a="defaultValue"; 
}

 
下面我们再来看“&&”、“||”两个表达式。
由于javascript是弱类型语言,所以在javascript中这两个表达式可能跟其他语言(比如java)中不太一样。
在javascript中,“&&”运算符运算法则如下:
 
如果&&左侧表达式的值为真值,则返回右侧表达式的值;否则返回左侧表达式的值。
 
这就是说:

var i=""&&"真值";//->i=""
i="真值"&&"其他真值";//->i="其他真值"
i="真值"&&"";//->i=""
var i=""&&"真值";//->i="" 
i="真值"&&"其他真值";//->i="其他真值" 
i="真值"&&"";//->i=""

 
“||”运算符的运算法则如下:
 
如果||左侧表达式的值为真值,则返回左侧表达式的值;否则返回右侧表达式的值。
 
这就是说:
 

var i=""||"真值";//->i="真值"
i="真值"||"其他真值";//->i="真值"
i="真值"||"";//->i="真值"
var i=""||"真值";//->i="真值" 
i="真值"||"其他真值";//->i="真值" 
i="真值"||"";//->i="真值"

 
 
于是,就可以理解:
 

a=a||"defaultValue";
a=a||"defaultValue";

的逻辑了。如果a为假值(等于null、空字符串……),则将"defaultValue"赋给a;否则将a的值赋给a本身。
 
 
下面我们运用||、&&来简化程序:
 

var parameter="";
function test(parameter){
//return 真值
return true;
}
//真值操作
function operate1(parameter){
return "真值操作";
}
//假值操作
function operate2(parameter){
return "假值操作";
}
var result=test(parameter)&&operate1(parameter);
result=test(parameter)||operate2(parameter);
//等价于
result=test(parameter)?operate1(parameter):operate2(parameter);
alert(result);//真值操作
//也等价于
if(test(parameter)){
result=operate1(parameter);
}else{
result=operate2(parameter);
}
alert(result)//真值操作

再比如:

<script language="javascript" type="text/javascript"> 
  var a =1; 
  var b = 0; 
  var c = 3; 
  var d = a && b && c; 
  window.alert(d); 
</script>

输出了d的值为0,如果把d的值改为不等于0的值,那么d将始终是3

所以js中的&&返回的是第一个不为真的值即是0(对象亦可),如果全部都是真那么返回的最后一个值。
    

<script language="javascript" type="text/javascript"> 
  var a =0; 
  var b = 3; 
  var c = 5; 
  var d = a || b || c; 
  window.alert(d); 
</script>

输出了d的值为3,如果把b的值改为0,那么d将始终是5.如果全部都改为0,那么d的值是0.</p><p>所以js中的||返回的是第一个不为false的值即是0(对象亦可),如果全部都是false那么返回的最后一个值。 
应用:

比如要简单的验证邮箱格式,只有‘@''和‘.''都同时存在是才算格式正确,否则提示错误:

该用哪个呢?让我们分析一下:

if (form1.elements[3].value.indexOf("@",0)==-1 && form1.elements[3].value.indexOf(".",0)==-1){ alert("EMAIL地址输入错误!")}

如果都存在:&&两边都是假。&&返回第一个为真的值,所以if判断条件是假if后面的语句不执行!不会提示用户。

只有至少@和。存在一个的是时候if的条件才为真,才提示用户错误。

两个都存在的时候,返回最后一个的值,是真 if判断条件成立if语句执行。提示用户错误。

所以用&&明显错误!

要换成

if (form1.elements[3].value.indexOf("@",0)==-1 || form1.elements[3].value.indexOf(".",0)==-1){ alert("EMAIL地址输入错误!") }

分析:

如果两个都存在:全部为false,返回是false 所以if条件不成立,语句不执行,不提示错误!

如果只有一个存在:返回第一个不为false的值。返回为true 提示错误!

两个都不存在:返回第一个不为false的值,返回是true 提示错误!

所以应该用|| 

Javascript 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
node.js中的require使用详解
Dec 15 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
jquery事件与绑定事件
Mar 16 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 #Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 #Javascript
基于Jquery easyui 选中特定的tab
Nov 17 #Javascript
jquery实现简单的表单验证
Nov 17 #Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 #Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 #Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 #Javascript
You might like
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
失业者真诚求职信范文
2013/12/25 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
员工手册董事长致辞
2015/07/29 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python