可选链 ?.

一、可选链三种语法形式

	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.obj ?.prop. --------如果obj 存在则返回 obj.prop ,否则返回 undefined。
2.obj ?.[prop] -------如果存在则返回obj[prop] ，否则返回undefined。
3.obj.method?.()------如果obj.method 存在则调用obj.method(),否则返回undefined。
正如我们所看到的，这些语法形式用起来都很简单直接，检查左边部分是否为 null/undefined，如果不是则继续运算。