javascript 中的可选链式调用

2023年5月15日 210次阅读 来源: zidea

资源参照 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')

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

    原文作者：zidea
    原文地址: https://www.jianshu.com/p/68567d682e9f
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞