总结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 相关文章推荐
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
javascript事件模型实例分析
Jan 30 Javascript
js获取form的方法
May 06 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
js读取本地文件的实例
Dec 22 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
php中socket通信机制实例详解
2015/01/03 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
vue动态设置img的src路径实例
2018/09/18 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
内业资料员岗位职责
2014/01/04 职场文书
《争吵》教学反思
2014/02/15 职场文书
工作决心书
2014/03/11 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
学生实习证明范文
2014/09/28 职场文书
个人年终总结范文
2015/03/09 职场文书
运动会广播稿200字
2015/08/19 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python
使用scrapy实现增量式爬取方式
2022/06/21 Python