オプションの連鎖?.
と無効な結合??
?.
インラインを直接使用して、存在を安全にテストできるようになりました。最新のブラウザはすべてそれをサポートしています。
??
未定義またはnullの場合、デフォルト値を設定するために使用できます。
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
ケースをチェックしない場合は、左側のプロパティが存在する必要があります。そうでない場合は、例外がスローされます。
example?.First // undefined
example?.First.Second // Uncaught TypeError: Cannot read property 'Second' of undefined
?.
ブラウザサポート -78%、2020年7月
??
ブラウザサポート -78%
Mozillaドキュメント
-
論理的な無効な割り当て、2020 +ソリューション
新事業者は、現在、ブラウザに追加されている??=
、||=
と&&=
。彼らはあなたが探していることを完全には行いませんが、コードの目的によっては同じ結果になる可能性があります。
注:これらはまだ公開ブラウザのバージョンでは一般的ではありませんが、Babelは適切にトランスパイルするはずです。在庫状況に応じて更新されます。
??=
左側が未定義またはnullかどうかをチェックし、すでに定義されている場合は短絡します。そうでない場合は、左側に右側の値が割り当てられます。||=
および&&=
は似ていますが、||
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" }
ブラウザサポート 2020年7月-.03%
Mozillaドキュメント
if( obj?.nested?.property?.value )
の代わりにif( obj && obj.nested && obj.nested.property && obj.nested.property.value )