关于javascript:ES11中的globalThis和可选链

38次阅读

共计 1324 个字符,预计需要花费 4 分钟才能阅读完成。

小编明天更新的这两个新个性次要是编码能够更不便,同时也减少了兼容性,globalThis 次要是提供了一个规范的形式去获取不同环境下的全局对象。可选链次要是减少了对象中获取内容的安全性。
一、globalThis
对于 WEB(浏览器)环境下,js 中的全局变量是 window/self,置信大家对于 window 理解的比拟多,也比拟相熟,小编也是明天才晓得 self 的这个对象,从目前来看,能够认为是一样的。上面是延时实例

setTimeout(() => {console.log('lilei')
},1000) // lilei

因为下面的例子是在全局下的办法,如果写全的话,应该是这样

window.setTimeout(() => {console.log('lilei')
},1000) // lilei

self.setTimeout(() => {console.log('lilei')
},1000) // lilei

同样,咱们能够自定义一个获取不同环境下的全局变量办法,就像这样

const getGlobal = () => {if(typeof self !== 'undefined'){return self}
    if(typeof window !== 'undefined'){return window}
    if(typeof global !== 'undefined'){return global}
    throw new Error('无奈找到全局对象')
}

const testGlobal  = getGlobal()
console.log(testGlobal)

在 es11 引入 globalThis 后,下面的一堆代码就能够简写成这样

console.log(globalThis)

二、可选链
之前小编在看他人代码的时候发现过这个符号,然而在网上搜寻的时候,基本不晓得怎么去搜寻,也就长期搁下了,直到看到了可选链的概念,我才豁然开朗。
先举一个理论的例子,咱们在调用对象的属性或者办法的时候,很多时候咱们不晓得后端传递过去的数据是不是确切有指定属性,这时候,咱们的代码就会写成这样:

const user = {
    address:{
        street:'No.1 Street',
        getNum(){return '88 号'}
    }
}

const street = user && user.address && user.address.street
console.log(street) // No.1 Street

const streetNum= user && user.address && user.address.getNum && user.address.getNum() // 是否存在之后才去调用
console.log(streetNum) // 88 号

有了可选链,咱们的代码就能够写成这样

const street = user ?.address ?.street
console.log(street) // No.1 Street

const streetNum= user ?.address ?.getNum ?.()
console.log(streetNum) // 88 号

是不是很不便也很清晰?明天的分享就到这里,又是提高的一天,一起加油!
大家还能够扫描二维码,关注我的微信公众号,蜗牛全栈

正文完
 0