共计 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 号
是不是很不便也很清晰?明天的分享就到这里,又是提高的一天,一起加油!
大家还能够扫描二维码,关注我的微信公众号,蜗牛全栈
正文完
发表至: javascript
2021-08-16