ECMA Script6(JavaScript)のMapクラスの使い方

ECMA Script6(JavaScript)のMapクラスの使い方についてです。

JavaのMapとほぼ同じ気がします。

キーと値をセットしてくれます。

以下、記述例です。

const map = new Map();
map.set('apple', 'リンゴ');
map.set('lemon', 'レモン');

上記のようにmapがキーと値を保持してくれます。

キーは必ずしも文字列である必要はなく、極端ですがオブジェクトなどでもよいようです。

以下は、キーに空のオブジェクトを渡している例です。

const obj = {};
const map = new Map();
map.set(obj,'test');
console.log(map.get(obj));

結果は以下のようになります。

test

setでキーと値をセットし、getの引数にキーを指定すると、そのキーに該当する値が返ってきます。

Mapのキーや値をfor ofを使用して取得する

Mapなのでfor分でループするケースがでてくると思います。

キーを取得するにはkeysメソッド、値を取得するにはvaluesメソッドが用意されています。

const map = new Map();
map.set('apple', 'リンゴ');
map.set('lemon', 'レモン');
for (const key of map.keys()) {
  console.log(key);
}

結果は以下のようになります。

apple
lemon

次はvalueの一覧を取得する例です。ロジックは同じです。

const map = new Map();
map.set('apple', 'リンゴ');
map.set('lemon', 'レモン');
for (const val of map.values()) {// valuesに変更しただけ
  console.log(val);
}

結果は以下のようになります。

リンゴ
レモン

Mapのキーと値をfor ofを使用して同時に取得する

Mapのキーと値をMapのインスタンスから同時に取得することができます。

以下のように配列を使います。

const map = new Map();
map.set('apple', 'リンゴ');
map.set('lemon', 'レモン');
for (const [key, value] of map) {
  console.log(`${key} : ${value}`);
}

結果は以下のようになります。

apple : リンゴ
lemon : レモン

Mapのキーを削除する

Mapにsetしたキーを削除するdeleteメソッドが用意されています。deleteメソッドの引数にはキーを指定します。

const map = new Map();
map.set('apple', 'リンゴ');
map.set('lemon', 'レモン');
map.delete('lemon');
for (const [key, value] of map) {
console.log(`${key} : ${value}`);
}

結果は以下のようになります。

apple : リンゴ

Mapにsetした全てのキーを削除するにはclearメソッドを使用します。

clearメソッドに引数はありません。

const map = new Map();
map.set('apple', 'リンゴ');
map.set('lemon', 'レモン');
map.clear();
console.log(map);

結果は以下のようになります。

{}

Mapのコンストラクタ

Mapのコンストラクタには配列の配列を渡してキーと値をセットしておくことができます。

let arr = [['lemon', 'レモン'], ['apple', 'リンゴ']];

const map = new Map(arr);

for (const [key, value] of map) {
  console.log(`${key} : ${value}`);
}

結果は以下のようになります。

lemon : レモン
apple : リンゴ
スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA