js中?.、??、??=的用法和含义

JavaScript023

js中?.、??、??=的用法和含义,第1张

?. 叫做可选链,,只有当a存在,同时a具有name属性的时候,才会把值赋给b,否则就会将 undefined 赋值给b.重要的是,不管a存在与否,这么做都不会报错.

?? 是空值合并运算符,当a除了 undefined 、或者 null 之外的任何值,b都会等于a,否则就等于c.

??= 为空值赋值运算符,当??=左边的的值为 undefined 或者 null 的时候,才会将右侧变量的值赋值给左侧变量.其他所有值都不会进行赋值.

npm install @babel/plugin-proposal-optional-chaining                    //可选链?.

npm install @babel/plugin-proposal-nullish-coalescing-operator    //合并空 ??

配置babel.config.js  (需要重新启动)

可选链?.

    对于对象取值a.b.c  ,解决若没有c会报错的问题。

    用了可选链返回undefined。

合并空??

    只针对于null和undefined会取 ?? 后的默认值。

    与|| 区别 0  false  “” 被认为有效值

?. 表示可选链,就是如果对象存在,就获取.后面的属性值。

举个例子,假定对象obj未定义(或者说不存在),那么下面的语句会报错:

let type = obj.type

而改成这样就不报错了:

let type = obj?.type

当obj不存在时,变量type的值为undefined。

?? 则是空值合并运算符,就是如果??左边的表达式是null或undefined,则获取??右边的表达式的值。

比如

let type = x ?? 'haha'

意思就是如果x是空值,则type='haha',否则type=x

以上两种合起来用的话,比如

let type = obj?.type ?? ''

意思就是,如果obj存在,且obj.type不是null或undefined,则type=obj.type,否则的话type就赋值为空字符串。

如果用常规写法,那么代码就复杂得多:

if (obj &&obj.type) {

let type = obj.type

}else{

let type = ''

}