ES11中的可选链等语法

Posted 2022-01-08 UsherYue

我们介绍ES11新特性 这个新特性在判断空值的方面非常简单,相关语法如下。

1、可选链语法(?.)

obj?.prop  // 如果存在prop则返回属性 
obj?.[prop] // 根据obj是否存在prop来执行[]内的表达式
arr?.[index] // 获取arr中的元素当index对应元素存在
func?.(args) // func存在调用

可选链相关语法

//当函数存在时候调用函数
var func=(x)=>
    console.log(x);
;
func?.(2);
//当数组指定下标元素存在时候 获取数组元素 
var arr=[1,2,3,4,5];
console.log(arr?.[1]);
//当对象属性存在时候
var obj=y:1;
console.log(obj?.x);
console.log(obj?.['y']);

2、空值合并操作(??)

a??b   //当a是null或者undefined的时候输出b的值

过去我们处理空值一般会

var a=x:null;
let b=a.x?a.x:1

现在利用空值合并

var a=x:null;
let b=a??1;

3、空值赋值运算符(??=)

a??=1   //当左值a是null或者undefined时候赋值为1

我们过去在处理javascript 对象的空值的时候只能做如下判断

var obj=;
//判断obj中是否存在x属性,如果是undefined或者是null的情况将其定义为1
//大概代码如下
if(obj.x===undefined||typeof (obj.x)=='undefined'|| obj.x===null)
    obj.x=1;

运用空值赋值运算后我们可以这样

//现在可以这样写,通过??=运算符简化了 空值判断
var obj=;
obj.x??=1;
console.log(obj.x)