JavaScript のオブジェクト内のオブジェクト

1. JavaScript でネストされたオブジェクトを作成する
2. Javascript での複数のネスト

このチュートリアル記事では、JavaScript で別のオブジェクト内に複数のオブジェクトを作成する方法について説明します。

JavaScript オブジェクトは、キーと値のペアのコレクションであり、ネストされたオブジェクトは、プロパティとして他のオブジェクトを内部に持つオブジェクトです。ネスティングは、コードにさらに詳細な情報を提供するため、プログラミングで広く使用されている方法です。

各オブジェクトには、オブジェクトの詳細を格納するために使用される独自のプロパティまたはキーがあります。各プロパティまたはキーはコンマで区切ります。

Javascript でオブジェクトとプロパティを作成する方法を見てみましょう。

const layer0 = {
  layer1Item1: 'Layer 1 Item 1 Text',
  layer1Item2: 'Layer 1 Item 2 text',
  layer1Item3: 'Layer 1 Item 3 Text',
  layer1Item4: 'Layer 1 Item 4 text'
}

ここで、ご覧のとおり、const layer0 はオブジェクトの名前です。これが、Javascript でオブジェクトを作成する方法です。ご覧のとおり、オブジェクト内では、layer1Item1、layer1Item2、layer1Item3、および layer1Item4 がオブジェクトのプロパティです。これらのプロパティは一意であり、オブジェクトを別のオブジェクトと区別する差別化要因である必要があります。

これで、別のオブジェクト内にオブジェクトを作成する場合、内側のオブジェクトは外側のオブジェクトのプロパティとして作成され、この内側のオブジェクトには外側のオブジェクトを使用してのみアクセスできます。

JavaScript でネストされたオブジェクトを作成する

const layer0 = {

  layer1Item1: 'Layer 1 Item 1 Text',
  layer1Item2: {
    layer2Item1: 'Layer 2 Item 2 Text',
    layer2Item2: false

  }
};

この例では、layer1Item2 は別のオブジェクト内の新しいオブジェクトです。ただし、layer1Item1 はオブジェクトのプロパティであり、layer1Item2 はオブジェクトです。新しく作成されたオブジェクトも外部オブジェクト layer0 のプロパティとして作成されるため、どちらも似ています。

ここで、内部オブジェクトにアクセスする場合は、外部オブジェクトの名前を記述し、ドットの後に内部オブジェクトの名前を記述します。

layer0.layer1Item2

また、内部オブジェクト内のプロパティにアクセスする場合、コードは次のようになります。

layer0.layer1Item2.layer2Item1

Javascript での複数のネスト

Javascript でのネストの制限はありません。n 個の階層を作成できます。オブジェクトにアクセスする方法は、前の例で説明したように、内部のオブジェクトにアクセスする場合と同じです。

const layer0 = {

  layer1Item1: 'Layer 1 Item 1 Text',
  layer1Item2: {
    layer2Item1: 'Layer 2 Item 2 Text',
    layer2Item2: false,
    layer2Item3: {layer3Item1: 'Layer 3 Item 2 Text'}
  }
};

この例では、layer0、layer1、および layer2 の 3つのオブジェクトが作成されています。layer2 オブジェクトは layer1 の中にあり、layer1 は layer0 の中にあります。この例には、3つのレイヤーまたは階層があります。現在、layer2 は layer1 のプロパティとして記述されています。

layer2 のプロパティにアクセスするには、次のコードを記述します。

layer0.layer1Item2.layer2Item1.layer3Item1

次に、次のコードでオブジェクトに新しいプロパティを追加します。

let layer0 = {
  layer1Item1: 'Layer 1 Item 1 Text',
  layer1Item2: 'Layer 1 Item 2 text',
  layer1Item3: 'Layer 1 Item 3 Text',
  layer1Item4: 'Layer 1 Item 4 text'
}

オブジェクト名とオブジェクトプロパティにドットを付けて、次のような値を割り当てるだけです。

layer0.layer1Item5 = 'New Item created';

これで、結果のオブジェクトは次のようになります。

{
  layer1Item1: 'Layer 1 Item 1 Text', layer1Item2: 'Layer 1 Item 2 text',
      layer1Item3: 'Layer 1 Item 3 Text', layer1Item4: 'Layer 1 Item 4 text',
      layer1Item5: 'New Item Created'
}

オブジェクトからプロパティを削除する場合は、簡単に理解できます。削除するドットで区切って、object プロパティに付加されたオブジェクト名と一緒に delete キーワードを使用します。次の例を見てください。

次のオブジェクトがあるとします。

let layer0 = {
  layer1Item1: 'Layer 1 Item 1 Text',
  layer1Item2: 'Layer 1 Item 2 text',
  layer1Item3: 'Layer 1 Item 3 Text',
  layer1Item4: 'Layer 1 Item 4 text'
}

そして、layer1Item4 プロパティを削除します。次のコードを記述します。

delete layer0.layer1Item4;

これで、オブジェクトは次のようになります。

{
  layer1Item1: 'Layer 1 Item 1 Text', layer1Item2: 'Layer 1 Item 2 text',
      layer1Item3: 'Layer 1 Item 3 Text',
}