前言

今天上午，一个朋友突然问我，怎样实现一个 ?. 操作符。那就让我在摸鱼途中简单实现一个吧

什么是可选链操作符？

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。 ——MDN

简单编码实现

本人在编码途中，用到?.最多的地方是在对象或者prop，那就先简单实现我们的可选链吧

/**
 * 
 * @param {object,string} 
 * 
 * @return {object[string] | undefined}
 */
function optionalChain(data,key) {
    //判断是否为空 null/undefined
    if(!data){
        return undefined
    }
    //判断对象或者其原型上是否有指定key
    if(data[key] !== undefined){
        return data[key]
    }

    return undefined
}

let obj = {
    a:1,
    b:2,
    c:3
}

console.log(name(obj,'a'));//1
console.log(name(obj,'d'));//undefined

哦，对了，还会有数组与函数的引用呢，那就完善一下我们的代码吧

function types(params) {
    return Object.prototype.toString.call(params).slice(8,-1).toLowerCase()
}

function optionalChain(data,...args) {
    //判断是否为空 null/undefined
    if(!data){
        return undefined
    }
    let type = types(data)
    if(type === 'object'){
        //判断对象或者其原型上是否有指定key
        if(data[args[0]] !== undefined){
            return data[args[0]]
        }
    }else if(type === 'array'){
        return data[args[0]]
    }else if(type === 'function'){
        // 函数可选链为判断是否存在该函数，如果存在，则调用
        //我们这块可取巧，传递参数为函数，函数入参，判断传进来的是不是函数，是就证明已存在，直接返回调用结果即可
        //不存在，传递进来是一个undefined，走为空判断
        return data(...args)
    }

    return undefined
}
let obj = {
    a:1,
    b:2,
    c:3
}
let add
console.log(optionalChain(obj,'a'));//1
console.log(optionalChain(obj,'d'));//undefined
console.log(optionalChain([1,2,3],0));//1
console.log(optionalChain([1,2,3],3));//undefined
console.log(optionalChain(types,'d'));//string
console.log(optionalChain(add,'d'));//undefined

自己试一下吧

总结

这篇文章我们简单的实现了可选链操作符，当然并不是很完善，具体实现各位可自行查阅资料实现。

手写简易版的可选链操作符

前言

什么是可选链操作符？

简单编码实现

总结