Heim  >  Artikel  >  Web-Frontend  >  Ist es6 Map ein Referenztyp?

Ist es6 Map ein Referenztyp?

青灯夜游
青灯夜游Original
2023-01-11 16:59:001585Durchsuche

map ist ein Referenztyp; Map (Set) ist ein neuer Referenzdatentyp, der in es6 hinzugefügt wurde und die Zuordnungsbeziehung von Daten darstellt. Daten im Kartensammlungs-Datentyp werden in der Art „Schlüssel/Wert“ gespeichert. Sie können die Eigenschaften des Objekts als Schlüssel verwenden und die Eigenschaften verwenden, um auf den Wert zu verweisen, z. B. „const“. myMap = new Map();" .

Ist es6 Map ein Referenztyp?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

map ist ein Referenztyp.

es6-Karte

Vor ES6 erfolgte die Implementierung von „key“ => „value“ in JavaScript, was wir oft als Schlüssel-Wert-Paare bezeichnen, mithilfe von Object. Diese Implementierungsmethode weist jedoch in speziellen Szenarien Probleme auf. ES6 hat einen neuen Sammlungstyp namens Map eingeführt, der einen echten Schlüssel-Wert-Paar-Speichermechanismus in die Sprache bringt.

map (set) ist ein neuer Referenzdatentyp in es6, der die Zuordnungsbeziehung von Daten darstellt. Die Daten im Kartensammlungsdatentyp werden in Form von „Schlüssel/Wert“ gespeichert und Sie können die Eigenschaften von verwenden das Objekt als Schlüssel. Verwenden Sie Eigenschaften, um auf Werte zu verweisen.

1-1 Erstellen Sie eine Karte

Verwenden Sie das Schlüsselwort new, um eine Karte zu instanziierennew关键字来实例一个map

let m = new Map();

console.log(m);
// Map(0) {}

创建时初始化:
传入一个二维数组参数(可迭代对象,内部以数组的方式传入键值)
每个子数组,第一个元素是map对应的key, 第二个元素是map对应的value

let m = new Map([[{}, 222], [{}, '123']]);

console.log(m);
// Map(2) { {} => 222, {} => '123' }

1-2 Map Api

1-2-1 添加映射元素

通过set()方法添加,传入两个参数,第一个传入映射的键,第二个传入映射的值。返回的是该映射集合(意味着可以链式添加)

let m = new Map();

m.set('prop', '值');

console.log(m);
// Map(1) { 'prop' => '值' }

链式添加键值

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m);
// Map(3) { 'prop' => '值', 'prop2' => false, 'num' => { id: 13 } }

1-2-2 映射集合长度

使用size

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.size);

Beim Erstellen initialisieren:

Übergeben Sie einen zweidimensionalen Array-Parameter (iterierbares Objekt). , Der Schlüsselwert wird intern als Array übergeben) Für jedes Unterarray ist das erste Element der Schlüssel, der der Karte entspricht, und das zweite Element ist der Wert entsprechend der Karte
let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.get('prop2'));
// false

1-2 Karten-API

1-2-1 Zuordnungselemente hinzufügen

Hinzufügen Geben Sie über die set()-Methode zwei Parameter ein, der erste ist der Schlüssel der Karte und der zweite der Wert der Karte. Was zurückgegeben wird, ist der Zuordnungssatz (d. h. er kann in einer Kette hinzugefügt werden)

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.get('prop2'), m.size);
// undefined 2
Verketteter Schlüsselwert
let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.has('prop2'), m.has('num'));
// false  true

1-2-2 Zuordnungssatzlänge

Verwenden Sie Das Attribut „size“ kann die Anzahl der Elemente in der aktuellen Sammlung abrufen
let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.clear();
// true

console.log(m);
// Map(0) {}

1-2-4 Ein Element löschen

Löschen Sie ein Element in der zugeordneten Sammlung über die Methode delete() und geben Sie einen booleschen Wert zurück, der den Erfolg oder Misserfolg des Löschvorgangs angibt

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.entries === m[Symbol.iterator]);// true

for(let k1 of m.entries()){
    console.log(k1);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍历的属性即对应映射元素的键值对数组
}

for(let k2 of m.keys()){
    console.log(k2);
    // prop
    // prop2
    // num
    // 遍历的属性对应映射元素的键
}

for(let k3 of m.values()){
    console.log(k3);
    // 值
    // false
    // { id: 13 }
    // 遍历的属性对应映射元素的值
}

for(let k4 of m[Symbol.iterator]()){
    console.log(k4);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍历的属性即对应映射元素的键值对数组
}
1-2 -5 Erkennen Sie, ob das Element vorhanden ist

Verwenden Sie die Methode has(), um zu erkennen, ob das Zielelement vorhanden ist, und geben Sie den booleschen Wert des Erkennungsergebnisses zurück
rrreee

1-2-6 Methode zum Löschen von Elementen Verwenden Sie die Methode clear(), um alle Elemente zu löschen, und geben Sie den booleschen Wert für eine erfolgreiche Löschung zurück. Wert rrreee

  • 1-3 Sequenz und Iteration

  • map kann Elemente gemäß der Einfügungsreihenfolge iterieren
    Die Mapping-Instanz wird bereitgestellt (Iterator). Es kann ein Array in der Form von [Schlüssel, Wert] in der Reihenfolge der Einfügung generieren. Ja Durchlaufen Sie die Iteratorschnittstelle „Entries()“ (oder die bereitgestellte Symbol.iterator).

    rrreee

  • 1-4 Vergleich mit Object

  • Speichernutzung

    Unterschiede in den Browsern führen dazu, dass die Speichernutzung der beiden Speichermethoden unterschiedlich ist. Aufgrund der Speichergröße beträgt die Kartenspeicherung jedoch etwa 50 % mehr Schlüssel-Wert-Paare als Object

Einfügungsleistung

Einfügungsgeschwindigkeit Die Leistung von Map und Object ist ungefähr gleich, aber wenn der Code eine große Anzahl von Einfügungen umfasst, wird die Verwendung von Map

empfohlen Der Unterschied in der Suchgeschwindigkeit: Klein, Object ist besser, wenn es nur eine kleine Anzahl von Schlüssel-Wert-Paaren enthält. Löschleistung: Die delete()-Leistung von Object ist schlecht, während die delete()-Leistung von Map gut ist Die Daten erfordern eine große Anzahl von Löschvorgängen. Es wird empfohlen, Map zu verwenden

Das obige ist der detaillierte Inhalt vonIst es6 Map ein Referenztyp?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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
Vorheriger Artikel:Was beinhaltet Return in ES6?Nächster Artikel:Was beinhaltet Return in ES6?