javascript 中的可选链式调用

作者: zidea | 来源:发表于2019-02-24 15:02 被阅读32次

    资源参照 Fun Fun Fucntion, 这里对作者表示感谢!

    const user = { name:'zideajang'}
    const zip = user?address?.zip
    console.log(zip)
    

    这个符号我在 kotlin 中见过,可能 c# 中也有相应的符号吧。如果我们现在运行一定会报错,即使我们去掉?其实有时候学习一门新的语言,并不一定马上就会用上,或者以后也不会用上,但是至少新的语言为我们开了一扇新的大门,我们更多的见识,然后将一些语言的好的特性融入我们的开发中。

    这个将在不久将来 javascript 版本中给与支持,不过现在我们也可以体验这个特性。

    当然我们通过逻辑来达到这个目的,

    const user = { name:'zideajang'}
    const zip = 
        user &&
        user.address &&
        user.address.zip 
    console.log(zip)
    

    也可以这样做,像这样代码块我们应该随手不加思索地写出来。

    const user = { name:'zideajang'}
    const zip = 
        user 
            ?undefined
            : user.address
                ? undefined
                : user.address.zip
    console.log(zip)
    

    还可以这样

    onst user = { name:'zideajang'}
    let zip
    try {
        zip = user.address.zip
    } catch (error) {
        zip = undefined
    }
    
    console.log(zip)
    

    当然可以写一个方法来实现这个样功能,开始动手造轮子。

    function get(obj, ...props){
        const val = obj[props[0]]
        if(props.length === 1 || !val) return val
        const rest = props.slice(1)
        return get.apply(null,[val,...rest])
    }
    
    const user = { name:'zideajang'}
    const zip = get(user,'address','zip')
    console.log(zip)
    

    我们也可以引用第三方库来实现,这个 ramda 我还是第一次接触,准备以后研究一些。用起来也非常简单。

    const R = require('ramda');
    
    const user = { name:'zideajang'}
    const userWithAdress = { name:'zideajang',address:{zip:2019}}
    // const zip = get(user,'address','zip')
    
    console.log(R.path(['address','zip'],user))
    console.log(R.path(['address','zip'],userWithAdress))
    

    暂时我们还无法向 kotlin 那样进行可选调用,经过再三考虑最终使用

    const zip = get(user,'address','zip')
    

    这种方式还是最佳的可选链式调用,期望在新的版本中我们找到?这个链式可选调用操作符,这样我们就不用自己造轮子了。

    相关文章

      网友评论

        本文标题:javascript 中的可选链式调用

        本文链接:https://www.haomeiwen.com/subject/gvzvyqtx.html