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中的事件处理
Jan 16 Javascript
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
Admin generator, filters and I18n
2011/10/06 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
Python rstrip()方法实例详解
2018/11/11 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python线程指南分享
2019/11/19 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
应届实习生的自我评价范文
2014/01/05 职场文书
大学生军训广播稿
2014/01/24 职场文书
国庆宣传标语
2014/06/30 职场文书
宣传标语大全
2014/07/01 职场文书
事业单位年度考核评语
2014/12/31 职场文书
万能检讨书
2015/01/27 职场文书
入党函调证明材料
2015/06/19 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
mysql序号rownum行号实现方式
2022/12/24 MySQL