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 相关文章推荐
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
原生js滑动轮播封装
Jul 31 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全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
javascript引导程序
2008/10/26 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
jquery each()源代码
2011/02/14 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
护理专科自荐书范文
2014/02/18 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
研究生求职自荐书
2014/06/23 职场文书
消防志愿者活动方案
2014/08/23 职场文书
女性励志书籍推荐
2019/08/19 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
Python语言规范之Pylint的详细用法
2021/06/24 Python