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.streetconsole.log(street) // No.1 Street
const streetNum= user && user.address && user.address.getNum && user.address.getNum() // 是否存在之后才去调用console.log(streetNum) // 88号

有了可选链，我们的代码就可以写成这样

const street = user ?.address ?.streetconsole.log(street) // No.1 Street
const streetNum= user ?.address ?.getNum ?.()console.log(streetNum) // 88号

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