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，那么就返回右边的值。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！