共计 1365 个字符,预计需要花费 4 分钟才能阅读完成。
官网参考:https://developer.mozilla.org…
可选链 ?. 是一种 拜访嵌套对象属性的防错误方法。即便两头的属性不存在,也不会呈现谬误。如果可选链 ?. 后面局部是 undefined 或者 null,它会进行运算并返回 undefined。
语法:
obj?.prop | |
obj?.[expr] | |
arr?.[index] | |
func?.(args) |
应用留神
可选链尽管好用,但须要留神以下几点:
不能适度应用可选链;
咱们应该只将 ?. 应用在一些属性或办法能够不存在的中央,以下面示例代码为例:
const leo = {}; | |
console.log(leo.name?.length);//undefined |
这样写会更好,因为 leo 对象是必须存在,而 name 属性则可能不存在。
可选链 ?. 之前的变量必须已申明:
在可选链 ?. 之前的变量必须应用 let/const/var 申明,否则会报错:
leo?.name; | |
// Uncaught ReferenceError: leo is not defined |
代码块应用 (?.) 等价于:
// 存在 name 打印 name, 不存在 undefined | |
let leo={name:"1"} | |
let name = leo?.name; | |
// 等价于 | |
let name; | |
if (leo != null) {name = leo.name;} |
可选链不能用于赋值 :
let object = {}; | |
object?.property = 1; | |
// Uncaught SyntaxError: Invalid left-hand side in assignment |
可选链拜访数组元素的办法
let arr=[1,2,3] | |
let arrayItem = arr?.[2]; | |
console.log(arrayItem)//3 |
可选链与函数调用 ?.()
?.() 用于调用一个可能不存在的函数,比方:
let user1 = {admin() {alert("I am admin"); | |
} | |
} | |
let user2 = {}; | |
user1.admin?.(); // I am admin | |
user2.admin?.(); |
?.() 会查看它右边的局部:如果 admin 函数存在,那么就调用运行它(对于 user1)。否则(对于 user2)运算进行,没有谬误。
可选链和表达式 ?.[]
?.[] 容许从一个可能不存在的对象上平安地读取属性。
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 |
可选链 ?. 语法总结
可选链 ?. 语法有三种模式:
obj?.prop —— 如果 obj 存在则返回 obj.prop,否则返回 undefined。obj?.[prop] —— 如果 obj 存在则返回 obj[prop],否则返回 undefined。obj?.method() —— 如果 obj 存在则调用 obj.method(),否则返回 undefined。
正如咱们所看到的,这些语法模式用起来都很简略间接。?. 查看右边局部是否为 null/undefined,如果不是则持续运算。?. 链使咱们可能平安地拜访嵌套属性。
正文完
发表至: javascript
2021-06-25