你真的理解了es6中的?.可选链吗？

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

前言

可选链?.属于一种安全的访问对象属性的方式，即使在在嵌套对象中出现不存在的属性也不会出现错误。

访问嵌套对象问题

我们编写程序时总会出现一个对象中存在可能会是空值或者不存在的对象属性，而我们直接访问它的时候就会出现报错，如下代码

let obj ={
    username:"花花",
    data:{
        age:18,
        height:170,
        weight:90,
    }
}

//正常输出，没问题
console.log("第一次输出："+obj.data.height)

//当obj.data = null 的时候就会出现以下错误
obj.data = null
console.log("第二次输出："+obj.data.height)
复制代码

当data不存在，或者data等于Null，或者data等于undefined，都会存在上述问题。

解决方案 - 条件判断

为了解决上述问题最容易想到的就是通过条件判断来防止错误的发生。如下所示

obj ={
    username:"花花",
    data:null
}
if(obj.data){
    console.log("正常输出："+obj.data.height)
}else{
    console.log("无data输出")
}
复制代码

但是层级非常多的时候代码就会变得非常繁琐且缺乏可读性，如下

obj ={
    username:"花花",
    data:{
        age:18,
        height:170,
        weight:90,
        unit:{
            weight:"kg",
            height:"cm",
            data:{
                a:"最深层级参数1",
                b:"最深层级参数2"
            }
        }
    }
}

//通过判断正常输出
if(obj.data  && obj.data.unit && obj.data.unit.data ){
    console.log(obj.data.unit.data.a)
}

复制代码

嵌套层级越多，上面的判断将变得越发的变态，所以接下来我们要讲讲可选链的使用了。

解决方案 - 可选链

上面我们说到可选链?.属于一种安全的访问对象属性的方式，即使在在嵌套对象中出现不存在的属性也不会出现错误。如果可选链 ?. 前面部分是 undefined 或者 null 或者 空字符串，那么它就会停止运算并返回undefined。

通俗点讲就是：要正常访问嵌套对象属性，只要在可能会为空的属性后面加上可选链 ?. 那遇到空值就不会继续往后取值，并返回为空的属性值，下面我们通过几个案例来验证

obj ={
    username:"花花",
    data: null,
    // data:{
    //     age:18,
    // }
}

//验证data为空
console.log("输出："+ obj.data?.age)

复制代码

当层级会非常深时，这时可选链的可读性就展现出来了

obj ={
    username:"花花",
    data:{
        age:18,
        height:170,
        weight:90,
        unit:{
            weight:"kg",
            height:"cm",
            data:{
                a:"最深层级参数1",
                b:"最深层级参数2"
            }
        }
    }
}

//可选链
console.log("可选链："+ obj.data?.unit?.data?.a)

//正常输出
console.log("条件判断:"+obj.data.unit.data.a)

复制代码

而当出现错误时，比如obj.data = null ,就会出现如下输出

obj.data = null

//可选链
console.log("可选链："+ obj.data?.unit?.data?.a)

//正常输出
console.log("条件判断:"+obj.data.unit.data.a)
复制代码

除了取值之外还能安全的操作删除值，比如下面这段代码

// obj = {
//     name:123
// }
obj = null
console.log( delete obj?.name )
console.log( delete obj.name )
复制代码

注意事项

我们知道可选链 ?. 是对前一个值生效，成为可选值，但是这个值必须是已声明的值，否则则会报错

可选链扩展 ?.() , ?.[]

可选链属于一种特殊的运算符，它还能与函数和方括号一起使用

与函数使用:

var obj = {
    test(){
        return "test函数被调用"
    }
}

//与函数一起使用 ,存在则调用函数，不存在则返回undefined
console.log( obj.test?.() )
console.log( obj.test2?.() )
复制代码

与方括号使用:

var obj = {
    data:{
        username: "小花"
    }
}
var item1 = 'username'
var item2 = 'name'

console.log( obj.data?.[item1] )
console.log( obj.data?.[item2] )

复制代码

总结

可选链 ?. 一共有三种语法,主要用来检查左边部分是否为 null/undefined/空字符串，如果不是则继续运算。这样能让我们更加安全的访问嵌套对象属性。

语法	说明
obj?.prop	obj存在则返回obj.prop的值，否则返回undefined
obj?.[prop]	obj存在则返回obj[prop]的值，否则返回undefined
obj.method?.()	obj存在则调用obj.method方法，否则返回undefined