ES11中的globalThis和可选链

Posted 2021-08-17 飞鹰3995

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

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

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