Comparaison de la carte, de l'ensemble, du tableau et de l'objet dans ES6 (tutoriel détaillé)

Cet article vous présente principalement les informations pertinentes sur la comparaison de la carte, de l'ensemble, du tableau et de l'objet dans les notes d'étude ES6. L'article les présente en détail à travers un exemple de code, qui a une certaine valeur d'apprentissage de référence pour l'étude ou le travail de chacun. . Amis qui en ont besoin, veuillez étudier ensemble ci-dessous.

Préface

Les structures de données dans ES5 utilisent principalement Array et Object. Dans ES6, les structures de données Set et Map sont principalement ajoutées. Jusqu'à présent, il existe quatre structures de données couramment utilisées : Tableau, Objet, Ensemble et Carte. Pas grand chose à dire ci-dessous, jetons un œil à l’introduction détaillée.

// Comparaison horizontale de la structure des données, ajouter, vérifier, modifier, supprimer

1. Comparaison de la carte et du tableau

{ 
 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. Comparaison entre ensemble et tableau

{
 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. Comparaison de la carte, de l'ensemble et de l'objet

{ 
 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);
}

Grâce à une comparaison, on peut constater que ceux qui peuvent utiliser map devraient être utilisés en premier au lieu de tableaux

Compte tenu du caractère unique des données, envisagez d'utiliser set. au lieu d'utiliser Objet

Dans les développements futurs, vous pouvez donner la priorité à l'utilisation de map et set, et vous pouvez abandonner les tableaux et les objets

Ce qui précède est ce que j'ai compilé pour tout le monde, je l'espère sera utile à tout le monde à l’avenir.

Articles connexes :

Explication détaillée de l'attribut mixins de Vue

Vue utilise des mixins pour implémenter du code d'image compressé

Instance du point d'ancrage de simulation vue2.0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!