Comment créer un tableau contenant des objets partiels d'un autre tableau en JavaScript ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-08-29 10:01:02

avant

770 Les gens l'ont consulté

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 };
});

Copier après la connexion

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}));

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!