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 ?
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Vercel Spa Routing et chargement des ressources: résoudre les problèmes d'accès aux URL profonds
Aug 13, 2025 am 10:18 AM
Cet article vise à résoudre le problème du rafraîchissement de l'URL profond ou de l'accès direct, provoquant une défaillance de chargement des ressources de la page lors du déploiement d'applications (spas) de page unique sur Vercel. Le noyau est de comprendre la différence entre le mécanisme de réécriture de routage de Vercel et les chemins relatifs d'analyse du navigateur. En configurant Vercel.json pour rediriger tous les chemins vers index.html et corriger la méthode de référence des ressources statiques dans HTML, modifiez le chemin relatif en chemin absolu, en vous assurant que l'application peut charger correctement toutes les ressources sous n'importe quelle URL.
Guide de déploiement de l'application unique de page (SPA): résolution de problèmes de chargement d'URL profonds
Aug 13, 2025 pm 01:03 PM
Ce tutoriel vise à résoudre le problème du chargement des actifs (CSS, JS, images, etc.) lors de l'accès aux URL à plusieurs niveaux (tels que / projets / home) lors du déploiement d'applications (spas) (spas) sur Vercel. Le noyau réside dans la compréhension de la différence entre le mécanisme de réécriture de routage de Vercel et les chemins relatifs / absolus dans HTML. En configurant correctement Vercel.json, assurez-vous que toutes les demandes de non-fichier sont redirigées vers index.html et corriger les références d'actifs dans HTML en tant que chemins absolus, réalisant ainsi le fonctionnement stable du SPA à n'importe quelle URL de profondeur.
Qwik: un cadre de redoppe pour les applications Web à chargement instantané
Aug 15, 2025 am 08:25 AM
QwikachievesInstantLoadingByDefaultthroughroughtumability, Nothydratation: 1) TheServerrendershtmlwithSerializedStateAndpre-MaptEventListeners; 2) norehydratonsneeded, activant la réinteraction; 3) Javascripto
JS Ajouter un élément au début du tableau
Aug 14, 2025 am 11:51 AM
Dans JavaScript, la méthode la plus courante pour ajouter des éléments au début d'un tableau est d'utiliser la méthode Unsich (); 1. En utilisant unsith () modifiera directement le tableau d'origine, vous pouvez ajouter un ou plusieurs éléments pour retourner la nouvelle longueur du tableau ajouté; 2. Si vous ne souhaitez pas modifier le tableau d'origine, il est recommandé d'utiliser l'opérateur d'extension (tel que [Newelement, ... Arr]) pour créer un nouveau tableau; 3. Vous pouvez également utiliser la méthode CONCAT () pour combiner le nouveau tableau d'éléments avec le numéro d'origine, renvoyez le nouveau tableau sans modifier le tableau d'origine; En résumé, utilisez Unsich () lors de la modification du tableau d'origine et recommandez l'opérateur d'extension lorsque vous gardez le tableau d'origine inchangé.
Comment charger des images avec javascript
Aug 14, 2025 pm 06:43 PM
Usetheloading = "lazy" attributFornativelazyloadingInModerNBrowsSerswithoutjavascript.2.FormoreControlorolderbrowsSeport, implémentlazyloadingwiththeintesectionobserverapibysettingdata-srcfortheatimagerlandusaplaceholderinsrc.33.obse
Analyse approfondie des vulnérabilités communes et des stratégies d'amélioration pour les fonctions de défense JavaScript XSS
Aug 14, 2025 pm 10:06 PM
Cet article explore les vulnérabilités de sécurité approfondies dans les fonctions de défense JavaScript XSS JavaScript personnalisées, en particulier l'évasion de caractères incomplète et le contournement facile du filtrage basé sur les mots clés. En analysant un exemple de fonction, il révèle les risques de caractères de mots clés non transformés tels que des citations et des backquotes, et comment les techniques d'obscurcissement du code contournent la détection de mots clés simples. L'article souligne l'importance de l'évasion contextuelle et recommande l'adoption de bibliothèques matures et de stratégies de défense multicouches pour établir une protection de sécurité plus robuste.
Comment accéder et modifier les éléments HTML à l'aide du DOM dans JavaScript
Aug 16, 2025 am 11:25 AM
Toaccessandmodifyhtmlelementsusingjavascript, firstSelectTheementUsingMethodslikeDocument.getElementByid, document.queryselect
Optimiser la gestion des événements des sauts de liaison externe dynamique dans la fenêtre contextuelle jQuery
Sep 01, 2025 am 11:48 AM
Cet article vise à résoudre le problème de la redirection du bouton de redirection de liaison externe dans la fenêtre pop-up jQuery provoquant des erreurs de saut. Lorsqu'un utilisateur clique sur plusieurs liens externes successivement, le bouton Jump dans la fenêtre contextuelle peut toujours pointer vers le premier lien cliqué. La solution principale consiste à utiliser la méthode OFF ('Click') pour annuler l'ancien gestionnaire d'événements avant chaque liaison d'un nouvel événement, garantissant que le comportement de saut pointe toujours vers l'URL cible, réalisant ainsi une redirection de liens précise et contrôlable.
