Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine kurze Diskussion über die Kartendatenstruktur von es6 javascript_javascript-Fähigkeiten

韦小宝
Freigeben: 2017-12-15 14:06:19
Original
1311 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Kartendatenstruktur von es6 Javascript vorgestellt. Jetzt werde ich die JavaScript-Quelle mit Ihnen teilen Code. Auch als Referenz für alle. Wenn Sie sich für JavaScript interessieren, folgen Sie dem Editor und schauen Sie vorbei

Dieser Artikel stellt die Kartendatenstruktur von es6-Javascript vor und teilt sie mit allen. Die Details lauten wie folgt:

Kartenstruktur Der Zweck und die grundlegende Verwendung von

JavaScript-Objekt (Object) ist im Wesentlichen eine Sammlung von Schlüssel-Wert-Paaren (Hash-Struktur), traditionell jedoch nur strings als Schlüssel verwendet werden. Dies bringt große Einschränkungen für den Einsatz mit sich.


var data = {}; 
var element = document.getElementById('myp'); 
data[element] = 'metadata'; 
data['[object HTMLpElement]'] // "metadata"
Nach dem Login kopieren


Die ursprüngliche Absicht des obigen Codes besteht darin, einen DOM-Knoten als Schlüssel der Objektdaten zu verwenden , aber da das Objekt nur Zeichen akzeptiert, wird String als Schlüsselname verwendet, sodass das Element automatisch in String [object HTMLpElement] konvertiert wird.


Um dieses Problem zu lösen, stellt ES6 die Kartendatenstruktur bereit. Es ähnelt einem Objekt und ist ebenfalls eine Sammlung von Schlüssel-Wert-Paaren, der Umfang von „Schlüssel“ ist jedoch nicht auf Zeichenfolgen beschränkt. Als Schlüssel können verschiedene Arten von Werten (einschließlich Objekten) verwendet werden. Mit anderen Worten: Die Objektstruktur stellt die „String-Wert“-Korrespondenz bereit, und die Map-Struktur stellt die „Wert-Wert“-Korrespondenz bereit, was eine vollständigere Implementierung der Hash-Struktur darstellt. Wenn Sie eine „Schlüssel-Wert“-Datenstruktur benötigen, ist Map besser geeignet als Object.



var m = new Map(); 
var o = { 
 p: 'Hello World' 
}; 
m.set(o, 'content') 
m.get(o) // "content" 
m.has(o) // true 
m.delete(o) // true 
m.has(o) // false
Nach dem Login kopieren


Der obige Code verwendet die Set-Methode, um das Objekt o als Schlüssel von m zu behandeln, und verwendet es dann get-Methode, um den Schlüssel zu lesen, und verwenden Sie dann die

delete-Methode, um den Schlüssel zu löschen. Als
Konstruktor kann Map auch ein Array als Parameter akzeptieren. Die Mitglieder dieses Arrays sind Arrays, die Schlüssel-Wert-Paare darstellen.


var map = new Map([ 
 ['name', ' 张三 '], 
 ['title', 'Author'] 
]); 
map.size // 2 
map.has('name') // true 
map.get('name') // " 张三 " 
map.has('title') // true 
map.get('title') // "Author"
Nach dem Login kopieren


Der obige Code gibt beim Erstellen einer neuen Karteninstanz zwei Schlüssel an, Name und Titel.


Der Map-Konstruktor akzeptiert ein Array als Parameter und führt tatsächlich den folgenden Algorithmus aus.


var items = [ 
 ['name', ' 张三 '], 
 ['title', 'Author'] 
]; 
var map = new Map(); 
items.forEach(([key, value]) => map.set(key, value));
Nach dem Login kopieren


Im folgenden Beispiel sind die Zeichenfolge true und der boolesche Wert true zwei verschiedene Schlüssel.



var m = new Map([ 
 [true, 'foo'], 
 ['true', 'bar'] 
]); 
m.get(true) // 'foo' 
m.get('true') // 'bar'
Nach dem Login kopieren


Bei mehrfacher Belegung derselben Taste überschreiben die späteren Werte die vorherigen.


let map = new Map(); 
map 
 .set(1, 'aaa') 
 .set(1, 'bbb'); 
map.get(1) // "bbb"
Nach dem Login kopieren


Der obige Code weist der Taste 1 zwei aufeinanderfolgende Werte zu, und der letztere Wert überschreibt den vorherigen Wert.


Wenn ein unbekannter Schlüssel gelesen wird, wird undefiniert zurückgegeben.


new Map().get('asfddfsasadf') 
 // undefined
Nach dem Login kopieren


Beachten Sie, dass nur Verweise auf dasselbe Objekt von der Map-Struktur als derselbe Schlüssel behandelt werden. Seien Sie dabei sehr vorsichtig.



var map = new Map(); 
map.set(['a'], 555); 
map.get(['a']) // undefined
Nach dem Login kopieren


Die Set- und Get-Methoden des obigen Codes scheinen für denselben Schlüssel zu gelten, tatsächlich aber Das ist Die Speicheradressen der beiden Werte sind unterschiedlich, sodass die get-Methode den Schlüssel nicht lesen kann und undefiniert zurückgibt.


In ähnlicher Weise werden zwei Instanzen desselben Werts als zwei Schlüssel in der Map-Struktur betrachtet.


var map = new Map(); 
var k1 = ['a']; 
var k2 = ['a']; 
map 
 .set(k1, 111) 
 .set(k2, 222); 
map.get(k1) // 111 
map.get(k2) // 222
Nach dem Login kopieren


Im obigen Code sind die Werte der Variablen k1 und k2 gleich, werden aber als betrachtet in der Kartenstruktur Zwei Schlüssel.


Wie aus dem Obigen ersichtlich ist, sind die Schlüssel von Map tatsächlich an die Speicheradressen gebunden. Solange die Speicheradressen unterschiedlich sind, werden sie als zwei Schlüssel betrachtet. Dies löst das Problem der Kollision von Eigenschaften mit demselben Namen. Wenn wir die Bibliotheken anderer Personen erweitern und Objekte als Schlüsselnamen verwenden, müssen wir uns keine Sorgen machen, dass unsere eigenen Eigenschaften denselben Namen wie die des ursprünglichen Autors haben.


Wenn der Schlüssel der Karte ein einfacher Werttyp ist (Zahl, Zeichenfolge, Boolescher Wert), wird er von der Karte so behandelt, solange die beiden Werte genau gleich sind ein Schlüssel, einschließlich 0 und - 0 . Obwohl NaN nicht genau sich selbst gleicht, behandelt Map sie außerdem als denselben Schlüssel.



let map = new Map(); 
map.set(NaN, 123); 
map.get(NaN) // 123 
map.set(-0, 123); 
map.get(+0) // 123
Nach dem Login kopieren


Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium hilfreich sein. und ich hoffe, Sie erfahren mehr über die chinesische PHP-Website.


Verwandte Empfehlungen:

ie8 unterstützt die Javascript-Kartenmethode nicht

Eine kurze Analyse des Funktionsprinzips von JavaScript Mapreduce_Grundkenntnisse

Explizite Konvertierung und implizite Konvertierung basierend auf Javascript (ausführliche Erklärung)_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Kartendatenstruktur von es6 javascript_javascript-Fähigkeiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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