Heim > Artikel > Web-Frontend > Wie konvertiert man die Schlüssel einer Karte in JavaScript in ein Array?

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

PHPznach vorne: 2023-08-24 13:53:051924Durchsuche

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

Ergebnisarray -

[1, 2, 3, 4, 5]

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>

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>

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>

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!

JavaScript Array 运算符 for 循环 operator map 对象

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Erklären Sie die Verwendung der VirtualizedList-Komponente in ReactNative?Nächster Artikel：Erklären Sie die Verwendung der VirtualizedList-Komponente in ReactNative?

In Verbindung stehende Artikel

Mehr sehen