首页 > 建站教程 > JS、jQ、TS >  JS可选链和双问号详解正文

JS可选链和双问号详解

如果你有个对象user,user下有address,address下有street,输出street可能会这样写:
return user.address.street
但是当这个address不存在,比如后台没有返回,即undefined,这时上面的代码就会报错:
Uncaught TypeError: Cannot read property 'street' of undefined

于是不得不这样写:
var street = user.address && user.address.street;
return street || '';
有了这个新语法,你可以写成
var street = user.address?.street
你可能还写过这样的代码
var fooInput = myForm.querySelector('input[name=foo]')
var fooValue = fooInput ? fooInput.value : undefined
有了新语法后,你可以写成
var fooValue = myForm.querySelector('input[name=foo]')?.value
但在实际使用中,还是会有些不便,比如
const result = response?.settings?.n || 100
你希望如果 response 或者 response.settings 或者 response.settings.n 不存在(值为 null 或者 undefined)时,result 保底值为 100。
但是上面代码在 n 为 0 的时候,也会让 result 变成 100,你实际上希望此时 result 为 0。
于是你只好把代码写成这样
const result = response?.settings?.n === undefined ? 100 : response?.settings?.n
或者你封装一下
const result = fetch(response?.settings?.n, 100)
现在,你可以用另一个新语法——双问号——来简化代码:
const result = response?.settings?.n ?? 100
这个 ?? 的意思是,如果 ?? 左边的值是 null 或者 undefined,那么就返回右边的值。