Maison >interface Web >js tutoriel >Comment convertir un tableau d'objets en tableau à l'aide de JavaScript ?

Comment convertir un tableau d'objets en tableau à l'aide de JavaScript ?

WBOYavant: 2023-09-22 11:29:021543parcourir

如何使用 JavaScript 将 Object 数组转换为数组？

Nous pouvons convertir un tableau d'objets en un tableau JavaScript en utilisant la méthode Object.values(), la méthode Array puch() et la boucle for...of. Tout d’abord, nous parcourons chaque objet en utilisant for...of, puis appliquons la méthode Object.values() pour accéder aux valeurs d’un seul objet. Utilisez ensuite la méthode Array Push() pour ajouter la valeur au tableau. Dans cet article, nous aborderons cette méthode en détail.

Regardons un exemple pour comprendre le problème.

Vous avez reçu un tableau d'objets et la tâche consiste à convertir le tableau d'objets en un tableau de valeurs d'objet. Voici un exemple de ce que nous souhaitons réaliser.

Tableau d'objets donné -

let carObj = [
   { name: "John", car: "Ford" },
   { name: "Mark", car: "BMW" },
   { name: "Ben", car: "Toyota" }
]

doit être converti en -

let carObj = ["John", "Ford", "Mark", "BMW", "Ben", "Toyota" ]

Il existe de nombreuses façons d’y parvenir. Certains d'entre eux sont -

Utiliser pour...de la boucle
Utilisez la méthode array.map

Utiliser pour...de boucle

La boucle for...of est utilisée pour parcourir les valeurs d'un tableau ou de tout objet itérable. Pour convertir un tableau d'objets en tableau à l'aide d'une boucle for...of, nous utilisons les étapes suivantes.

Étapes

Créez un espace vide pour stocker la valeur du résultat.
Utilisez for...of pour parcourir le tableau d'objets
Nous savons que les éléments d'un tableau sont les objets dont nous voulons les valeurs.
Poussez la valeur de l'objet actuel dans un tableau vide via les méthodes array.push et Object.values().

Exemple

Dans cet exemple, nous avons un tableau d'objets. Ces objets contiennent des noms et des modes de voiture. Nous extrayons ces valeurs et les attribuons dans un seul tableau à l'aide d'une boucle for..of.

<html>
<head>
   <title>How to convert Object’s array to an array using JavaScript?</title>
</head>
<body>
   <h3 id="demo">Converting Object’s array to an array using for...of loop</h3>
   <script>
      
      // The car object
      let carObj = [
         { name: "John", car: "Ford" },
         { name: "Mark", car: "BMW" },
         { name: "Ben", car: "Toyota" }
      ]
      
      // Initialize an empty array
      let arr = [];
      
      // Loop through the car object
      for (i of carObj) {
         
         // Push the values of every object into arr
         arr.push(...Object.values(i))
      }
      
      // Print the arr
      document.write("Final Array: " + arr) 
   </script>
</body>
</html>

Utilisez la méthode Array.map()

La méthode Array.map() appelle une fonction sur chaque élément du tableau et renvoie un nouveau tableau. Pour convertir un tableau d'objets en tableau à l'aide de la méthode Array.map(), nous utilisons les étapes suivantes.

Appliquez la méthode map à un tableau d'objets.
Renvoyer la valeur de la clé que vous souhaitez extraire après chaque itération.
Vous obtiendrez un tableau de toutes les valeurs pour une clé spécifique.

Exemple

Dans cet exemple, nous avons un tableau d'objets. Ces objets contiennent des noms et des modes de voiture. Nous extrayons toutes les voitures dans un tableau séparé et tous les noms dans un tableau séparé.

<html>
<head>
   <title>Example- How to convert Object's array to an array using JavaScript</title>
</head>
<body>
   <h3 id="demo">Converting Object's array to an array using Array.map() method</h3>
   <script>
      
      // The car object
      let carObj = [
         { name: "John", car: "Ford" }, 
         { name: "Mark", car: "BMW" },
         { name: "Ben", car: "Toyota" }
      ]
      let nameArr = carObj.map((item) => item.name)
      let carArr = carObj.map((item) => item.car)
      
      // Print the Arrays
      document.write("Names Array : " + nameArr + "<br>")
      document.write("Cars Array : " + carArr)
   </script>
</body>
</html>

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 Array Object for 循环 map 对象

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Qu'est-ce que le stockage de sessionsArticle suivant：Qu'est-ce que le stockage de sessions

Articles Liés

Voir plus