ホームページ > 記事 > ウェブフロントエンド > JavaScript のオプション (?.) 演算子について話しましょう
この記事では、JavaScript のオプション (?.) 演算子について紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
null (null
および unknown
) チェックを使用してオブジェクトのネストされたプロパティにアクセスする方法バックエンドからインターフェイスにアクセスします。 ユーザーの詳細にアクセスします。
ネストされた三項演算子を使用できます:
const userName = response ? (response.data ? (response.data.user ? response.data.user.name : null) : null) : null;
または、null 値のチェックに if
を使用します:
let userName = null; if(response && response.data && response.data.user){ userName = response.data.user.name; }
または、さらに良いのは &&
単一行リンクにする条件は次のとおりです:
const userName = response && response.data && response.data.user && response.data.user.name;
上記のコードに共通するのは、リンクが非常に冗長になり、書式設定や読み取りが困難になる場合があるということです。これが ?.
演算子が提案された理由です。これを ?.
に変更して上記のコードを再構築しましょう:
const userName = response?.data?.user?.name;
は非常に優れています。
##?. この構文は ES2020 で導入され、その使用法は次のとおりです:
obj.val?.pro // 如果`val`存在,则返回`obj.val.prop`,否则返回 `undefined`。 obj.func?.(args) // 如果 obj.func 存在,则返回 `obj.func?.(args)`,否则返回 `undefined`。 obj.arr?.[index] // 如果 obj.arr 存在,则返回 `obj.arr?.[index]`,否则返回 `undefined`。
Operator
user オブジェクトがあるとします:
const user = { name: "前端小智", age: 21, homeaddress: { country: "中国" }, hobbies: [{name: "敲代码"}, {name: "洗碗"}], getFirstName: function(){ return this.name; } }
console.log(user.homeaddress.country); // 中国存在しない属性へのアクセス:
console.log(user.officeaddress.country); // throws error "Uncaught TypeError: Cannot read property 'country' of undefined"代わりに
?. を使用します。存在しない属性へのアクセス:
console.log(user.officeaddress?.country); // undefined
console.log(user.getFirstName());存在しないメソッドへのアクセス:
console.log(user.getLastName()); // throws error "Uncaught TypeError: user.getLastName is not a function";非存在のメソッドにアクセスするには、代わりに
?. を使用してください。存在するメソッド メソッド:
console.log(user.getLastName?.()); // "undefined"
console.log(user.hobbies[0].name); // "敲代码"存在しないメソッドにアクセスする:
console.log(user.hobbies[3].name); // throws error "Uncaught TypeError: Cannot read property 'name' of undefined"代わりに # を使用します ##?.
存在しない配列にアクセスします: <pre class="brush:js;toolbar:false;">console.log(user.dislikes?.[0]?.name);
// "undefined"</pre>
<strong></strong> Operator
操作記号 オブジェクトが存在しない場合は、単に unknown
を返します。開発中は、unknown
を返さず、デフォルト値を返す場合があります。この場合、二重の Question??
演算子を使用できます。 は少し抽象的です。直接的な例を見てみましょう:
const country = user.officeaddress?.country; console.log(country); // undefined
デフォルト値を返す必要があります:
const country = user.officeaddress?.country ?? "中国"; console.log(country); // 中国英語の元のアドレス: https://codingncoepts .com/javascript/optional-chaining-opeator-javascript/
プログラミング入門著者: Ashish Lahoti
プログラミング関連の知識の詳細については、次を参照してください:
以上がJavaScript のオプション (?.) 演算子について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。