2020 解决方案,?.
以及??
您现在可以直接使用?.
(Optional Chaining) 内联来安全地测试是否存在。所有现代浏览器都支持它。
??
(Nullish Coalescing) 可用于在未定义或为空的情况下设置默认值。
aThing = possiblyNull ?? aThing
aThing = a?.b?.c ?? possiblyNullFallback ?? aThing
如果属性存在,则?.
继续下一个检查,或返回有效值。任何故障都会立即短路并返回undefined
。
const example = {a: ["first", {b:3}, false]}
example?.a // ["first", {b:3}, false]
example?.b // undefined
example?.a?.[0] // "first"
example?.a?.[1]?.a // undefined
example?.a?.[1]?.b // 3
domElement?.parentElement?.children?.[3]?.nextElementSibling
null?.() // undefined
validFunction?.() // result
(() => {return 1})?.() // 1
为确保默认定义值,您可以使用??
. 如果您需要第一个真值,您可以使用||
.
example?.c ?? "c" // "c"
example?.c || "c" // "c"
example?.a?.[2] ?? 2 // false
example?.a?.[2] || 2 // 2
如果不检查 case,则 left-side 属性必须存在。如果没有,它会抛出异常。
example?.First // undefined
example?.First.Second // Uncaught TypeError: Cannot read property 'Second' of undefined
?.
浏览器支持- 92%,2021 年 11 月
??
浏览器支持- 92%
Mozilla 文档
——
逻辑空赋值,2020+解决方案
目前正在向浏览器??=
、||=
和 中添加新的运算符&&=
。它们并不能完全满足您的要求,但可能会导致相同的结果,具体取决于您的代码目标。
注意:这些在公共浏览器版本中还不常见,但 Babel 应该可以很好地转换。将随着可用性的变化而更新。
??=
检查左侧是否未定义或为空,如果已定义则短路。如果不是,则左侧被分配右侧值。||=
and&&=
是相似的,但基于||
and&&
运算符。
基本示例
let a // undefined
let b = null
let c = false
a ??= true // true
b ??= true // true
c ??= true // false
对象/数组示例
let x = ["foo"]
let y = { foo: "fizz" }
x[0] ??= "bar" // "foo"
x[1] ??= "bar" // "bar"
y.foo ??= "buzz" // "fizz"
y.bar ??= "buzz" // "buzz"
x // Array [ "foo", "bar" ]
y // Object { foo: "fizz", bar: "buzz" }
浏览器支持2021 年 11 月 - 90%
Mozilla 文档