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获取class的所有元素
Mar 28 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
Angular实现form自动布局
Jan 28 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 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中使用base HTTP验证的方法
2015/04/20 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
js实现简易ATM功能
2020/10/27 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
Python协程的用法和例子详解
2017/09/09 Python
关于Python的一些学习总结
2018/05/25 Python
python3.5绘制随机漫步图
2018/08/27 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
中间件的定义
2016/08/09 面试题
学期评语大全
2014/04/30 职场文书
实验心得体会范文
2016/01/25 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书