总结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 相关文章推荐
ie支持function.bind()方法实现代码
Dec 27 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
koa上传excel文件并解析的实现方法
Aug 09 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
实例代码讲解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
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
教师找工作推荐信
2013/11/23 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
会计入职心得体会
2016/01/22 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server