Javascript でのオブジェクトの分解 |リアルタイムの例 |いい練習

私は自分のプロジェクトに取り組んでいて、同僚から、アプリを壊す可能性があるため、ネストされたオブジェクトのデフォルト値を設定するレビュー コメントを受け取りました.

以下は、API 呼び出しから取得していた応答オブジェクト構造です.

response = {
  data:
   someData: {
     name: 'Ashish',
     number: 9876543210
    }
  }
}

name と number だけがコードで使用されていました.コメントを受け取った以前に書いたコードは次のようになります.

const { name, number } = response.data.someData;

問題

上記のコードの問題は、

バックエンドがデータ オブジェクトを共有しない場合は

.次に、JS エンジンは undefined で someData を見つけようとします.これにより、アプリケーションが壊れた可能性があります

複数回分解するのではなく、すべてを 1 行で書きたかった

したがって、上記の問題を回避するために、デフォルト値を使用した JavaScript のマルチレベル デストラクチャリングの適切な方法を Google で検索する必要がありました.そして、これが私が得たものです

解決

const { data: { someData: { name, number } } = { someData: { name: '', number: null } } } = response;

フロントエンドで応答オブジェクトのデフォルト値を設定しているため、コードは壊れません.

きれいなコード

可読 (この点は議論されており、開発者の視点に依存します)

説明

マルチレベルの非構造化を試したことがない場合、上記のコードは少しわかりにくいかもしれません.上記のコードを複数のステートメントに分割してみましょう.


1. マルチレベルの分解

const { 
  data: 
    { someData: 
      { 
        name,
        number
       }
     }
   } = response;

//OR
// In one line

const { data: { someData: { name, number } } } = response;

これが、マルチレベル オブジェクトを分解する方法です.親オブジェクト data が子オブジェクト someData を指し、次に子オブジェクト someData が値 name および number を持つ子オブジェクトを参照する場合.


2. デフォルト値の割り当て

応答オブジェクトに data が存在しない場合は、デフォルト値を割り当てます

const { data = {} } = response;

応答に data が存在しない場合、空のオブジェクトを含むデータが応答内に作成されます.


ノート:

デフォルト値は右側にあり、値を割り当てるために = が使用されます.

const {
        data: { 
           someData: { 
             name,
             number
           }
       } = { someData: { name: '', number: null } } } = response;
// OR
// in 1 line

const { data: { someData: { name, number } } = { someData: { name: '', number: null } } } = response;

これにより、someData のオブジェクトが作成されます.name のデフォルト値は '' の空の文字列で、number のデフォルト値は null です.


ノート:
'' 空文字列と null は偽の値です.