Comparison of map, set, array, and object in ES6 (detailed tutorial)

This article mainly introduces you to the relevant information about the comparison of map, set, array, and object in ES6 study notes. The article introduces it in detail through example code, which has certain reference learning value for everyone's study or work. Friends who need it, please study together below.

Preface

The data structures in ES5 mainly use Array and Object. In ES6, the Set and Map data structures are mainly added. So far, there are four commonly used data structures: Array, Object, Set, and Map. Not much to say below, let’s take a look at the detailed introduction.

// Horizontal comparison of data structure, add, check, modify, delete

1. Comparison of map and 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. Comparison between set and 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. Comparison of map, set and Object

##

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

Through comparison, it can be found that those who can use map should be used first instead of arrays.

Considering the uniqueness of data, consider using set instead of using Objet

It can be used in future development Prioritize the use of map and set, and you can give up arrays and objects

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of vue’s mixins attribute

Vue uses mixins to implement compressed image code

vue2.0 simulated anchor point example

# #

The above is the detailed content of Comparison of map, set, array, and object in ES6 (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!