JavaScript >> Javascript-Tutorial >  >> Tags >> map

JavaScript-Zuordnungsarray | Array Map()-Methode

Eine Map ist eine Sammlung von Elementen in JavaScript, in der jedes Element als KV-Paar (Schlüssel, Wert) gespeichert wird. Es ist möglich, dass ein Javascript-Map-Objekt sowohl Objekte als auch primitive Werte entweder als Schlüssel oder als Wert enthält. Elemente in einem Map-Objekt werden in der Reihenfolge der Einfügung wiederholt.

Beim Iterieren über das Map-Objekt wird ein Schlüssel-Wert-Paar in derselben Reihenfolge zurückgegeben, in der es eingefügt wurde, d. h. es merkt sich die ursprüngliche Einfügereihenfolge. Die allgemeine Syntax zum Erstellen eines JavaScript-Map-Objekts lautet:

new Map([it])

Hier ist es ein iterierbares Objekt. Zugehörige Werte werden als Schlüssel-Wert-Paar gespeichert. Wenn es nicht angegeben ist, ist das neu erstellte JS Map-Objekt leer. Alle Nullwerte werden als nicht definiert behandelt.

Das Erlernen von JavaScript kann viel Zeit in Anspruch nehmen. Wenn Sie lernen möchten, wie Sie den Lernprozess beschleunigen können, erfahren Sie hier, wie Sie JavaScript schnell lernen können. Lassen Sie uns damit zu einem allgemeinen Codebeispiel für eine JavaScript-Karte übergehen.

JavaScript-Kartencodebeispiel

var map1 = new Map ([[1, 2], [3, 4], [5, 6], [7, 8]]); /*creates a Map object named map1 with integers as both keys and values*/
console.log(map1.size); /* returns the total number of key-value pairs or elements in a Map object*/
var map2 = new Map ([[“Akhil”, “Bhadwal”], [“Vijay”, “Singh”], [“Swapnil”, “Banga”], [“Saurabh”, “Hooda”]]); /*creates a new Map object named map2 with strings as both keys and values*/
console.log(map2.size);
var map3 = new Map ([[“Akhil”, 4], [“Vijay”, 3], [“Swapnil”, 2], [“Saurabh”, 1]]) /* creates a new Map object named map3 containing strings as keys and integers as values*/
console.log(map3.size);

Ausgabe:

4
4
4

JavaScript-Karteneigenschaften

Map.prototype

Es stellt den Prototyp für den Map-Konstruktor dar. Darüber hinaus ermöglicht Map.prototype das Hinzufügen von Eigenschaften zu Map-Objekten. Mit anderen Worten, um allen Map-Objekten Eigenschaften oder Methoden hinzuzufügen, kann man das Prototyp-Objekt des Konstruktors verwenden.

Alle Map-Instanzen erben von der Map.prototype-Eigenschaft. Map.prototype.constructor gibt die Funktion zurück, die den Prototyp einer Map-Instanz erstellt hat. Standardmäßig ist dies die Kartenfunktion.

Map.prototype.size

Gibt die Gesamtzahl der Elemente zurück, d. h. die Schlüsselwertpaare in einem JavaScript-Map-Objekt.

Allgemeine Syntax :

some_map.size

Map.prototype[@@toStringTag]

Hat einen Anfangswert von Map. Obwohl nicht aufzählbar und beschreibbar, ist diese Eigenschaft konfigurierbar.

Allgemeine Syntax :

Map[Symbol.toStringTag]

Karte abrufen[@@species]

Wird zum Erstellen abgeleiteter Objekte verwendet. Die Map[@@species] gibt den Standard-Map-Konstruktor zurück. Um die Konstruktorzuweisung zu ändern, können Unterklassenkonstruktoren die Eigenschaft überschreiben.

Allgemeine Syntax :

Map[Symbol.species]

JavaScript-Kartenmethoden

Map.prototype.set(k, v)

Fügt dem Map-Objekt ein Paar aus Schlüssel (k) und Wert (v) hinzu und gibt das Map-Objekt zurück.

Allgemeine Syntax :

some_map.set(k, v);

Beispiel :

var a_map = new Map();
a_map.set(“Akhil”, “Bhadwal”);
a_map.set(“Vijay”, “Singh”);
a_map.set(“Swapnil”, “Banga”);
console.log(a_map.size);

Ausgabe:

3

Map.prototype.has(k)

Gibt einen booleschen Wert zurück, der davon abhängt, ob ein zum Schlüssel gehörender Wert vorhanden ist oder nicht. Gibt wahr zurück, wenn der Wert vorhanden ist, und falsch, wenn nicht.

Allgemeine Syntax :

some_map.has(k);

Beispiel :

var a_map2 = new Map();
a_map2.set("Akhil", 1);
a_map2.set("Vijay", 2);
a_map2.set("Swapnil", 3);
a_map2.set("Saurabh", 4);
console.log(a_map2.has("Akhil"));
console.log(a_map2.has("Lee"));

Ausgabe:

true
false

Map.prototype.get(k)

Gibt den Wert zurück, der sich auf den Eingabeschlüssel bezieht. Falls dem Schlüssel kein Wert zugeordnet ist, wird undefiniert zurückgegeben.

Allgemeine Syntax :

some_map.get(k);
Example:
var a_map3 = new Map ();
a_map3.set("Twenty Two", 22);
a_map3.set("Twenty Four", 24);
a_map3.set("Forty Six", 46);
console.log(a_map3.get("Twenty Two"));
console.log(a_map3.get("Forty Six"));
console.log(a_map3.get("Seventy Two"));

Ausgabe:

22
46
undefined

Map.prototype.delete(k)

Löscht sowohl den Schlüssel als auch den zugehörigen Wert aus dem angegebenen Map-Objekt. Gibt „true“ zurück, wenn das Element vorhanden war und gelöscht wurde, oder „false“, wenn der Wert nicht gefunden werden konnte.

Allgemeine Syntax :

some_map.delete(k);

Beispiel :

var a_map4 = new Map ();
a_map4.set("Y", 25);
a_map4.set("O", 15);
a_map4.set("I", 9);
a_map4.set("B", 2);
console.log(a_map4.size);
console.log(a_map4.delete("O"));
console.log(a_map4.size);
console.log(a_map4.delete("I"));
console.log(a_map4.size);
console.log(a_map4.delete("W"));
console.log(a_map4.size);

Ausgabe:

4
true
3
true
2
false
2

Map.prototype.clear()

Entfernt alle Elemente, d. h. Schlüssel-Wert-Paare, aus dem angegebenen JavaScript-Map-Objekt. Es sind keine Parameter erforderlich.

Allgemeine Syntax :

some_map.clear();

Beispiel :

var a_map5 = new Map();
a_map5.set(“Twenty Two”, 22);
a_map5.set(“Twenty Four”, 24);
a_map5.set(“Forty Six”, 46);
console.log(a_map5.size);
a_map5.clear();
console.log(a_map5.size);

Ausgabe:

3
0

Map.prototype.entries()

Gibt ein neues Iteratorobjekt zurück, das ein Array von Schlüssel-Wert-Paaren für jedes Element enthält, das im angegebenen Map-Objekt in der Einfügereihenfolge vorhanden ist. Benötigt keinen Parameter.

Allgemeine Syntax :

some_map.entries();
Example:
var a_map6 = new Map();
a_map6.set(“Akhil”, “Bhadwal”);
a_map6.set(“Lee”, “Meta”);
var iterator = a_map6.entries();
console.log(iterator.next().value);
console.log(iterator.next().value);

Ausgabe:

Array [“Akhil”, “Bhadwal”]
Array [“Lee”, “Meta”]

Map.prototype.keys()

Gibt ein neues Iteratorobjekt zurück, das alle Schlüssel enthält, die im angegebenen JavaScript-Map-Objekt in der Einfügereihenfolge vorhanden sind. Es sind keine Parameter erforderlich.

Allgemeine Syntax :

some_map.keys();

Beispiel :

var a_map7 = new Map();
a_map7.set(“First Name”, “Akhil”);
a_map7.set(“Second Name”, “Bhadwal”);
a_map7.set(“Designation”, “Freelance Technical Content Writer”);
a_map7.keys();

Map.prototype.values()

Gibt ein neues Iterator-Objekt zurück, das alle Werte enthält, die sich auf das angegebene Map-Objekt in der Einfügereihenfolge beziehen. Es sind keine Parameter erforderlich.

Allgemeine Syntax :

some_map.values();

Beispiel :

var a_map8 = new Map();
a_map8.set(“First Name”, “Akhil”);
a_map8.set(“Second Name”, “Bhadwal”);
a_map8.set(“Designation”, “Freelance Technical Content Writer”);
a_map8.values();

Map.prototype.forEach(callbackFn[, thisArg])

Ruft callbackFn (die Callback-Funktion) jeweils einmal für alle im angegebenen Map-Objekt vorhandenen Schlüssel-Wert-Paare in der Einfügereihenfolge auf. Die Callback-Funktion hat drei Parameter:

  1. Der Elementschlüssel
  2. Der Elementwert
  3. Das Map-Objekt, das durchlaufen werden muss

Wenn auch ein thisArg-Parameter angegeben wird, wird derselbe als dieser Wert für jeden Callback verwendet.

Allgemeine Syntax :

some_map.forEach(callbackFn[, thisArg]);

Beispiel :

function logMapElements(value, key, map) {
 console.log(`m[$] = $`);
}
new Map([[“Akhil”, 3], [“Bhadwal”, {}], [“JavaScript Map”, undefined]])
 .forEach(logMapElements);
Output:
"m[Akhil] = 3"
"m[Bhadwal] = [object Object]"
"m[JavaScript Map] = undefined"

Map.prototype[@@iterator]()

Gibt ein neues Iterator-Objekt zurück, das ein Array von Schlüssel-Wert-Paaren für jedes Element enthält, das im angegebenen Map-Objekt in der Reihenfolge der Einfügung vorhanden ist.

Allgemeine Syntax :

some_map[Symbol.iterator];

Beispiel :

var a_map10 = new Map();
a_map10.set('Akhil', 'Bhadwal');
a_map10.set(22, 24);
var iterator = a_map10[Symbol.iterator]();
for (let item of iterator) {
console.log(item);

Ausgabe:

Array ["Akhil", "Bhadwal"]
Array [22, 24]

JavaScript-Karte vs. JavaScript-Objekte

Ein JavaScript-Objekt ähnelt weitgehend einer JavaScript-Karte. Beispielsweise erlauben beide JS-Entitäten:

  • Überprüfen, ob etwas auf einem Schlüssel gespeichert ist oder nicht
  • Schlüssel löschen
  • Werte mit Schlüsseln abrufen
  • Schlüssel auf Werte setzen

Trotz dieser bemerkenswerten Ähnlichkeit gibt es mehrere Szenarien, in denen die Verwendung einer JavaScript-Karte gegenüber einem JavaScript-Objekt vorteilhaft ist. Diese Situationen treten auf, wenn:

  • Direkte Iteration ist erforderlich. Ein JS-Map-Objekt ist iterierbar, im Gegensatz zum JS-Objekt, bei dem die Schlüssel abgerufen und dann durchlaufen werden müssen. Offensichtlich kann es eine sehr zeitaufwändige Aufgabe sein, wenn die Gesamtzahl der Schlüssel sehr groß ist
  • Häufiges Hinzufügen und/oder Entfernen von Schlüssel-Wert-Paaren ist erforderlich
  • Aufrechterhalten einer Reihenfolge für die Schlüssel
  • Es besteht die Notwendigkeit, Schlüssel zu speichern, die weder vom Typ String noch vom Typ Symbol sind. In einem JS-Map-Objekt kann der Schlüssel jede Art von Werten haben

Die Größe eines Map-Objekts kann leicht durch die Verwendung der Map.prototype.size-Eigenschaft ermittelt werden. Das Messen der Größe einer Objektinstanz muss jedoch manuell erfolgen.

Zusammenfassung

Das war also alles über die JavaScript-Map-Objekte. Wie Arrays können Map-Objekte geklont werden. Darüber hinaus können sie bei Bedarf auch mit Arrays zusammengeführt werden. Ich hoffe, dieser Artikel wird Ihnen helfen, Ihr Verständnis von JavaScript-Karten zu verbessern.

Sehen Sie sich diese besten JavaScript-Tutorials an, um Ihre JS-Kenntnisse weiter zu verbessern. Haben Sie Fragen zur JavaScript-Karte? Lass es uns über Kommentare wissen! Wir werden unser Bestes tun, um Ihnen zu helfen.

Die Leute lesen auch:

  • Beste Javascript-Kurse
  • JavaScript-Zertifizierung
  • Die besten Javascript-Bücher
  • JavaScript-Interviewfragen
  • Beste Javascript-Frameworks
  • Beste JavaScript-IDE
  • Javascript-Bibliothek
  • JavaScript-UI-Bibliothek
  • TypeScript im Vergleich zu JavaScript
  • Unterschied zwischen Java und JavaScript
  • Was ist eine JavaScript-Map-Array-Funktion?
  • Unterschied zwischen PHP und JavaScript