Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie konvertiert man die Schlüssel einer Karte in JavaScript in ein Array?

PHPz
Freigeben: 2023-08-24 13:53:05
nach vorne
1900 Leute haben es durchsucht

Wie konvertiert man die Schlüssel einer Karte in JavaScript in ein Array?

Es gibt verschiedene Möglichkeiten, Kartenschlüssel in JavaScript in Arrays umzuwandeln. Sie können die Map-Keys()-Methode verwenden, um auf die Schlüssel in der Map zuzugreifen, und dann die Arrayform()-Methode anwenden, um ein Array der Schlüssel zu erstellen, auf die zugegriffen wird. Sie können anstelle der Array form()-Methode auch den Spread-Operator anwenden, um ein Array von Schlüsseln zu erstellen.

Bei einer Javascript-Karte besteht die Aufgabe darin, die Schlüssel der Karte in ein Array umzuwandeln. Hier ist das Beispiel unten

Gegebene Karte -

{ 1: "India", 2: "Russia", 3: "USA", 4: "Japan", 5: "UK" }; 
Nach dem Login kopieren

Ergebnisarray -

[1, 2, 3, 4, 5]
Nach dem Login kopieren

Es gibt viele Möglichkeiten, dies zu erreichen. Einige von ihnen sind -

  • Verwenden Sie die Methoden Array.form und Map.keys()

  • Verwenden Sie den Spread-Operator und die Map.keys()-Methode

  • Verwenden Sie die for..of-Schleife

Verwenden Sie die Methoden Array.form() und Map.keys()

Die Methode

Array.from() gibt ein Array von jedem iterierbaren Objekt zurück. Die Map.keys-Methode wird verwendet, um alle Schlüssel der Map in iterierbarer Form zurückzugeben. Um Kartenschlüssel in ein Array umzuwandeln, führen wir die folgenden Schritte aus.

  • Verwenden Sie die Methode Map.keys(), um alle Kartenschlüssel abzurufen. Es gibt ein MapIterator-Objekt zurück, das die Map-Schlüssel enthält

  • Verwenden Sie Array.from(), um Kartenschlüssel aus MapIterator zu extrahieren. Es gibt ein Array zurück, das alle Map-Schlüssel enthält.

Beispiel

In diesem Beispiel haben wir eine Karte, deren Schlüssel Zahlen und Werte Ländernamen sind. Wir verwenden die Methode Array.from, um alle Schlüssel (Zahlen) aus Map zu extrahieren.

<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>
Nach dem Login kopieren

Verwenden Sie den Spread-Operator und die Map.keys()-Methode

Der JavaScript-Spread-Operator ermöglicht es uns, ein Array in einzelne Array-Elemente zu erweitern. Die Map.keys-Methode wird verwendet, um alle Schlüssel der Map in iterierbarer Form zurückzugeben. Um Kartenschlüssel in ein Array umzuwandeln, führen wir die folgenden Schritte aus.

  • Verwenden Sie die Methode Map.keys(), um alle Kartenschlüssel abzurufen. Es gibt ein MapIterator-Objekt zurück, das die Map-Schlüssel enthält

  • Extrahieren Sie Kartenschlüssel aus MapIterator mit dem Spread-Operator. Es gibt ein Array zurück, das alle Map-Schlüssel enthält.

Beispiel

In diesem Beispiel haben wir eine Karte, deren Schlüssel Zahlen und Werte Ländernamen sind. Wir verwenden den Spread-Operator, um alle Schlüssel (Zahlen) aus der Karte zu extrahieren.

<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> 
Nach dem Login kopieren

Verwenden Sie die for...of-Schleife

Die

for…of-Anweisung durchläuft die Werte eines iterierbaren Objekts. Die Map.keys-Methode wird verwendet, um alle Schlüssel einer Map in iterierbarer Form zurückzugeben. Um Kartenschlüssel in ein Array umzuwandeln, führen wir die folgenden Schritte aus

  • Erstellen Sie ein leeres Array, um den Schlüssel zu speichern.

  • Verwenden Sie eine for..of-Schleife, um alle von der Map.keys()-Methode erhaltenen Map-Schlüssel zu durchlaufen.

  • Schieben Sie den Schlüssel bei jeder Iteration in das leere Array.

Beispiel

<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> 
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie konvertiert man die Schlüssel einer Karte in JavaScript in ein Array?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!