Warum brauchen wir Map, wenn wir in JavaScript bereits Object haben?

Warum brauchen wir Map, wenn wir in JavaScript bereits Object haben?

1. Behandeln Sie Objekte nicht als Karten

1. Auf undefinierte Eigenschaften kann über die Prototypenkette zugegriffen werden

Nehmen wir das aktuelle Szenario an und entwickeln eine Website, müssen wir drei Sprachen bereitstellen: Japanisch, Chinesisch und Koreanisch. Wir können ein Wörterbuch definieren, um sie zu verwalten.

const Wörterbuch = {
    'ja': {
        'Ninjas zu mieten': 'Ninjas zu mieten',
    },
    'zh': {
        'Ninjas zu mieten': 'Ninjas zu mieten',
    },
    'ko': {
        „Ninjas zu vermieten“: „고용닌자“,
    }
}

console.log(dictionary.ja['Ninjas zu vermieten']) // Ninjas zu vermietenconsole.log(dictionary.zh['Ninjas zu vermieten']) // Ninjas zu vermietenconsole.log(dictionary.ko['Ninjas zu vermieten']) // Ninjas zu vermietenconsole.log(dictionary.ko['Ninjas zu vermieten']) // Ninjas zu vermieten

Auf diese Weise verwalten wir Wörterbücher in verschiedenen Sprachen. Beim Versuch, auf constroctor zuzugreifen, treten jedoch Probleme auf.

console.log(dictionary.ko['constructor']) // ƒ Objekt() { [nativer Code] }

Bei nicht vorhandenen Eigenschaften erwarten wir, dass wir undefined erhalten, aber wir greifen über die Prototypenkette auf undefinierte Eigenschaften zu. constructor Eigenschaft des Prototypenobjekts zeigt auf den Konstruktor.

Eine Lösung besteht darin, den Prototyp auf null zu setzen.

Objekt.setPrototypeOf(dictionary.ko, null)
console.log(dictionary.ko['Konstruktor']) // undefiniert

2. Der Schlüssel des Objekts kann nur eine Zeichenfolge sein

Angenommen, Sie müssen key des Objekts html Knoten zuordnen. Wir schreiben folgenden Code:

/* HTML-Teil <div id="firstElement"></div>
<div id="zweitesElement"></div>
*/

const erstesElement = document.getElementById('erstesElement')
const zweitesElement = document.getElementById('zweitesElement')

const map = {}

map[erstesElement] = {
    Daten: "erstesElement"
}
map[zweitesElement] = {
    Daten: "zweites Element"
}

console.log(map[erstesElement].data) // zweitesElement
console.log(map[zweitesElement].data) // zweitesElement

Die Daten des ersten Elements werden überschrieben, da der Schlüssel im Objekt nur vom Typ String sein kann. Wenn wir den Typ String nicht verwenden, ruft es implizit toString () zur Konvertierung auf. Daher werden beide HTML-Elemente in den String [object HTMLDivElement] umgewandelt.

Objektschlüssel können auch Symbol sein, aber Symbol werden während for..in Durchquerung, Object.keys() und der Serialisierung mit JSON.stringify() ignoriert.

2. Verwenden der Karte

1. Allgemeine Kartenoperationen

Map können jeden JavaScript Datentyp als Schlüssel verwenden

Funktion Personen(Name) {
    dieser.name = Name
}
const zhangsan = neue Leute('zhangsan')
const xiaoming = neue Leute('xiaoming')
const lihua = neue Leute('lihua')
// Eine Karte erstellen
const map = neue Map()
// Erstelle eine Map und initialisiere sie, um das zweidimensionale Schlüssel-Wert-Array in ein Map-Objekt umzuwandeln const map1 = new Map([
    ['Schlüssel1', 'Wert1'],
    ['Schlüssel2', 'Wert2'],
])
// Map in ein zweidimensionales Array umwandeln console.log(Array.from(map1)) // [ [ 'key1', 'val1' ], [ 'key2', 'val2' ] ]
// Legen Sie die Schlüssel-Wert-Zuordnungsbeziehung fest map.set(zhangsan, { region: 'HB' })
map.set(xiaoming, { region: 'HN' })
// Den entsprechenden Wert gemäß dem Schlüssel abrufen console.log(map.get(zhangsan)) // { region: 'HB' }
console.log(map.get(xiaoming)) // { Region: 'HN' }
// Holen Sie sich den nicht vorhandenen Schlüssel und erhalten Sie undefined
console.log(map.get(lihua)) // undefiniert
// Verwenden Sie die Funktion „has“, um zu bestimmen, ob der angegebene Schlüssel vorhanden ist. console.log(map.has(lihua)) // false
console.log(map.has(xiaoming)) // wahr
//Map speichert die Anzahl der Zuordnungenconsole.log(map.size) // 2
// Löschen Löschtaste
Karte.Löschen(xiaoming)
console.log(map.has(xiaoming)) // falsch
console.log(Kartengröße) // 1
// clear löscht die Karte
Karte.löschen()
console.log(Kartengröße) // 0

2. Durchqueren der Karte

Map kann sicherstellen, dass die Durchlaufreihenfolge mit der Einfügereihenfolge übereinstimmt

const zhangsan = { name: 'zhangsan' }
const xiaoming = { name: 'xiaoming' }
const map = neue Map()
map.set(zhangsan, { region: 'HB' })
map.set(xiaoming, { region: 'HN' })
// Jedes Schlüssel-Wert-Paar gibt ein Array von [Schlüssel, Wert] zurück for (let item of map) { // = for (let item of map.entries()) {
    console.log(Element)
    // [ { Name: 'zhangsan' }, { Region: 'HB' } ]
    // [ { Name: 'xiaoming' }, { Region: 'HN' } ]
}
// Durchlaufe den Schlüssel
für (let Schlüssel von map.keys()) {
    console.log(Schlüssel)
    // { Name: "zhangsan" }
    // { Name: "Xiaoming" }
}
// Wert durchlaufen
für (let Schlüssel von map.values()) {
    console.log(Schlüssel)
    // { region: 'HB' }
    // { Region: 'HN' }
}
//Iteriere über die Map mit der Methode forEach()
map.forEach(Funktion(Wert, Schlüssel) {
    console.log(Schlüssel, Wert)
    // { Name: 'zhangsan' } { Region: 'HB' }
    // { Name: 'xiaoming' } { Region: 'HN' }
})

3. Schlüsselgleichheit in Map ermitteln

Map verwendet intern die Vergleichsoperation SameValueZero .

Über SameValue und SameValueZero

SameValue ( Object.is() ) behandelt NaN und +0, -0 anders als strikte Gleichheit (===)

Objekt.ist(NaN, NaN) // wahr
Objekt.ist(0, -0) // falsch

Der Hauptunterschied zwischen SameValueZero und SameValue besteht darin, ob 0 gleich -0 ist.

Karte.set(NaN, 0)
Karte.Satz(0, 0)
console.log(map.has(NaN)) // wahr
console.log(map.has(-0)) // wahr

4. Karte kopieren oder zusammenführen

Karten können wie Arrays kopiert werden

lass original = neue Karte([
    [1, {}]
])
let clone = neue Map(Original) // Map klonen

konsole.log(clone.get(1)); // {}
console.log(Original === Klon) // falsch
konsole.log(original.get(1) === clone.get(1)) // wahr

Mehrere Karten zusammenführen

lass zuerst = neue Karte([
    [1, 'eins'],
    [2, 'zwei'],
    [3, 'drei'],
]);
lass zweite = neue Karte([
    [1, 'uno'],
    [2, 'macht']
]);
// Wenn beim Zusammenführen zweier Map-Objekte doppelte Schlüsselwerte vorhanden sind, wird ersterer durch letzteren überschrieben.
// Der Spread-Operator konvertiert im Wesentlichen ein Map-Objekt in ein Array.
let merged = neue Map([...erste, ...zweite]);

console.log(merged.get(1)); // uno
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // drei

5. Kartenserialisierung

Map kann nicht serialisiert werden. Wenn Sie versuchen, das JSON von Map mit JSON.stringify abzurufen, erhalten Sie nur "{}".

Da der Schlüssel einer Map jeden beliebigen Datentyp haben kann und JSON nur Zeichenfolgen als Schlüssel zulässt, ist es im Allgemeinen nicht möglich, eine Map in JSON zu konvertieren.

Sie können jedoch versuchen, eine Map folgendermaßen zu serialisieren:

// Map(1) initialisieren {"key1" => "val1"}
const originMap = neue Map([['Schlüssel1', 'Wert1']])
//Serialisieren Sie "[[\"key1\",\"val1\"]]"
const mapStr = JSON.stringify(Array.from(originMap.entries())) 
// Deserialisieren Sie Map(1) {"key1" => "val1"}
const cloneMap = neue Map(JSON.parse(mapStr))

3. Leistungsunterschiede zwischen Karte und Objekt

Speichernutzung

Die Situation ist von Browser zu Browser unterschiedlich, aber bei einer festgelegten Speichermenge kann Map etwa 50 % mehr Schlüssel-/Wertpaare speichern als Object .

Leistung einfügen

Map ist etwas schneller und wird empfohlen, wenn viele Map erforderlich sind.

Suchgeschwindigkeit

Der Leistungsunterschied ist minimal, aber Object kann manchmal schneller sein, wenn es nur eine kleine Anzahl von Schlüssel-/Wertpaaren enthält. Der Browser führt eine Optimierung durch, wenn Object als Array verwendet wird. Wenn eine große Anzahl von Suchvorgängen erforderlich ist, ist „Object“ die bessere Wahl.

Löschleistung

Wenn der Code viele Löschvorgänge erfordert, empfiehlt es sich, Map zu wählen.

Damit ist der Artikel darüber, warum wir Map benötigen, wenn wir bereits Object in JavaScript haben, abgeschlossen. Weitere relevante JavaScript Map Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Warum brauchen wir Map, wenn wir in JavaScript bereits Object haben?
  • Konvertierung zwischen JSONObject-Objekten und Map-Objekten in JAVA
  • Analyse der Unterschiede zwischen Object, Map und Weakmap in JavaScript
  • Konvertieren Sie JSONObject in HashMap in Java (Beispiel für Methoden- und Hauptmethodenaufruf)
  • Tool-Klasse für die Konvertierung von JSON-Strings und Objekten, Listen und Karten
  • Beispielanalyse der JSON-Deserialisierung ObjectMapper (benutzerdefinierte Implementierung der Deserialisierungsmethode)
  • Beispiel für die Verwendung der ObjectMapper-Klasse zur Implementierung der Konvertierung zwischen JSON und Bean in Java
  • Java-Code zur Implementierung der Konvertierung zwischen Map und Objekt sowie zwischen Map und Json
  • So implementieren Sie Map mit Array und Object in JavaScript

<<:  Absteigender Index in MySQL 8.0

>>:  Tiefgreifendes Verständnis der Erstellung und Implementierung von Servlets in Tomcat

Artikel empfehlen

Detaillierte Installation und Verwendung von Docker-Compose

Docker Compose ist ein Docker-Tool zum Definieren...

MySQL Multi-Instance-Bereitstellungs- und Installationshandbuch unter Linux

Was ist MySQL Multi-Instance Einfach ausgedrückt ...

Zusammenfassung der zwölf Methoden der Vue-Wertübertragung

Inhaltsverzeichnis 1. Vom Vater zum Sohn 2. Vom S...

Beispielcode für CSS-Pseudoklassen zum Ändern des Eingabeauswahlstils

Hinweis: Diese Tabelle ist aus dem W3School-Tutor...

Welche Codes sollte ich beherrschen, wenn ich Webdesign lerne?

In diesem Artikel werden einige der Techniken ausf...

SQL-basierte Abfrageanweisungen

Inhaltsverzeichnis 1. Einfache SELECT-Anweisung 1...

So verwenden Sie TypeScript in Vue

Einführung In den letzten Jahren wurde der Ruf na...

Implementierung des Vue-Zählers

Inhaltsverzeichnis 1. Implementierung des Zählers...

Analyse und Anwendung des Wasserfallflussprinzips unregelmäßiger Bilder

Das im Projekt aufgetretene Layoutproblem unregel...

Verständnis für Webdesign-Layout

<br />Hier ergibt sich ein Widerspruch: In k...