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`。

Use ?.Operator

user オブジェクトがあるとします:

const user = {
  name: "前端小智",
  age: 21,
  homeaddress: {
    country: "中国"
  },
  hobbies: [{name: "敲代码"}, {name: "洗碗"}],
  getFirstName: function(){
    return this.name;
  }
}

Properties

既存の属性へのアクセス:

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

Method

既存のメソッドへのアクセス:

console.log(user.getFirstName());

存在しないメソッドへのアクセス:

console.log(user.getLastName()); 
// throws error "Uncaught TypeError: user.getLastName is not a function";

非存在のメソッドにアクセスするには、代わりに

?. を使用してください。存在するメソッド メソッド:

console.log(user.getLastName?.()); 
// "undefined"

Array

既存の配列にアクセスする:

console.log(user.hobbies[0].name); 
// "敲代码"

存在しないメソッドにアクセスする:

console.log(user.hobbies[3].name); 
// throws error "Uncaught TypeError: Cannot read property 'name' of undefined"

代わりに # を使用します ##?.

存在しない配列にアクセスします: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">console.log(user.dislikes?.[0]?.name); // &quot;undefined&quot;</pre><div class="contentsignin">ログイン後にコピー</div></div>

??<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 サイトの他の関連記事を参照してください。