Vergleich von Karte, Menge, Array und Objekt in ES6 (ausführliches Tutorial)

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zum Vergleich von Karten, Mengen, Arrays und Objekten in den ES6-Studiennotizen ein. Der Artikel führt sie ausführlich anhand von Beispielcode ein, der einen gewissen Referenzlernwert für das Studium oder die Arbeit jedes Einzelnen hat . Freunde, die es brauchen, lernen bitte unten zusammen.

Vorwort

Die Datenstrukturen in ES5 verwenden hauptsächlich Array und Object. In ES6 werden hauptsächlich die Datenstrukturen Set und Map hinzugefügt. Bisher gibt es vier häufig verwendete Datenstrukturen: Array, Object, Set und Map. Im Folgenden gibt es nicht viel zu sagen. Werfen wir einen Blick auf die ausführliche Einführung.

// Horizontaler Vergleich der Datenstruktur, Hinzufügen, Überprüfen, Ändern, Löschen

1. Vergleich von Karte und Array

{ 
 let map=new Map();
 let array=[];

 /**增**/
 map.set('t',1);
 array.push({t:1});
 console.info('map-array',map,array); 

 /**查**/
 let map_exist=map.has('t');
 let array_exist=array.find(item=>item.t);
 console.info('map-array',map_exist,array_exist); 

 /**改**/
 map.set('t',2);
 array.forEach(item=>item.t?item.t=2:'');
 console.info('map-array-modify',map,array); 

 /**删**/
 map.delete('t');
 let index=array.findIndex(item=>item.t);
 array.splice(index,1);
 console.info('map-array-empty',map,array);
}

2. Vergleich zwischen Set und Array

{
 let set=new Set();
 let array=[]; 
 
 // 增
 set.add({t:1});
 array.push({t:1});
 console.info('set-array',set,array);

 // 查
 let set_exist=set.has({t:1});
 let array_exist=array.find(item=>item.t);
 console.info('set-array',set_exist,array_exist); 

 // 改
 set.forEach(item=>item.t?item.t=2:'');
 array.forEach(item=>item.t?item.t=2:'');
 console.info('set-array-modify',set,array); 
 
 // 删
 set.forEach(item=>item.t?set.delete(item):'');
 let index=array.findIndex(item=>item.t);
 array.splice(index,1);
 console.info('set-array-empty',set,array);
}

3. Vergleich von Karte, Set und Objekt

{ 
 let item={t:1};
 let map=new Map();
 let set=new Set();
 let obj={}; 

 // 增
 map.set('t',1);
 set.add(item);
 obj['t']=1;
 console.info('map-set-obj',obj,map,set); 

 // 查 
 console.info({
 map_exist:map.has('t'),
 set_exist:set.has(item),
 obj_exist:'t' in obj
 }) 

 // 改
 map.set('t',2);
 item.t=2;
 obj['t']=2;
 console.info('map-set-obj-modify',obj,map,set); 

 // 删除
 map.delete('t');
 set.delete(item); 
 delete obj['t'];
 console.info('map-set-obj-empty',obj,map,set);
}

Durch Vergleich kann festgestellt werden, dass diejenigen, die Map verwenden können, zuerst anstelle von Arrays verwendet werden sollten

Unter Berücksichtigung der Einzigartigkeit von Daten sollten Sie die Verwendung von Set anstelle von Objet in Betracht ziehen.

. Priorisieren Sie die Verwendung von Map und Set, und Sie können auf Arrays und Objekte verzichten.

Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, es wird hilfreich sein an alle in der Zukunft.

Verwandte Artikel:

Detaillierte Erläuterung des Mixins-Attributs von Vue

Vue verwendet Mixins, um komprimierten Bildcode zu implementieren

Instanz des Vue2.0-Simulationsankerpunkts

Das obige ist der detaillierte Inhalt vonVergleich von Karte, Menge, Array und Objekt in ES6 (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!