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 面向对象编程 function也是类
Sep 17 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
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实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
python是怎么被发明的
2020/06/15 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
Delphi工程师笔试题
2013/09/21 面试题
老师给学生的表扬信
2014/01/17 职场文书
大型晚会策划方案
2014/02/06 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
三项教育活动实施方案
2014/03/30 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
公司辞职信模板
2015/05/13 职场文书
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL