Comment créer un tableau de plusieurs objets avec plusieurs paires clé-valeur imbriquées en JavaScript ?

JavaScript est un langage à usage général largement utilisé pour créer des applications Web dynamiques. Les tableaux sont l’une des structures de données les plus couramment utilisées en JavaScript. Un tableau est une collection d’éléments pouvant être de n’importe quel type, y compris des objets. Dans cet article, nous verrons comment créer un tableau de plusieurs objets avec plusieurs paires clé-valeur imbriquées en JavaScript.

Qu'est-ce qu'un tableau ?

Un tableau est un type spécial d'objet utilisé pour stocker une collection de valeurs. Les valeurs peuvent être de n'importe quel type de données, tel que des nombres, des chaînes, des valeurs booléennes ou même d'autres tableaux. Les tableaux sont une fonctionnalité très puissante de JavaScript qui peut être utilisée dans de nombreux types d'applications différents.

Grammaire

let myArray = [20, 22, 24];
Or
const arr = [hello, ‘world’];

Créez un tableau contenant plusieurs objets

Tout d'abord, pour créer un tableau avec plusieurs objets en JavaScript, nous devons définir un tableau vide, pour lequel nous pouvons utiliser la notation []. Après avoir défini le tableau, nous pouvons utiliser la méthode push() pour ajouter un ou plusieurs objets au tableau. Par exemple -

let arr = [];
arr.push({
  key1: value1,
  key2: value2
});
arr.push({
  key1: value3,
  key2: value4
});

Dans l'exemple donné, nous rejetons un tableau nommé "arr" qui comporte deux objets. Nous avons utilisé la méthode push() pour ajouter chaque objet à la fin du tableau. Ici, l'objet tableau est défini à l'aide d'accolades {} avec des paires clé-valeur. Une fois que nous avons créé le tableau contenant les objets, nous pouvons maintenant utiliser des méthodes ou des opérations JavaScript pour accéder et manipuler les objets et leurs propriétés.

Il existe de nombreuses façons d'accéder aux objets dans un tableau, l'une consiste à utiliser la méthode forEach () pour parcourir le tableau et accéder à chaque objet et à ses propriétés individuellement, ou nous pouvons également utiliser des méthodes telles que map() ou filter( ) pour la conversion ou l'exploitation d'éléments dans un tableau.

Ajouter des paires clé-valeur imbriquées aux objets

Après avoir créé le tableau, nous pouvons maintenant ajouter des paires clé-valeur imbriquées à un objet en définissant un objet dans un autre objet. Par exemple -

let myObj = {
  key1: value1,
  key2: {
    nestedKey1: nestedValue1,
    nestedKey2: nestedValue2
  }
};

Dans l'exemple donné, nous avons défini myObj comme un objet avec deux paires clé-valeur. La valeur de la paire key2 est un autre objet avec deux paires clé-valeur imbriquées.

Créez un tableau à l'aide d'objets avec des paires clé-valeur imbriquées

Pour créer un tableau d'objets avec des paires clé-valeur imbriquées, nous pouvons combiner les techniques décrites ci-dessus. Par exemple -

let arr = [];
arr.push({
  key1: value1,
  key2: {
    nestedKey1: nestedValue1,
    nestedKey2: nestedValue2
  }
});
arr.push({
  key1: value3,
  key2: {
    nestedKey1: nestedValue3,
    nestedKey2: nestedValue4
  }
});

Ci-dessus, nous avons défini un tableau vide et y avons ajouté deux objets à l'aide de la méthode push(). Chaque objet contient deux paires clé-valeur. La valeur de key2 est une autre avec deux paires clé-valeur imbriquées.

Accédez aux données dans un tableau d'objets à l'aide de paires clé-valeur imbriquées

Méthode 1

Dans cette méthode, nous utiliserons une combinaison de notation par points et de notation par crochets pour accéder aux données dans un tableau d'objets avec des paires clé-valeur imbriquées. La notation par points permet un accès direct aux propriétés d'un objet, tandis qu'en notation entre crochets, nous pouvons accéder aux propriétés à l'aide de variables.

À titre d'exemple, nous pouvons accéder à la propriété name du premier objet dans arr en utilisant la notation par points comme suit -

const objOne = arr[0];
const object = objOne.name;

Ici, nous attribuons le premier objet de arr à une variable nommée objOne. En utilisant désormais la notation par points, nous pouvons accéder à n'importe quelle propriété d'objOne et l'attribuer à une variable nommée object.

Pour accéder à l'attribut d'état de l'attribut d'adresse du deuxième objet dans arr, nous pouvons utiliser la notation par parenthèse suivante -

const objTwo = arr[1];
const address = objTwo["city"]["state"];

Ici, nous attribuons un autre objet dans arr à une variable nommée objTwo. En utilisant désormais la notation entre crochets, nous pouvons accéder à la propriété city d'objTwo, puis attribuer la propriété state de l'objet imbriqué à la variable d'adresse.

Méthode 2

Une autre façon d'accéder aux données d'un tableau d'objets avec des paires clé-valeur imbriquées consiste à utiliser la méthode forEach(). Dans cette méthode, le tableau est itéré à l'aide de la méthode forEach() et pour chaque objet du tableau, une boucle for...in est utilisée pour extraire la valeur de chaque paire clé-valeur. Ces valeurs sont ensuite poussées dans un nouveau tableau.

Exemple 1

Cet exemple montre comment créer un tableau contenant plusieurs objets avec des paires clé-valeur imbriquées.

Nous avons créé un tableau vide nommé arr et y avons ajouté trois objets à l'aide de la méthode push(). Chaque objet possède une paire clé-valeur : key1 a la valeur "value1", key2 a la valeur "value2", et ainsi de suite. La méthode Push() ajoute un élément à un tableau et prend un ou plusieurs paramètres représentant les éléments à ajouter, et enfin, les trois objets sont transmis en tant que paramètres distincts.

<!DOCTYPE html>
<html>
   <body>
      <p id="array"></p>
      <script>
         let arr = [];
         arr.push({ key1: "value1" }, { key2: "value2" }, { key3: "value 3" });
         document.getElementById("array").innerHTML = JSON.stringify(arr);
      </script>
   </body>
</html>

Exemple 2

Cet exemple montre comment créer deux tableaux contenant plusieurs objets avec des paires clé-valeur imbriquées et les ajouter à un seul tableau.

Dans le code ci-dessous, nous utilisons une boucle for...in pour parcourir chaque objet dans arr1 et arr2 afin d'accéder à la valeur associée à chaque clé. Nous utilisons ensuite arr3.push(object[key]) pour pousser uniquement la valeur dans le tableau arr3.

<!DOCTYPE html>
<html>
   <body>
      <p id="array"></p>
      <script>
         const arr1 = [
            { key1: "value 1" },
            { key2: "value 2" },
            { key3: "value 3" },
         ];
         const arr2 = [
            { key4: "value 4" },
            { key5: "value 5" },
            { key6: "value 6" },
         ];
         const arr3 = [];
         arr1.forEach(function (object) {
            for (const key in object) {
               arr3.push(object[key]);
            }
         });
         arr2.forEach(function (object) {
            for (const key in object) {
               arr3.push(object[key]);
            }
         });
         document.getElementById("array").innerHTML = JSON.stringify(arr3);
      </script>
   </body>
</html>

结论

数组是 JavaScript 中的一种重要数据结构，可以存储任何数据类型（包括对象）的信息集合。创建具有多个嵌套键值对的多个对象的数组是一个简单的过程，为此，我们首先定义一个空数组并使用 push() 方法向其中添加对象，其中每个对象都使用 {} （花括号）定义)，包含使用逗号分隔的键值对。要访问和操作对象及其属性，我们可以使用 JavaScript 方法。

我们还可以通过在另一个对象中定义一个对象来向对象添加嵌套键值对。使用带有嵌套键值对的对象的方法可以在 JavaScript 中创建更强大、更灵活的数据结构。我们看到了不同的方法，包括点符号和括号符号的组合，或者使用 forEach() 方法和 for...in 循环来提取每个键值对的值，以访问嵌套对象数组中的数据键值对。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!