可选链
如果不确定某个值是否为undefined
或null
时,可使用?.可选链。
举个栗子:
let obj = {a : 1, b : 2}
此时输出obj.c
为undefined
,如果继续输出obj.c.d
,则代码会报错:
console.log(obj.c.d) // 报错
如果把.
关键词换成?.
关键词:
console.log(obj?.c.d) // undefined
可选链在被调用时会隐式执行一段校验函数,并且不用重新定义变量,它判断出undefined或null时,会立即返回一个undefined而不会继续执行后面的代码,这样的设计可以让代码更加简洁,同时提高执行效率。
可选链嵌套使用
可选链可以多重嵌套使用,当有多个?.
时并不会影响代码的可读性,同样,如果有一个值为undefined
或null
时,也会返回undefined
。
双问号语法
当左侧的操作数为null或undefined时,返回其右侧操作数,否则返回左侧操作数。
let customer = {
name: "Carl",
details: { age: 82 }
};
let customerCity = customer?.city ?? "暗之城";
console.log(customerCity); // “暗之城”
其他变体
可选链 ?.
不是一个运算符,而是一个特殊的语法结构。它还可以与函数和方括号一起使用。
例如,将 ?.()
用于调用一个可能不存在的函数。
在下面这段代码中,有些用户具有 admin
方法,而有些没有:
let userAdmin = {
admin() {
alert("I am admin");
}
};
let userGuest = {};
userAdmin.admin?.(); // I am admin
userGuest.admin?.(); // 啥都没有(没有这样的方法)
在这两行代码中,我们首先使用点符号(userAdmin.admin
)来获取 admin
属性,因为我们假定对象 userAdmain
存在,因此可以安全地读取它。
然后 ?.()
会检查它左边的部分:如果 admin
函数存在,那么就调用运行它(对于 userAdmin
)。否则(对于 userGuest
)运算停止,没有报错。
如果我们想使用方括号 []
而不是点符号 .
来访问属性,语法 ?.[]
也可以使用。跟前面的例子类似,它允许从一个可能不存在的对象上安全地读取属性。
let key = "firstName";
let user1 = {
firstName: "John"
};
let user2 = null;
alert( user1?.[key] ); // John
alert( user2?.[key] ); // undefined
可选链 ?.
不能用在赋值语句的左侧。
例如:
let user = null;
user?.name = "John"; // Error,不起作用
// 因为它在计算的是 undefined = "John"