Maison > interface Web > js tutoriel > le corps du texte

Comment convertir les clés d'une Map en tableau en JavaScript ?

PHPz
Libérer: 2023-08-24 13:53:05
avant
1903 Les gens l'ont consulté

Comment convertir les clés dune Map en tableau en JavaScript ?

Il existe différentes manières de convertir des clés de carte en tableaux en JavaScript. Vous pouvez utiliser la méthode map key() pour accéder aux clés de la carte, puis appliquer la méthode Arrayform() pour créer un tableau des clés consultées. Vous pouvez également appliquer l'opérateur spread au lieu de la méthode Array form() pour créer un tableau de clés.

À partir d'une Map javascript, la tâche consiste à convertir les clés de la Map en un tableau. Voici l'exemple donné ci-dessous

Carte donnée -

{ 1: "India", 2: "Russia", 3: "USA", 4: "Japan", 5: "UK" }; 
Copier après la connexion

tableau de résultats -

[1, 2, 3, 4, 5]
Copier après la connexion

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

  • Utilisez les méthodes Array.form et Map.keys()

  • Utilisez l'opérateur Spread et la méthode Map.keys()

  • Utiliser pour..de la boucle

Utilisez les méthodes Array.form() et Map.keys()

La méthode Array.from() renvoie un tableau à partir de n'importe quel objet itérable. La méthode Map.keys est utilisée pour renvoyer toutes les clés de la Map sous une forme itérable. Pour convertir les clés de carte en tableau, nous suivons les étapes suivantes.

  • Utilisez la méthode Map.keys() pour obtenir toutes les clés de la carte. Il renvoie un objet MapIterator contenant les clés Map

  • Utilisez Array.from() pour extraire les clés de carte de MapIterator. Il renvoie un tableau contenant toutes les clés Map.

Exemple

Dans cet exemple, nous avons une carte dont les clés sont des chiffres et les valeurs sont des noms de pays. Nous utilisons la méthode Array.from pour extraire toutes les clés (numéros) de Map.

<html>
<head>
   <title>Example- convert Map keys to an array in JavaScript</title>
</head>
<body>
   <h2>Convert Map keys to an array using Array.from method</h2>
   <p>Click the following button to get the Keys from the map</p>
   <button id="btn" onclick="convert( )" > Click Here </button> <br>
   <p id="result"> </p>
   <script>
      function convert( ){
         let result = document.getElementById("result")
         let mp = new Map( );
         mp.set(1, "India");
         mp.set(2, "Russia");
         mp.set(3, "USA");
         mp.set(4, "Japan");
         mp.set(5, "UK");
         let keys;
         keys = Array.from( mp.keys( ) );
         result.innerText = "Converted Array : [ " + keys + " ]";
      }
   </script>
</body>
</html>
Copier après la connexion

Utilisez l'opérateur Spread et la méthode Map.keys()

L'opérateur de propagation JavaScript nous permet d'étendre un tableau en éléments de tableau individuels. La méthode Map.keys est utilisée pour renvoyer toutes les clés de la Map sous une forme itérable. Pour convertir les clés de carte en tableau, nous suivons les étapes suivantes.

  • Utilisez la méthode Map.keys() pour obtenir toutes les clés de la carte. Il renvoie un objet MapIterator contenant les clés Map

  • Extraire les clés de carte de MapIterator à l'aide de l'opérateur Spread. Il renvoie un tableau contenant toutes les clés Map.

Exemple

Dans cet exemple, nous avons une carte dont les clés sont des chiffres et les valeurs sont des noms de pays. Nous utilisons Spread Operator pour extraire toutes les clés (numéros) de Map.

<html>
<head>
   <title>Example- convert Map keys to an array in JavaScript</title>
</head>
<body>
   <h2>Convert Map keys to an array using Spread Operator</h2>
   <p>Click the following button to get the Keys from the map</p>
   <button id="btn" onclick="convert( )" > Click Here </button><br>
   <p id="result"> </p>
   <script>
      function convert(){
         let result = document.getElementById("result") 
         let mp = new Map();
         mp.set(1, "India");
         mp.set(2, "Russia");
         mp.set(3, "USA");
         mp.set(4, "Japan");
         mp.set(5, "UK");
         let keys;
         keys = [ ...mp.keys() ];
         result.innerText = "Converted Array : [ " + keys + " ]";
      }
   </script>
</body>
</html> 
Copier après la connexion

Utiliser pour...de boucle

L'instruction

for…of parcourt les valeurs d'un objet itérable. La méthode Map.keys est utilisée pour renvoyer toutes les clés d'une Map sous une forme itérable. Pour convertir les clés de carte en tableau, nous suivons les étapes suivantes

  • Créez un tableau vide pour stocker la clé.

  • Utilisez une boucle for..of pour parcourir toutes les clés Map obtenues à partir de la méthode Map.keys().

  • Poussez la clé dans le tableau vide à chaque itération.

Exemple

<html>
<head>
   <title>Example -convert Map keys to an array in JavaScript</title>
</head>
<body>
   <h2>Convert Map keys to an array using for...of loop</h2>
   <p>Click the following button to get the Keys from  the map</p>
   <button id="btn" onclick="convert( )" > Click Here </button> <br>
   <p id="result"> </p>
   <script>
      function convert(){
         let result = document.getElementById("result")
         let mp = new Map();
         mp.set(1, "India");
         mp.set(2, "Russia");
         mp.set(3, "USA");
         mp.set(4, "Japan");
         mp.set(5, "UK");
         let keys = [];
         for(let key of mp.keys()){
            keys.push(key)
         }
         result.innerText = "Converted Array : [ " + keys + " ]";
      }
   </script>
</body>
</html> 
Copier après la connexion

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!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!