javascript有不少好用的运算符,合理的使用可以大大提高工作效率,以下简单介绍了4种,具体如下:

&&

逻辑与运算(&&)是 AND 布尔操作。只有两个操作数都为 true 时,才返回 true,否则返回 false。具体描述如表所示:

条件一 条件二 结果 演示
true1 true2 true2 1 && 2 => 2
true false false 1 && 0 => 0
false true false 0 && 1 => 0
false1 false2 false1 null && 0 => null

逻辑与是一种短路逻辑,如果左侧表达式为 false,则直接短路返回结果,不再运算右侧表达式。运算逻辑如下:

  1. 计算第一个操作数(左侧表达式)的值。
  2. 检测第一个操作数的值。如果左侧表达式的值可转换为 false(如 nullundefinedNaN0""false),那么就会结束运算,直接返回第一个操作数的值。
  3. 如果第一个操作数可以转换为 true,则计算第二个操作数(右侧表达式)的值。
  4. 返回第二个操作数的值。

实例:

let a = 10
(a > 5) && console.log('哈哈哈'); // 哈哈
等效于:
if(x> 5) {
console.log('哈哈');
}

||

逻辑或运算(||)是布尔 OR 操作。如果两个操作数都为 true,或者其中一个为 true,就返回 true,否则就返回 false。具体如图所示:

条件一 条件二 结果 演示
true true true 1 || 2 => 1
true false true 1 || 0 => 1
false true true 0 || 2 => 2
false1 false2 false2 0 || undefined=> undefined

逻辑或也是一种短路逻辑,如果左侧表达式为 true,则直接短路返回结果,不再运算右侧表达式。运算逻辑如下:

  1. 计算第一个操作数(左侧表达式)的值。
  2. 检测第一个操作数的值。如果左侧表达式的值可转换为 true,那么就会结束运算,直接返回第一个操作数的值。
  3. 如果第一个操作数可以转换为 false,则计算第二个操作数(右侧表达式)的值。
  4. 返回第二个操作数的值。

??

空值合并运算符( ?? )是一个逻辑操作符,如果左侧的表达式为 null 或者 undefined 时,返回其右侧表达式,否则返回左侧表达式。

下列表格中的true、false 表示除null undefined 之外任意

条件一 条件二 结果 演示
null 1 1 null ?? 1 => 1
undefined 2 2 undefined ?? 2 => 2
true false true true ?? false => true

?.

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。( ?. ) 操作符的功能类似于( . )链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。

const obj={
name:'张三',
age:12
}
console.log(obj ?. name); // 张三
console.log(obj ?. xxxxx); // undefined

下表承接上面数据:

条件一 条件二 结果 演示|
obj(存在) name 张三 obj ?. name =>张三
obj(不存在) xxxx undefined obj ?. xxxxx =>undefined

JS中的 && 、|| 、??、?. 运算符的更多相关文章

  1. js中的运算符和条件语句

    js中的运算符大体上可以分为4类:1算术运算符.2一元操作符.3比较运算符.4逻辑运算符. 算术运算符一般指的是加减乘除求余这五种操作符:+,-,*,/,%.通过算术运算符可以对js中的变量进行操作. ...

  2. JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...

  3. JS中的运算符和JS中的分支结构

    JS中的运算符 1.算术运算(单目运算符) + .-.*. /. %取余.++自增 .--自减 +:两种作用,链接字符串/加法运算.当+两边全为数字时,进行加法运算:当+两边有任意一边为字符串时,起链 ...

  4. 让你彻底搞懂JS中复杂运算符==

    让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...

  5. JS中的运算符_函数学习

    js中的运算符:     算数运算符:     + - * / % ++ --          逻辑运算符:     & | !  && || < > <= ...

  6. js中的运算符优先级顺序

    js中运算符优先级从高到底的顺序: 算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

  7. JS中的运算符 以及变量和输入输出

    1.算术运算(单目运算符) + 加 .- 减.* 乘. / 除. % 取余.++ 自增.-- 自减. >>> +:有两种作用,链接字符串/加法运算,当+两边全为数字时,进行加法运算, ...

  8. 浅谈JS中逗号运算符的用法

    阅读本文的前提是,你能区分什么是表达式,什么是语句.还有明确运算符和运算数都是些啥东西.所谓的表达式就是一个JavaScript的"短语",JavaScript的解释器可以计算它, ...

  9. JS中短路运算符&&和||

    在JS函数中我们经常会使用到短路运算符,主要是逻辑与(&&) 和 逻辑或(||) 1.逻辑与 && 的运算方式 var a = 5 && 6; cons ...

  10. JS中new运算符的实现原理

    当我们用new运算符new一个构造函数产生一个实例时,比如说: var obj = new Func 时,其背后的步骤是这样的: 1:创建一个继承自 Func.prototype 的新对象:2:执行构 ...

随机推荐

  1. jvm-learning-双亲委派机制

    是什么 工作原理  例子 优势 什么是沙箱安全机制 其他知识 对类加载器的引用 类的主动使用和被动使用

  2. python模块相互依赖的解决方案

    第一种:将相互依赖的文件中的其中一个文件的代码移植到另一个文件中... 第二种:将 import .... 或 from ... import 语句的位置移动到def函数内部,由于import和fro ...

  3. 什么是 Spring beans?

    Spring beans 是那些形成 Spring 应用的主干的 java 对象.它们被 Spring IOC 容器初始化,装配,和管理.这些 beans 通过容器中配置的元数据创建.比如, 以 XM ...

  4. 记MyBaits-Plus 实现菜单的无限层关系

    Mybatis-Plus父子菜单 首先来看一下实现的效果 pojo层 @Data @TableName("platform_role") public class Role imp ...

  5. Idea中创建maven项目(超详细)

    Idea中创建maven项目 提示:前提条件时maven已经安装好,并且环境变量也配置完成,maven没安装好或者环境变量没有配置好的请参考我上一篇文章--maven的安装和配置 上篇博文链接:htt ...

  6. git的下载安装以及基本操作

    版权声明:本文为CSDN博主「~李疆」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.转载原文链接:https://blog.csdn.net/qq_403232 ...

  7. javaScript设计模式:发布订阅模式

    发布订阅模式的思想是在观察者模式的基础上演变而来,在观察者模式中客户端监听到对象某个行为就触发对应任务程序.而在发布订阅模式中依然基于这个核心思想,所以有时候也会将两者认为是同一种设计模式.它们的不同 ...

  8. 通过uniCloud白捡一个在线图库管理工具,可支持图床外链

    喜欢写文章的技术大佬们,应该都有一个自己的在线图片管理工具吧. 尤其是在写markdown时,为了让我们的文章"图文并茂",显得不那么枯燥,就经常需要在合适的地方插入一些关联性的图 ...

  9. Python入门-安装Python开发环境

    1.安装开发环境 #方法一:直接安装anaconda,解释器和环境,一个软件就可以包括,简单方便 参考地址:https://www.cnblogs.com/sui776265233/p/1145300 ...

  10. ICMP TYPE CODE 对应表

    下载ping程序源代码等信息,可以在这里下载 [root@ht8 network-scripts]# ping -V ping utility, iputils-s20160308 //ping实用程 ...