問題の理解
JavaScript アプリケーションでは複雑なデータ構造に遭遇することがよくあります。これらの構造はオブジェクトが深くネストされている場合があるため、直接操作したり処理したりすることが困難になります。一般的な操作の 1 つは、これらのオブジェクトをフラット化し、すべてのプロパティが最上位にあるより単純な構造に変換することです。

このブログでは、深くネストされたオブジェクトを効果的に平坦化する JavaScript コード スニペットについて詳しく説明します。コードを 1 行ずつ分解して、そのロジックと機能を説明します。

コードの内訳

let user = {
  name : 'Chiranjit',
  address : {
    personal : {
      city: 'Kolkata',
      state: 'West Bengal'
    },
    office : {
      city: 'Bengaluru',
      state: 'Karnataka',
      area: {
        landmark:'Waterside',
        post: 433101
      }
    }
  }
}
var finalObj = {} 

const flatObjFn = (obj, parent) => {
  for(let key in obj){
    if(typeof obj[key] === 'object'){
      flatObjFn(obj[key], parent '_' key)
    }else{
      finalObj[parent   '_'   key] = obj[key]
    }
  }
}

flatObjFn(user, 'user');
console.log(finalObj);

一行ずつの説明

1. ネストされたオブジェクトの作成:
   • まず、user という名前の深くネストされたオブジェクトを作成します。含まれています 名前、アドレス、さらにネストされたオブジェクトなどのプロパティ 住所。

2. 出力オブジェクトの初期化:

   • 平坦化された結果を保存するために、空のオブジェクトfinalObjが作成されます。

3. 平坦化関数の定義:

   • flatObjFn という名前の関数が定義されており、2 つのパラメーターを受け入れます。 a) obj: 平坦化するオブジェクト。 b) 親: わかりやすくするためにプロパティ名の前に付ける文字列。

4. オブジェクト プロパティの反復処理:

   • for...in ループは、入力オブジェクト obj.
   の各プロパティを反復します。

5. ネストされたオブジェクトの処理:

   • プロパティの値がオブジェクトの場合、 flatObjFn 関数は次のようになります。 そのオブジェクトを再帰的に呼び出します。親パラメータは 現在のプロパティ名と連結して新しいプレフィックスを作成します ネストされたプロパティの場合。

6. プリミティブ値の処理:

   • プロパティの値がオブジェクトではない場合（つまり、プリミティブ値） 文字列や数値など）、キーとともにfinalObjに追加されます 親と現在のプロパティ名を連結して形成されます。

7. 平坦化関数の呼び出し:

   • flatObjFn は、ユーザー オブジェクトを入力として、「ユーザー」を入力として呼び出します。 最初の親プレフィックス。

8. フラット化されたオブジェクトのログ記録:

   • 最終的に平坦化されたオブジェクトは、次を使用してコンソールに出力されます。 console.log(finalObj).

仕組みは?
flatObjFn 関数はオブジェクトを再帰的に走査し、ネストされた構造をフラットなオブジェクトに分解します。親パラメーターはオブジェクト階層を追跡し、関数が出力オブジェクトに意味のあるプロパティ名を作成できるようにします。

Twitter または LinkedIn でつながりましょう