? Optional chianing ?

ネックレスは何ですか。

Optional chain演算子?.は、各チェーンの参照が有効であるかどうかを明確に検証するのではなく、接続チェーン内に位置するより深い属性値を読み取ることができる.?.演算子は.フィルタ演算子と似ていますが、nullish(nullまたはundefined)と参照されると、エラーではなく式の戻り値がundefinedに切り捨てられます.関数呼び出しで使用する場合、指定した関数が存在しない場合はundefinedを返します.
どういう意味だ?🤔
私は最初のプロジェクトからよくエラーメッセージに遭遇しました.内容は以下の通りです.

次のエラーは、足を踏み鳴らしたときに私を救ったのがこの?.で、その後?.は万能の鍵のように、「cantread property」で始まり、「undefined」で終わるエラーメッセージの大部分を解決しました.

Optional Chainingの出現背景

optional chainはES 2020で採用される最新の文法であり、いくつかの例を通じてoptional chainの出現背景を理解する
複数のユーザが存在すると仮定し、そのうちの数人はアドレス情報を持っていない.この場合、user.address.streetを使用してアドレス情報にアクセスすると、エラーが発生する可能性があります.

let user = {}; // 주소 정보가 없는 사용자

alert(user.address.street); // TypeError: Cannot read property 'street' of undefined

ネックレスが正式に採用される前に、&&演算子を使用してこれらの問題を解決します.

let user = {}; // 주소 정보가 없는 사용자

alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다.

ネストされたオブジェクトにアクセスする特定のプロパティに必要なコンポーネントをANDで接続して、実際のオブジェクトまたはプロパティが存在するかどうかを決定する方法が使用されます.しかし欠点はこのようにANDに接続して使うとコードが長くなることです.

オプションマシンが表示されます

?.は、?.「前」の評価対象が確定していないかnullである場合、評価を停止し、未定義を返すことを示す.
“can not read…”つまり、エラーのような情報に遭遇することはありません.
これが万能の鍵の秘密だ!
では、Optional Chainを使用してuser.address.streetに安全にアクセスします.

let user = {}; // 주소 정보가 없는 사용자

alert( user?.address?.street ); // undefined, 에러가 발생하지 않는다.

アドレスをuser?.addressで読み取ると、以下のuserオブジェクトが存在しなくてもエラーは発生しません.

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

しかし、上記の例では、「は?」「前」評価対象のみに作用し,拡張しないことが分かる.

Option Chainを使用する際の注意点

この部分も私がOptional Chainkingについて書いたきっかけです.いつものように、万能キー(optional chain)を使用すると、以下のコードコメントが届きます.

そして、この質問に対する回答は以下の通りです.

存在する必要があるオブジェクトで?.を使用すると、予期せぬ値の割り当て時にエラーがすぐに検出されず、デバッグが困難になる可能性があります.
なお、ES 2020は、最新の文法、Nodeバージョンが低い場合は利用できませんのでご注意ください!

段落評価

?.左評価対象に値がない場合は直ちに評価を停止する.参考として,この評価方法を短絡評価と呼ぶ.
左側の評価対象に値がない場合は、直ちに評価を停止することが核心であるため、関数呼び出しを含む?.の右側の追加操作は、?.の評価が停止した場合には発生しない.
これらの性質を利用して,非常に効率的なコード実装を実現できる.

let user = null;
let x = 0;

user?.sayHi(x++); // 아무 일도 일어나지 않는다

alert(x); // 0, x는 증가하지 않는다.

?.わあ。[]

?.は演算子ではありません.?.は、関数または括弧とともに動作する特殊な構文構造体である.
関数に関連する例は、不確定な関数が呼び出されたときに?.()に書き込まれる方法について説明する.
1つのオブジェクトにはメソッドadminがありますが、別のオブジェクトにはありません.
どちらの場合もuserオブジェクトが存在するため、admin propertyはです.使用して近接します.

let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
}

let user2 = {};

user1.admin?.(); // 관리자 계정입니다.
user2.admin?.();

その後、?.()を使用してadminが存在するかどうかを確認します.user 1でadminが定義されているため、メソッドが正しく呼び出されます.逆に、user 2にはadminが定義されていないが、呼び出しメソッドは、誤って評価を停止しないことを保証することができる.
を選択します.ただし、カッコ[]を使用してオブジェクトプロパティにアクセスすると、どのようなことが起こりますか?[]も使用できます.上記の例と同じですか?[]を使用すると、propertyが存在するかどうか分からない場合でも、propertyを安全に読み込むことができます.

let user1 = {
  firstName: "Violet"
};

let user2 = null; // user2는 권한이 없는 사용자라고 가정해봅시다.

let key = "firstName";

alert( user1?.[key] ); // Violet
alert( user2?.[key] ); // undefined

alert( user1?.[key]?.something?.not?.existing); // undefined

?.は、deleteと組み合わせて使用することもできる.

delete user?.name; // user가 존재하면 user.name을 삭제합니다.

ただし、?.は読み取りまたは削除に使用できますが、書き込みには使用できません.
?.代入演算子の左側では使用できません.

// user가 존재할 경우 user.name에 값을 쓰려는 의도로 아래와 같이 코드를 작성해 보았습니다.

user?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문입니다.