转 可选链 ?.

 转   可选链 ?.            想学什么都能学出来，一直看。认识字就能学。

猫猫的叮当

于 2021-10-27 11:56:55 发布

564
收藏 5
分类专栏： Js 前端 入门 文章标签： javascript 前端 开发语言
版权

Js
同时被 3 个专栏收录
40 篇文章1 订阅
订阅专栏

前端
74 篇文章1 订阅
订阅专栏

入门
39 篇文章5 订阅
订阅专栏
一、可选链三种语法形式
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，如果不是则继续运算。
————————————————
版权声明：本文为CSDN博主「猫猫的叮当」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44741441/article/details/120986303

 

两个??问号是什么意思？