首页 > 其他分享 >JS新运算符 ?. ?? ??= ||= &&= 的含义及用法

JS新运算符 ?. ?? ??= ||= &&= 的含义及用法

时间:2023-02-09 13:57:20浏览次数:37  
标签:res JS 运算符 flag hi && 赋值

?.可选链操作符

可选链允许读取连接对象链深处的属性值而不必明确验证链中每个引用是否有效。该表达式短路返回值

语法:obj?.prop obj?.[expr] arr?.[index] func?.(args)

例如一个表达式

res && res.data && res.data.status 

意思很明确,这个表达式在res和res.data存在的时候会返回res.data.status。为避免属性值不存在的情况,需要用到条件表达式或者三目运算符之类的操作。

使用可选链操作符后

res?.data?.status

使用可选链后不必担心抛出不存在的异常,写法更简介。可选链操作符不止可用于常规对象,还可以用于方法,数组索引等。

??空值合并操作符

只有当左侧为null和undefined时才会返回右侧的值,否则返回左侧操作数。

例如:

'hello world' ?? 'hi' 
// 'hello world'

'' ?? 'hi' 
// ''

false ?? 'hi' 
// false

console.log(0 ?? 'hi');
// 0

null ?? 'hi'  
// 'hi'

undefined ?? 'hi'
// 'hi'

||= &&= ??=逻辑赋值运算符

先进行逻辑运算,再根据逻辑结果视情况进行赋值运算

或赋值运算符 ||=

x ||= y相当于x || (x = y)

const flag = {}
flag.id ||= 1
console.log(flag.id); // 1

与赋值运算符&&=

x &&=y相当于x && (x = y)

const flag = {}
flag.id &&= 1
console.log(flag); // {}

空值赋值运算符??=

当左侧为null或undefined时就把右侧的值赋给左侧,就算右侧是null和undefined也会赋值; 其他所有值都不会进行赋值

const flag = {name: 'tt'}
flag.id ??= 1
flag.name ??= 'oo'
console.log(flag); // {name: 'tt', id: 1}

标签:res,JS,运算符,flag,hi,&&,赋值
From: https://www.cnblogs.com/ymscq/p/17104996.html

相关文章

  • 浅谈JS词法环境
    JavaScript词法环境本文主要讲解JS词法环境,我们将看到什么是词法环境,词法范围如何工作,函数内部的名称如何解析,内部属性,弄清楚词法环境利于我们理解闭包。让我们开始吧.........
  • 《Vue.js 设计与实现》读书笔记 - 第14章、内建组件和模块
    第14章、内建组件和模块14.1KeepAlive组件的实现原理KeepAlive一词借鉴了HTTP协议。KeepAlive组件可以避免组件被频繁的销毁/重建。本质是缓存管理,再加上特殊的挂......
  • C语言中的运算符
    ......
  • 原生JS实现涟漪按钮特效
    给大家分享一个用原生JS实现的涟漪按钮特效,效果如下:以下是代码实现,欢迎大家复制粘贴和收藏。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">......
  • Darkmode.js实现黑暗模式
    运用CSS3.0的过滤属性可以实现黑暗模式,当我们用这个属性实现黑暗模式时,我们会发现图片的颜色会受影响,并不是很美观,是无法完美切换黑暗模式的,而最近出了一个JavaScript辅助......
  • 原生JS实现一个好看计数器
    今天给大家分享一个用原生JS实现的好看计数器,效果如下:以下是代码实现,欢迎大家复制粘贴和收藏。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><meta......
  • P11:JSX代码注释、HTML添加class、JSX中解析html、JSX中label激活文本框
    React16基础​​阐述​​​​JSX代码注释​​​​JSX中的class陷阱​​​​JSX中的html解析问题​​​​JSX中``标签的坑​​阐述通过之前的教程作完“大宝剑”菜单后,如......
  • 11 v-if 更好颜色、三元运算符
    [基础]模板中使用v-if条件判断​​场景​​​​三元运算符控制模板样式​​​​v-if判断​​场景模板中使用条件判断,控制页面的样式,是最常见的应用。Vue中提供了两种基本......
  • JavaScript if判断、三元运算符、循环
    阅读目录if判断三元运算符循环结构while循环for循环for循环数组循环字符串if判断letscore=162;if(score>=80){alert("优秀");}elseif(......
  • JavaScript 运算符数据类型
    阅读目录运算符1、自增运算符2、分别赋值3、求多次方4、js中逻辑运算符数据类型1、数据类型2、强制类型转换运算符1、自增运算符leta=11;aler......