JavaScriptコレクションの使い方

25180 ワード

100daysofcode webdev beginners javascript テキストリンク

導入

他の多くのプログラミング言語とは異なり、JavaScriptのデータ収集の扱い方はobjects and arrays (技術的な配列もJavaScriptのオブジェクトの型です).開発者の大多数は、データを適切なデータ構造にスライスして、ダイシングするために、これらに大いに依存する.
にpre-ES6 時代には、データの収集に対処する多くのオプションがありませんでした.を使うarray それを成し遂げるすばらしい方法でした.配列とオブジェクトの組み合わせはデータ収集を便利にします.しかし、いくつかの欠点があります.

オブジェクトのキーは文字列型のみです.

このオブジェクトは、size またはそれの柔軟性iterating それを通して.

オブジェクトは要素内の要素の順序を保持しません.

ES 6(ECMAScript 2015)は私たちに2つの新しいデータ構造をもたらしました.Map and Set データ収集をより柔軟で有用にする.この記事では、実際にそれを使用する方法を学ぶためにマップデータ構造の上に行きます.

マップ

マップはキーの値ペアのコレクションで、キーは任意の型を指定できます.マップは、要素の元の挿入順序を記憶します.これは、マップからのデータが挿入されたと同じ順序で取得されることを意味します.
あなたが密接に気がつくならば、地図はオブジェクトと配列の特性を持ちます.

オブジェクトの特性-キー値ペア構造をサポートします.

配列の特性-挿入順序を記憶します.

マップの作成と初期化

新しいマップを作成できます.

const map = new Map();

空のマップを返します.

Map(0) {}

ここで注意するポイント.新しく作成されたMap デフォルトキーはありません.一方、JavaScriptオブジェクトを作成してマップのように動作させると、プロトタイプからプロパティを継承します.
もう一つの創造方法Map は初期値です.ここでは3つで初期化マップを作成していますkey-value 対

const greenrootsBlog = new Map([
        ['name', 'greenroots'],
        ['type', 'blog'],
        ['writer', 'Tapas Adhikary'],
    ]);

つの要素を持つマップを返します.

Map(3)
{
   "name" => "greenroots", 
   "type" => "blog", 
   "writer" => "Tapas Adhikary"
}

マップに値を追加する

マップに値を追加するには、set(key, value) メソッド.The set(key, value) メソッドは2つのパラメータをとります.key and value , キーと値が任意の型である場合、プリミティブ(boolean , string , number など)

// create a map
const map = new Map();

// Add values to the map
map.set('name', 'greenroots');
map.set('type', 'blog');
map.set('writer', 'Tapas Adhikary');

出力

Map(3)
{
   "name" => "greenroots", 
   "type" => "blog", 
   "writer" => "Tapas Adhikary"
}

あなたがマップに複数回値を追加するには、同じキーを使用する場合は、注意してください、それは常に最後の値に置き換えられます.

// Add a different writer
map.set('writer', 'Someone else!');

さて、マップ出力は次のようになります.

Map(3)
{
   "name" => "greenroots", 
   "type" => "blog", 
   "writer" => "Someone else!"
}

マップから値を取得する

これで推量したに違いない.ええ、マップにはメソッドがあります.get(key) Aを渡すことで価値を得るためにkey .

map.get('name');
map.get('type');
map.get('writer');

注意してくださいget(key) メソッドはundefined を返します.

マップキー

オブジェクトとマップの顕著な違いは、マップキーは任意のタイプのことができます.例を見てみましょう.

// create a Map
const funMap = new Map();

funMap.set(360, 'My House Number'); // number key
funMap.set(true, 'I write blogs!'); // boolean key

let obj = {'name': 'tapas'}
funMap.set(obj, true); // object as key

console.log(funMap);

出力

Map(3) 
{
  360 => "My House Number", 
  true => "I write blogs!", 
  {…} => true
}

さあ

funMap.get(360); // returns, 'My House Number'
funMap.get(obj); // returns, true
funMap.get('360'); // undefined

通常のJavaScriptオブジェクトは、キーを常に文字列として扱います.他のプリミティブやオブジェクトとして渡すときでも、内部キーを文字列に変換します.ここでは、それを理解するための例です.

// Create an empty object
const funObj = {};

// add a property. Note, passing the key as a number.
funObj[360] = 'My House Number';

// It returns true.
// Because the number 360 got converted to a string '360' internally!
console.log(funObj[360] === funObj['360']);

マップのプロパティとメソッド

マップには、組み込みのプロパティとメソッドを使用するように強力かつ柔軟に使用します.それらを説明するために地図を作りましょう.

const map = new Map();

map.set('John', 34);
map.set('Alex', 15);
map.set('Buddy', 37);

地図のサイズを知る

使用するsize マップ内の要素の数を知るプロパティ.

console.log('size of the map is', map.size);

マップ内の要素数を再計算します.この場合、3となる.

Please note: Just like array's length, size is also a property, not a method.

hs ()の要素を見つける

方法has(key) マップがキーを持つ要素を持つ場合にtrueを返します.

console.log(map.has('John')); // returns, true

console.log(map.has('Tapas')); // returns, false

delete ()でdelete要素を削除します。

を使用してマップから要素を削除できますdelete(key) メソッド.

map.delete('Buddy'); // removes the element with key, 'Buddy'.

マップ全体をクリアする

使用するclear() マップから一度にすべての要素を削除する方法.

// Clear the map by removing all the elements
map.clear(); 

map.size // It will return, 0

mapiterator - keys ()、value (), entries ()

すべてのメソッドclear() ) これまで見たことがありますが、マップのキー値を1つずつ扱うことです.すべてのキー、値、およびキー値のペアをそれぞれ取得するには3つの便利なメソッドがあります.
これらのメソッドはMapIterator あなたがAを行うことができるのでfor-of or forEach その上に直接ループします.
まず、マップを作成します.

const ageMap = new Map([
        ['Jack', 20],
        ['Alan', 34],
        ['Bill', 10],
        ['Sam', 9]
]);

すべてのキーを得る

console.log(ageMap.keys());

出力

MapIterator {"Jack", "Alan", "Bill", "Sam"}

すべての値を得る

console.log(ageMap.values());

出力

MapIterator {20, 34, 10, 9}

すべてのエントリを取得する

console.log(ageMap.entries());

出力

MapIterator {"Jack" => 20, "Alan" => 34, "Bill" => 10, "Sam" => 9}

地図上の反復処理

マップを反復処理する複数の方法があります.使用できます.forEach or for-of ループを繰り返します.

foreachで

 // with forEach
 ageMap.forEach((value, key) => {
   console.log(`${key} is ${value} years old!`);
 });

注意、最初の引数は値、2番目はキーです.出力は

Jack is 20 years old!
Alan is 34 years old!
Bill is 10 years old!
Sam is 9 years old!

と

簡単にできますdestructure マップからのキーと値for-of ループ.

for(const [key, value] of ageMap) {
  console.log(`${key} is ${value} years old!`);
}

オブジェクトをマップする

あなたが変換する必要がある状況に遭遇する可能性がありますobject にMap 構造同様.メソッドを使用できます.entries of Object それをする.

const address = {
        'Tapas': 'Bangalore',
        'James': 'Huston',
        'Selva': 'Srilanka'
};

const addressMap = Object.entries(address);

オブジェクトへのマップ

逆にしたい場合は、このメソッドを使用します.fromEntries .

Object.fromEntries(map)

配列へのマップ

マップを配列に変換する方法がいくつかあります.

使用Array.from(map)

  const map = new Map();
  map.set('milk', 200);
  map.set("tea", 300);
  map.set('coffee', 500);

  console.log(Array.from(map));

出力

スプレッド演算子の使用

私たちはspread operator 同様に、配列にマップを変換します.

  console.log([...map]);

地図対オブジェクト：何を使うとき？

Map 両方の特徴object and array . しかし、地図は、Aのようですobject than array データを格納する性質のためにkey-value 形式.
ここでオブジェクトとの類似性はここで終わる.私たちがこれまで見たように、地図は他の多くの方法でオブジェクトと非常に異なります.それで、どちらを使うべきか?どのようにその呼び出しを取るには?
マップを使用する

あなたの必要性は単純ではない.非文字列であるキーを作成します.オブジェクトをキーとして格納することは非常に強力なアプローチです.マップはデフォルトであなたにそれを与える.

要素を順序付けできるデータ構造が必要です.オブジェクトは順序を維持しません.

あなたのような外部ライブラリに頼ることなく柔軟性を探していますlodash . 閉じるこの動画はお気に入りから削除されていますlodash なぜなら、私たちはこのような方法を見つけないからです.has() , values() , delete() またはプロパティのように、size を返します.

Map それはあなたのためにデフォルトでそれらを提供することによって容易になります.
オブジェクトを使用する

上記のようなニーズはありません.

当てにするJSON.parse() ASとしてMap で解析できません.