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中的location用法简单介绍
Mar 07 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
理解Javascript闭包
Nov 01 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
js实现产品缩略图效果
Mar 10 Javascript
详解Node.js开发中的express-session
May 19 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 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获取当前完整URL地址的函数
2014/12/21 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
JS判定是否原生方法
2013/07/22 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
python 连续不等式语法糖实例
2020/04/15 Python
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
业务部主管岗位职责
2014/01/29 职场文书
仓库主管岗位职责
2014/03/02 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
初中地理教学反思
2016/02/19 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书