ES11中的globalThis和可选链 javascript前端

小编今天更新的这两个新特性主要是编码可以更方便，同时也增加了兼容性，globalThis主要是提供了一个标准的方式去获取不同环境下的全局对象。可选链主要是增加了对象中获取内容的安全性。
一、globalThis
对于WEB(浏览器)环境下，js中的全局变量是window/self，相信大家对于window了解的比较多，也比较熟悉，小编也是今天才知道self的这个对象，从目前来看，可以认为是一样的。下面是延时实例

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

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

window.setTimeout(() => { console.log('lilei') },1000) // lileiself.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 Streetconst streetNum= user && user.address && user.address.getNum && user.address.getNum() // 是否存在之后才去调用 console.log(streetNum) // 88号

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

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

【ES11中的globalThis和可选链】是不是很方便也很清晰？今天的分享就到这里，又是进步的一天，一起加油！
大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈