Maison > Article > interface Web > 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:021416parcourir
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!