Maison >interface Web >js tutoriel >Comment convertir les clés d'une Map en tableau en JavaScript ?

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

PHPzavant: 2023-08-24 13:53:051939parcourir

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

tableau de résultats -

[1, 2, 3, 4, 5]

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>

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>

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>

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 运算符 for 循环 operator map 对象

Déclaration：

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

Article précédent：Expliquez l'utilisation du composant VirtualizedList dans ReactNative ?Article suivant：Expliquez l'utilisation du composant VirtualizedList dans ReactNative ?

Articles Liés

Voir plus