recherche

Maison >interface Web >js tutoriel >Comment créer un tableau contenant des objets partiels d'un autre tableau en JavaScript ?

Comment créer un tableau contenant des objets partiels d'un autre tableau en JavaScript ?

WBOY
WBOYavant
2023-08-29 10:01:02868parcourir

Comment créer un tableau contenant des objets partiels dun autre tableau en JavaScript ?

Les tableaux sont l'un des types de données les plus couramment utilisés en JavaScript. Ils sont utilisés pour stocker des ensembles de données et permettre un accès et une manipulation efficaces des données. Les tableaux peuvent contenir tout type de données, y compris des valeurs primitives, des objets et même d'autres tableaux.

La technique de création de tableaux d'objets partiels à partir de tableaux est une technique précieuse lorsque l'on travaille avec des ensembles de données complexes. Un objet partiel ne contient qu'un sous-ensemble des données du tableau d'origine, ce qui nous permet de nous concentrer sur un ensemble spécifique de données. Ceci est particulièrement utile lorsque vous travaillez avec de grands ensembles de données, car cela facilite le traitement uniquement des données nécessaires.

Vous pouvez créer un tableau d'objets partiels à partir d'un autre tableau en JavaScript en utilisant la méthode map(). La méthode map() vous permet de parcourir un tableau et de créer un nouveau tableau, dont le résultat appelle la fonction fournie sur chaque élément du tableau d'origine.

Grammaire

La syntaxe pour créer un tableau d'objets partiels à partir d'un autre tableau en JavaScript est la suivante -

let originalArray = [
   { property1: value1, property2: value2, ... },
   { property1: value1, property2: value2, ... },
   ...
];

let partialObjects = originalArray.map(item => {
   return { partialProperty1: item.property1, partialProperty2: item.property2 };
});

Dans cette syntaxe, originalArray est le nom du tableau d'origine contenant l'objet à partir duquel l'objet partiel doit être créé. Appelez la méthode map sur ce tableau, en passant une fonction en argument. Cette fonction est appelée sur chaque élément du tableau d'origine et est utilisée pour créer un nouveau tableau d'objets partiels.

La fonction passée à la méthode map prend un argument, qui est un seul élément du tableau d'origine. C'est ce qu'on appelle souvent un projet. Dans cette fonction, vous pouvez renvoyer un objet contenant uniquement les propriétés que vous souhaitez extraire de l'objet d'origine.

Vous pouvez également utiliser l'affectation de déstructuration pour obtenir le même résultat. 

let partialObjects = originalArray.map(({property1, property2}) => 
({partialProperty1: property1, partialProperty2: property2}));

Veuillez noter que la méthode map ne modifie pas le tableau d'origine, mais crée un nouveau tableau contenant des objets partiels.

Méthode pour créer un tableau d'objets partiel

Utilisez la méthode map()

En JavaScript, la fonction map() est une méthode qui peut être appelée sur un tableau pour créer un nouveau tableau, avec pour résultat que la fonction fournie est appelée sur chaque élément du tableau d'origine. Le nouveau tableau aura le même nombre d'éléments que le tableau d'origine, mais chaque élément sera transformé selon la fonction fournie par la méthode map().

Exemple

Voici un exemple de la façon de créer un tableau d'objets partiels à partir d'un autre tableau en utilisant la méthode map() -

<html>
<body>
   <p id="result1"></p>
   <p id="result2"></p>
   <script>
      let arrayItems = [
         { id: 1, name: "ABC", model: 2019 },
         { id: 2, name: "PQR", model: 2022 },
         { id: 3, name: "XYZ", model: 2021 },
      ];   

      document.getElementById("result1").innerHTML = "Original Array: <br>" +
      JSON.stringify(arrayItems);
            
      let partialArrayItems = arrayItems.map((item) => {
         return { name: item.name, model: item.model };
      });

      document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
          
   </script>
</body>
</html>

Dans l'exemple ci-dessus, nous avons un tableau primitif contenant des objets avec les propriétés id, name et age. Nous utilisons la méthode map pour parcourir le tableau et créer un nouveau tableau partialObjects qui contient uniquement les propriétés id et name de chaque objet du tableau d'origine.

Utiliser la déstructuration

Dans cette méthode, nous utilisons l'affectation de déstructuration et l'opérateur de reste pour extraire les propriétés. L'affectation de déstructuration extraira les propriétés model et id de chaque objet du tableau arrayItems, tandis que l'opérateur rest extraira toutes les propriétés restantes dans un nouvel objet nommé rest.

Exemple

<html>
<head>
   <title>Creating an array of partial objects from another array using destructuring </title>
</head>
<body>
   <p id="result1"></p>
   <p id="result2"></p>
   <script>
      let arrayItems = [
         { id: 1, name: "ABC", model: 2019, category: "car" },
         { id: 2, name: "PQR", model: 2022, category: "bike" },
         { id: 3, name: "XYZ", model: 2021, category: "truck" },
      ];
      document.getElementById("result1").innerHTML = "Original Array: <br>" +
      JSON.stringify(arrayItems);
            
      let partialArrayItems = arrayItems.map(({ model, id, ...rest }) => rest);

      document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
   </script>
</body>
</html>

Utilisez la méthode réduire()

La méthode

reduce() est une autre méthode qui vous permet de parcourir un tableau et d'utiliser les résultats pour créer une valeur ou un objet unique. Ceci est utile si vous devez créer un seul objet avec des propriétés partielles à partir de plusieurs objets.

Exemple

<html>
<head>
   <title>Creating an array of partial objects from another array using reduce() method</title>
</head>
<body>
   <p id="result1"></p>
   <p id="result2"></p>
   <script>
      let arrayItems = [
         { id: 1, name: "ABC", model: 2019, category: "car" },
         { id: 2, name: "PQR", model: 2022, category: "bike" },
         { id: 3, name: "XYZ", model: 2021, category: "truck" },
      ];

      document.getElementById("result1").innerHTML = "Original Array: <br>" +
      JSON.stringify(arrayItems);
            
      const partialArrayItems = arrayItems.reduce((res, item) => {
         res.push({ id: item.id, model: item.model });
         return res;
      }, []);

      document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
   </script>
</body>
</html>

Conclusion

En résumé, la méthode map() est un outil puissant pour créer de nouveaux tableaux à partir de tableaux existants en JavaScript. Il vous permet de parcourir un tableau, d'effectuer certaines opérations sur chaque élément et de créer un nouveau tableau avec le résultat. C'est utile lorsqu'il s'agit de tableaux d'objets et il vous suffit d'extraire certaines propriétés de chaque objet.

Il est à noter que la méthode map() ne modifie pas le tableau d'origine, mais crée un nouveau tableau. Donc, si vous souhaitez modifier le tableau d'origine, utilisez la méthode forEach().

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!

JavaScript 数据类型 运算符 foreach map 对象
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment convertir des caractères en codes ASCII en utilisant JavaScript ?Article suivant：Comment convertir des caractères en codes ASCII en utilisant JavaScript ?

Articles Liés

Voir plus