es可选链

一、可选链三种语法形式
1.obj ?.prop. --------如果obj 存在则返回 obj.prop ,否则返回 undefined。
2.obj ?.[prop] -------如果存在则返回obj[prop] ，否则返回undefined。
3.obj.method?.()------如果obj.method 存在则调用obj.method(),否则返回undefined。
正如我们所看到的，这些语法形式用起来都很简单直接，检查左边部分是否为 null/undefined，如果不是则继续运算。
二、可选链
1.为什么需要可选链？
当我们之前访问一个不存在的属性，会报错error

let user = {}; // 一个没有 "address" 属性的 user 对象
alert(user.address.street); // Error!

但是我们并不希望得到报错，与之相比我们更希望能够得到 null或者undefined，那么这个时候我们就用到了可选链。
2.可选链
如果可选链 ?. 前面的部分是undefined 或者 null ，他会停止运算并返回该部分，也就是，返回undefined 或 null。
value ?.prop

如果 value 存在，则结果 value.prop 相同。

否则（当 value 为 undefined/null 时）则返回 undefined
现在用可选链 安全访问上面代码

let user = {}; // user 没有 address 属性
alert( user?.address?.street ); // undefined（不报错）

即使user对象 不在，使用user.?address 来读取地址也没问题

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

前提
可选链的使用前提是 ?. 前的变量必须已声明，如果没有就会出发错误
如过未声明变量user，那么user?.anything 会触发一个错误：

// ReferenceError: user is not defined
user?.address;

短路效应
正如前面所说，如果 ?. 前面的 部分不存在，就会立即停止运算（“短路效应”），
这个时候，如果后面有任何函数或者副作用，他们均不会执行

let user = null;
let x = 0;

user?.sayHi(x++); // 没有 "sayHi"，因此代码执行没有触达 x++

alert(x); // 0，值没有增加

其他变体 ： ?.(). ?.[]
可选链 ?. 不是一个运算符，而是一个特殊的语法结构，它还可以与函数和方括号一起使用。

例如:将 ?.() 用于调用 一个可能不存在的函数

let userAdmin = {
  admin() {
    alert("I am admin");
  }
};

let userGuest = {};

userAdmin.admin?.(); // I am admin

userGuest.admin?.(); // 啥都没有（没有这样的方法）

?.[] 用来访问属性，和之前例子相似

 let user1 = {
  firstName: "John"
};

let user2 = null; // 假设，我们不能授权此用户

let key = "firstName";

alert( user1?.[key] ); // John
alert( user2?.[key] ); // undefined

alert( user1?.[key]?.something?.not?.existing); // undefined

此外，我们还可以将 ?. 跟 delete 一起使用：

delete user?.name; // 如果 user 存在，则删除 user.name
1
最后再将可选链的三种形式附上
1.obj ?.prop. --------如果obj 存在则返回 obj.prop ,否则返回 undefined。
2.obj ?.[prop] -------如果存在则返回obj[prop] ，否则返回undefined。
3.obj.method?.()------如果obj.method 存在则调用obj.method(),否则返回undefined。
正如我们所看到的，这些语法形式用起来都很简单直接，检查左边部分是否为 null/undefined，如果不是则继续运算。

版权声明：本文为CSDN博主「猫猫的叮当」的原创文章。
原文链接：https://blog.csdn.net/qq_44741441/article/details/120986303

总结

?.可选链
var a = {'ab':{'hb':2333},'hb':123};//定义了一个对象a
a?.['ab']?.['hb'];//2333 用于判断对象a里是否包含了某个参数

??空值合并
var a = {'ab':{'hb':null},'hb':123}
a['ab']['hb']??5566;//如果对象里面的值为undefined、或者null 则赋值5566

??=空值赋值
var a = 123,b = 0,c = 'hhhh',d = null;
a ??= b;//123
//左侧的值为null、undefined的时候,才会将右侧变量的值赋值给左侧变量.其他所有值都不会进行赋值