js中的 || 与 && 运算符详解


Posted in Javascript onMay 24, 2018

js中逻辑运算符在开发中可以算是比较常见的运算符了,主要有三种:逻辑与&&、逻辑或||和逻辑非!。

当&&和|| 连接语句时,两边的语句会转化为布尔类型(Boolean),然后再进行运算,具体的运算规则如下:

1.&&

1.1两边条件都为true时,结果才为true;
1.2如果有一个为false,结果就为false;
1.3当第一个条件为false时,就不再判断后面的条件

注意:当数值参与逻辑与运算时,结果为true,那么会返回的会是第二个为真的值;如果结果为false,返回的会是第一个为假的值。

2.||

2.1只要有一个条件为true时,结果就为true;
2.2当两个条件都为false时,结果才为false;
2.3当一个条件为true时,后面的条件不再判断

注意:当数值参与逻辑或运算时,结果为true,会返回第一个为真的值;如果结果为false,会返回第二个为假的值;

3.!

3.1当条件为false时,结果为true;反之亦然。

上代码说明:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>demo</title> 
  <script> 
    console.log( 5 && 4 );//当结果为真时,返回第二个为真的值4 
    console.log( 0 && 4 );//当结果为假时,返回第一个为假的值0 
    console.log( 5 || 4 );//当结果为真时,返回第一个为真的值5 
    console.log( 0 || 0 );//当结果为假时,返回第二个为假的值0 
    console.log((3||2)&&(5||0));//5 
    console.log(!5);//false 
  </script> 
</head> 
<body> 
 
</body> 
</html>

补充:逻辑与的优先级是高于逻辑或的;

比如console.log(3||2&&5||0),会先算2&&5的值为5,然后再3||5----3,最后再3||0----3,所以最终结果为3.

补充

表达式a && 表达式b :  计算表达式a(也可以是函数)的运算结果,
                      如果为 True, 执行表达式b(或函数),并返回b的结果;
                      如果为 False,返回a的结果;

表达式a || 表达式b :   计算表达式a(也可以是函数)的运算结果,
                      如果为 Fasle, 执行表达式b(或函数),并返回b的结果;
                      如果为 True,返回a的结果;

转换规则:

对象为true;
非零数字为true;

零为false;

非空字符串为true;
空字符串为法false;
其他为false;

例如:
var  a =  obj || " "  ;     //如果 obj 为空,a就赋值为 " " ;
var  a = check() &&  do();    //如果check()返回为真,就执行do(),并将结果赋值给 a;

其他网友的补充

今天复习js继承的时候发现了一个问题,先上代码了

<script type="text/javascript">
 window.onload = function () {
  var mama,
  mama1,
  test = function (name) {
  debugger;
  this.name = name || 'mama';
  };
  debugger;
  mama = new test();
  mama1 = new test("mama1");
  alert(mama.name);//name = mama
  alert(mama1.name);// name = mama1
 }

 </script>

在执行构造函数的时候,无参的构造函数返回的name是'mama',有参数时,实例的name就是参数值了。
这个时候我就有点犯迷糊了,为什么逻辑运算符||能这么用呢?
由于是C#出身,所以对js ||这样用感觉很奇怪。
没辙,不懂先研究,实验实验就知道了。

var b, c, d;
  b = true || 0;//b=true;
  c = false || 0;//c=0;
  d = 1 || 0;//d=1;

换成别的呢?

var b, c, d;
  b = 1-1 || 1+1; //b=2
  c = function () { return undefined } || function () { return 1};//c=function();
  d = c();//d=undefined
var b, c, d;
  b = 1-1 || 1+1; //b=2
  c = function () { return 1 } || function () { return undefined};//c=function();
  d = c();//d=1
b = {} || { a: 1, getA: function () { return this.a}}; //b=object

js中的 || 与 &amp;&amp; 运算符详解

var b, c, d;
  b = { a: 1, getA: function () { return this.a } } || {}; //b=object
  c = b.getA();//c=1;

通过这几个实验,可以看出,JS的||并不是像C#里面的||一样 单纯的返回一个布尔类型。
大家都知道js的布尔类型判定是对象是true,非零是true,非空字符串是true其余的都是false

 由此得出
逻辑或 ||  : var a = 表达式1 || 表达式2

表达式1

表达式2

a取值

  1   

0

表达式1结果值

  1

  1

表达式1结果值

  0

  1

表达式2结果值

  0

  0

表达式2结果值
 

逻辑与 &&  : var a = 表达式1 && 表达式2

表达式1

表达式2

a取值

  1   

0

表达式2结果值

  1

  1

表达式2结果值

  0

  1

表达式1结果值

  0

  0

表达式1结果值

主要原因是因为短路,逻辑或 || 在前面有一个ture的时候则不看后面直接停止,逻辑与&&同理。
然后计算赋值和我们平时一样之获取最新的一次计算结果值。

例如

b = (1 + 1, 2 + 2, 3 + 3);//b=6;

嘛嘛,当然只是猜测。
以上仅供参考。萌新一只,望各位大佬轻批。

Javascript 相关文章推荐
javascript定时器完整实例
Feb 10 Javascript
理解AngularJs指令
Dec 10 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
vue增删改查的简单操作
Jul 15 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
vue axios整合使用全攻略
May 24 #Javascript
vue路由拦截及页面跳转的设置方法
May 24 #Javascript
使用Vue自定义指令实现Select组件
May 24 #Javascript
详解Vue单元测试case写法
May 24 #Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 #Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 #Javascript
react实现点击选中的li高亮的示例代码
May 24 #Javascript
You might like
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
php类自动加载器实现方法
2015/07/28 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Python实现字典依据value排序
2016/02/24 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Python如何绘制日历图和热力图
2020/08/07 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
超市5.1促销活动
2014/01/15 职场文书
学校班班通实施方案
2014/06/11 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
工作检讨书范文
2015/01/23 职场文书
团代会闭幕词
2015/01/28 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技