总结JavaScript中布尔操作符||与&&的使用技巧
你是否看到过这样的代码：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时的值：
在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 提示错误！
所以应该用||
相关文章
ECharts折线图的Legend（图例）用于展示每条折线所对应的数据系列名称,下面这篇文章主要给大家介绍了关于echarts折线图legend太多与图重叠的处理办法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要给大家介绍了关于如何使用js查找数组中符合条件的元素,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了聊一聊JS中this的指向问题，帮助大家轻松了解JS中this的指向，感兴趣的小伙伴们可以参考一下2016-06-06
JavaScript defineProperty如何实现属性劫持
双向数据绑定的核心方法,主要是做数据劫持操作(监控数据变化),下面这篇文章主要给大家介绍了关于JavaScript defineProperty如何实现属性劫持的相关资料,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了javascript闭包，闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要帮助大家轻松实现JavaScript图片切换，内容很精简，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了解决JS表单验证只有第一个IF起作用的问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-12-12
javascript鼠标跟随运动3种效果（眼球效果，苹果菜单，方向跟随）
在很多网站上能看到图片跟随鼠标移动的JS特效，其实做法很简单，本文就介绍了很多javascript鼠标跟随运动，在这里与大家分享下。2016-10-10
js模拟jquery的slide和fadeIn和fadeOut功能
以前用过jquery的slideUp，slideDown，等许多很不错的方法，感觉很容易就能实现页面元素的动画效果！2010-07-07
下面小编就为大家带来一篇promise处理多个相互依赖的异步请求(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论