Objet à l'intérieur d'un objet en JavaScript

1. Créer des objets imbriqués en JavaScript
2. Imbrication multiple en Javascript

Cet article de tutoriel expliquera comment nous pouvons créer plusieurs objets à l’intérieur d’un autre objet en JavaScript.

Un objet JavaScript est une collection de paires clé-valeur, et les objets imbriqués sont des objets qui contiennent d’autres objets comme propriété. L’imbrication est une pratique largement utilisée en programmation car elle fournit au code des détails plus détaillés.

Chaque objet a ses propres propriétés ou clés, qui sont utilisées pour stocker les détails de l’objet. Une virgule sépare chaque propriété ou clé.

Voyons comment nous créons un objet et des propriétés en 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'
}

Ici, si vous voyez, const layer0 est le nom de l’objet. C’est ainsi que nous créons un objet en Javascript. Maintenant, dans l’objet, comme vous pouvez le voir, layer1Item1, layer1Item2, layer1Item3 et layer1Item4 sont les propriétés de l’objet. Ces propriétés doivent être uniques et les facteurs de différenciation qui distinguent un objet d’un autre.

Maintenant, si vous souhaitez créer un objet dans un autre objet, l’objet interne est créé en tant que propriété de l’objet externe, et cet objet interne n’est accessible qu’à l’aide de l’objet externe.

Créer des objets imbriqués en JavaScript

const layer0 = {

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

  }
};

Dans cet exemple, layer1Item2 est un nouvel objet à l’intérieur d’un autre objet. Cependant, layer1Item1 est une propriété de l’objet, et layer1Item2 est un objet. Les deux se ressemblent car l’objet nouvellement créé est également créé en tant que propriété de l’objet extérieur layer0.

Maintenant, si vous voulez accéder à l’objet interne, vous écrivez le nom de l’objet externe, et après un point, vous écrivez le nom de l’objet interne.

layer0.layer1Item2

Et si vous souhaitez accéder à une propriété dans l’objet interne, le code sera :

layer0.layer1Item2.layer2Item1

Imbrication multiple en Javascript

Il n’y a pas de limite d’imbrication en Javascript. Vous pouvez créer n nombre de hiérarchies. La méthode d’accès aux objets serait la même pour accéder aux objets internes, comme indiqué dans l’exemple précédent.

const layer0 = {

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

Dans cet exemple, il y a 3 objets créés, layer0, layer1 et layer2. L’objet layer2 est à l’intérieur de layer1, et layer1 est à l’intérieur de layer0. Il y a 3 couches ou hiérarchies dans cet exemple. Maintenant, layer2 est écrit comme une propriété de layer1.

Pour accéder aux propriétés du layer2, nous écrirons le code suivant.

layer0.layer1Item2.layer2Item1.layer3Item1

Maintenant, pour ajouter une nouvelle propriété à un objet dans le code suivant :

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'
}

nous allons simplement attacher le nom de l’objet à la propriété de l’objet avec un point et lui attribuer une valeur comme ci-dessous :

layer0.layer1Item5 = 'New Item created';

Maintenant, l’objet résultant ressemblera à ce qui suit :

{
  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'
}

Si vous souhaitez supprimer une propriété de l’objet, c’est simple à comprendre. Nous utilisons le mot-clé delete à côté du nom de l’objet attaché à la propriété de l’objet, séparé par un point que vous souhaitez supprimer. Regardez l’exemple suivant :

Considérons que nous avons l’objet suivant.

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'
}

Et nous voulons supprimer la propriété layer1Item4 ; nous allons écrire le code suivant.

delete layer0.layer1Item4;

Maintenant, l’objet ressemblera à ci-dessous.

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