マップJavaScriptデータ構造

データをキーに関連付けるためにES6で導入されたマップデータ構造を発見してください。導入前は、一般的に、オブジェクトまたは値を特定のキー値に関連付けることにより、オブジェクトをマップとして使用していました。

地図とは

マップデータ構造により、データをキーに関連付けることができます。

ES6より前

ECMAScript6(ES2015とも呼ばれます)は、マップデータ構造をJavaScript世界と一緒にセットする

導入前は、一般に、オブジェクトまたは値を特定のキー値に関連付けることにより、オブジェクトをマップとして使用していました。

const car = {}
car['color'] = 'red'
car.owner = 'Flavio'
console.log(car['color']) //red
console.log(car.color) //red
console.log(car.owner) //Flavio
console.log(car['owner']) //Flavio

地図を入力してください

ES6はマップデータ構造を導入し、この種のデータ編成を処理するための適切なツールを提供しました。

マップは、以下を呼び出すことによって初期化されます。

const m = new Map()

マップにアイテムを追加する

を使用してマップにアイテムを追加できますset方法:

m.set('color', 'red')
m.set('age', 2)

キーでマップからアイテムを取得する

また、を使用してマップからアイテムを取得できますget

const color = m.get('color')
const age = m.get('age')

キーでマップからアイテムを削除する

使用delete()方法:

m.delete('color')

マップからすべてのアイテムを削除します

使用clear()方法:

m.clear()

キーでマップにアイテムが含まれているかどうかを確認します

使用has()方法:

const hasColor = m.has('color')

マップ内のアイテムの数を見つける

使用sizeプロパティ:

const size = m.size

値でマップを初期化します

値のセットを使用してマップを初期化できます。

const m = new Map([['color', 'red'], ['owner', 'Flavio'], ['age', 2]])

マップキー

他の値(オブジェクト、配列、文字列、数値)をマップアイテムのキー値エントリの値として使用できるのと同じように、任意の値をキーとして使用できます、オブジェクトですら。

を使用して存在しないキーを取得しようとした場合get()マップから、それは戻りますundefined

実生活ではほとんど見られない奇妙な状況

const m = new Map()
m.set(NaN, 'test')
m.get(NaN) //test
const m = new Map()
m.set(+0, 'test')
m.get(-0) //test

マップ上での反復

マップキーを反復処理します

マップは提供しますkeys()すべてのキーを反復処理するために使用できる方法:

for (const k of m.keys()) {
  console.log(k)
}

マップ値を反復処理します

Mapオブジェクトは、values()すべての値を反復処理するために使用できる方法:

for (const v of m.values()) {
  console.log(v)
}

マップキーと値のペアを反復処理します

Mapオブジェクトは、entries()すべての値を反復処理するために使用できる方法:

for (const [k, v] of m.entries()) {
  console.log(k, v)
}

これは次のように簡略化できます

for (const [k, v] of m) {
  console.log(k, v)
}

配列に変換

マップキーを配列に変換します

const a = [...m.keys()]

マップ値を配列に変換します

const a = [...m.values()]

WeakMap

WeakMapは特別な種類のマップです。

マップオブジェクトでは、アイテムがガベージコレクションされることはありません。代わりに、WeakMapを使用すると、すべてのアイテムを自由にガベージコレクションできます。 WeakMapのすべてのキーはオブジェクトです。このオブジェクトへの参照が失われると、値はガベージコレクションされる可能性があります。

主な違いは次のとおりです。

  1. WeakMapのキーまたは値(またはキー値)を反復処理することはできません
  2. WeakMapからすべてのアイテムをクリアすることはできません
  3. サイズは確認できません

WeakMapは、Mapのメソッドと同等のメソッドを公開します。

  • get(k)
  • set(k, v)
  • has(k)
  • delete(k)

WeakMapのユースケースは、Mapのユースケースよりも明確ではなく、その必要性を見つけることは決してないかもしれませんが、基本的には、ガベージコレクションに干渉しないメモリセンシティブキャッシュを構築するために使用できます。注意深いカプセル化と情報隠蔽のために。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: