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 相关文章推荐
JQuery index()方法使用代码
Jun 02 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
PHP7常量数组用法分析
2016/09/26 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python关键字and和or用法实例
2015/05/28 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Python内置模块turtle绘图详解
2017/12/09 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
使用python turtle画高达
2020/01/19 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
大二法学专业职业生涯规划范文
2014/02/12 职场文书
综合实践活动方案
2014/02/14 职场文书
年终晚会主持词
2014/03/25 职场文书
婚前协议书范本两则
2014/10/16 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书