JavaScript はどのようにしてマルチレベル応答の深いフィールドをエレガントに取得しますか? オプションのチェーン (オプションのチェーン)

一文


var marriedFlag = response.data.userList[0].married;		// 如果中间某个对象为空,会报Error


var marriedFlag = response?.data?.userList[0]?.married;// 如果中间某个对象为空,只是最终表达式的值为 undefined ,而不是报错。

シナリオ: マルチレベル オブジェクトから深いレベルでフィールドを取得する

現在、私はフロントエンド開発者で、バックエンド API を呼び出しています。その応答は次のようになります。

{
    
    
  errorCode: null,
  errorDesc: null,
  data: {
    
    
  	userList: [
			{
    
    
				name: "wuyujin",
				age: 22,
				married: true
			}
    ]
  }
}

marriedフロントエンドでレンダリングするためにその情報を取得する必要があります。

var response = fetch...	// 发送HTTP请求,拿到response

var marriedFlag = response.data.userList[0].married;
var text = marriedFlag ? "已婚" : "未婚";

私のコードは問題ありません。
しかし、ある日突然、バックエンドからの応答に何かが欠けていて、次のようになりました。

{
    
    
  errorCode: null,
  errorDesc: null,
  data: null
}

私のコードはエラーを報告します:response.data.userList[0].married;中央response.dataは null で、null を使用してメンバーを呼び出し、エラーを報告します:
ここに画像の説明を挿入
次に、フロントエンド コードを変更します。

var response = fetch...	// 发送HTTP请求,拿到response

if (response !== undefined && response.data !== undefined && response.data.userList != undefined ...) {
    
    
	var marriedFlag = response.data.userList[0].married;
	var text = marriedFlag ? "已婚" : "未婚";
}

とても面倒です。

?ある日、オペレーターに会うまでは。

MDN オプションのチェーン化

MDN オプションのチェーン (?.)

データ抽出要件への同じ対応として、コードを次のように変更できます。

var response = fetch...	// 发送HTTP请求,拿到response

// var marriedFlag = response.data.userList[0].married;
var marriedFlag = response?.data?.userList[0]?.married;
var text = marriedFlag ? "已婚" : "未婚";

オブジェクト内で呼び出しチェーンが.発生するため?.、回避できます因某一步对象实际为null/undefined而导致报处Error
これを使用した後?.、中間のオブジェクトの特定の層が空の場合、それはステートメント全体の戻り値が未定義であるだけであり、エラーは報告されません。

ここに画像の説明を挿入
この構文のブラウザ互換性の詳細:

ここに画像の説明を挿入

検索エンジンの使用

この文言を見たとき、その使い方はすぐにわかりましたが、正式名称が何なのかはまったくわからず、baidu/bing/google/SOF で詳細を検索しましたが、何も見つかりませんでしたjavascript ?.

ある日、私は次のキーワードを使って実験を始めました。
javascript 问号 点
javascript question dot
ついに結果が得られました。

私が言いたいのは、検索エンジンで検索したいもの自体が特殊文字だった場合、考え方や検索方法を変える必要があるということです。

?.バックエンドにとって、これは特別なシンボルであり、扱いが簡単ではありません。
おそらく、あなたが呼び出している検索インターフェイスでは、これらの特殊文字は検索キーワードとしてまったく扱われません。

おすすめ

転載: blog.csdn.net/wuyujin1997/article/details/129374348