ES11中的globalThis和可选链

小编今天更新的这两个新特性主要是编码可以更方便,同时也增加了兼容性,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号

是不是很方便也很清晰?今天的分享就到这里,又是进步的一天,一起加油!

大家还可以扫描二维码,关注我的微信公众号,蜗牛全栈

ES11中的globalThis和可选链 

ES11中的globalThis和可选链

上一篇:synchronized关键字


下一篇:ORA-12526: TNS: 监听程序: 所有适用例程都处于受限模式