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 相关文章推荐
js option删除代码集合
Nov 12 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 Javascript
JavaScript流程控制(分支)
Dec 06 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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
javascript表单正则应用
2017/02/04 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
JavaScript实现简单的计算器
2020/01/16 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Python实现股市信息下载的方法
2015/06/15 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
Python中logging实例讲解
2019/01/17 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
导游的职业规划书范文
2013/12/27 职场文书
学生手册评语
2014/05/05 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
自信主题班会
2015/08/14 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
zabbix配置nginx监控的实现
2022/05/25 Servers