ES6 のマップ、セット、配列、オブジェクトの比較 (詳細なチュートリアル)

この記事では、主に ES6 の学習ノートでマップ、セット、配列、オブジェクトの比較に関する関連情報をサンプル コードを通じて詳しく紹介します。この記事は、あらゆる人の学習や作業に一定の参考学習価値をもたらします。それが必要です、友達、一緒に勉強しましょう。

はじめに

ES5 のデータ構造は主に Array と Object を使用します。 ES6では主にSetとMapのデータ構造が追加されています。これまでのところ、一般的に使用されるデータ構造は、配列、オブジェクト、セット、マップの 4 つです。以下では多くを語る必要はありません。詳細な紹介を見てみましょう。

// データ構造の水平比較、追加、確認、変更、削除

1. マップと配列の比較

{ 
 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. セットと配列の比較

{
 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. マップ、セット、オブジェクトの比較

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

比較すると、マップを使用できるものが優先され、配列は使用されないことがわかります。

データの一意性を考慮して、オブジェクトの代わりにセットの使用を検討してください

今後の開発では、マップとセットの使用を優先し、配列とオブジェクトを放棄することができます

上記は、私が皆さんのためにまとめたものです. 今後も皆様のお役に立てれば幸いです。

関連記事:

vueのミックスイン属性の詳しい説明

Vueはミックスインを使って圧縮画像コードを実装

vue2.0でシミュレートされたアンカーポイントの例

以上がES6 のマップ、セット、配列、オブジェクトの比較 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。