跳到主要内容

可选链

2024年03月11日
柏拉文
越努力，越幸运

一、认识​

?. 可选链 ES11（ES2020 新增的特性，TypeScript 3.7 支持了这个特性。可选链可让我们在查询具有多层级的对象时，不在需要进行冗余的各种前置校验。即可选链是一种先检查属性是否存在，再尝试访问该属性的运算符

二、语法​

三、用法​

3.1 访问对象静态属性​

const user = {
    id:'',
    name:'柏拉图'
}
const name = user?.name;
console.log(name);

// 等同于
//const user = {
//    id:'',
//    name:'柏拉图'
//}
//const name = user&&user.name;
//console.log(name);

3.2 访问对象动态属性​

const attr = 'name'
const user = {
    id:'',
    name:'柏拉图'
}
const name = user?.[attr];
console.log(name);

3.3 访问数组元素​

const array = [1,2,3];
const index = 1;
const item = array?.[index];
console.log(item);

3.4 访问函数参数​

const user = {
    say (){
        console.log('会说话');
    }
}
user?.say?.();

3.5 用于严谨的逻辑判断​

const obj = {
name:'柏拉图'
}

if(obj?.name){
console.log('执行');
console.log(obj.name);
}