[GAS]連想配列はMapオブジェクトを使おう　前半

どうも。つじけ（tsujikenzo）です。このシリーズでは 「連想配列はMapオブジェクトを使おう」 を、前半、後半でお送りします。今日は、前半戦です。

今日のアジェンダ

• はじめに
• Mapオブジェクトの生成
• Mapオブジェクトの主なメンバー
• Mapオブジェクトの中身

はじめに

連想配列とは、キーと値が：（コロン）でセットになった、データの集合です。

{ id: 'tg001', name: 'Tsujike', age: 35 }

これって、オブジェクトじゃないの？と思った方も多いでしょう。

オブジェクトは、連想配列でデータを保有するだけなく、クラスを作成するなどさまざまな機能をもちます。

その反面、処理速度が少し重たくなる、というデメリットもあります。

なので、データを処理するだけなら、連想配列がいいでしょう。

今回は、JavaScriptの連想配列である、Mapオブジェクトについてお届けします。（Array.map()メソッドとは異なります。）

Mapオブジェクトの生成

Mapオブジェクトとは

Mapオブジェクトとは、キーと値が関連付け（マップ）された、集合をあらわすオブジェクトです。

Mapオブジェクトの生成

リテラルはありませんので、new演算子をつかって、オブジェクトを生成します。

引数に要素を渡しながら、マップを生成することもできます。

const m = new Map(); //空のマップを作成する
const n = new Map([["one", 1], ["two", 2]]); //数値にマッピングされたマップを作成する

Mapオブジェクトの主なメンバー

主なメンバーは以下のとおりです。

インスタンスプロパティ

要素の数を返すのはsizeプロパティです。

const n = new Map([["one", 1], ["two", 2]]);
console.log(n.size); // => 2

インスタンスメソッド

マップにたいして、要素を参照したり、削除したり、追加したりしてみましょう。

const n = new Map([["one", 1], ["two", 2]]);
console.log(n.get('one')); // => 1
n.delete('two');
n.set('three',3);
console.log(n.size);// => 2

反復処理メソッド

Mapオブジェクトは反復可能なオブジェクトです。スプレッド演算子を使うと、キーと値を要素にもつ配列を生成できます。

取り出す要素は、1番目がキー、2番目が値です。

const n = new Map([["one", 1], ["two", 2]]);
const array = [...n]; // [ [ 'one', 1 ], [ 'two', 2 ] ]

for of文では、以下のように分割代入と組み合わせることができます。

const n = new Map([["one", 1], ["two", 2]]);
for(const [key, value] of n){
  console.log(`${key}:${value}`); // => one:1, two:2
}

反復処理メソッドは、キーや値のみの配列を生成できます。

const n = new Map([["one", 1], ["two", 2]]);
const keys = [...n.keys()]; //	[ 'one', 'two' ]
const values = [...n.values()]; //	[ 1, 2 ]
const entries = [...n.entries()]; // [ [ 'one', 1 ], [ 'two', 2 ] ] これは[...n]と同じ

ArrayクラスのforEach()メソッドは、マップオブジェクトにも実装されています。

Arrayクラスと同様に、マップの各要素についてコールバック関数を挿入順に呼び出して処理します。

コールバック関数の引数が、value, keyの順であることもおなじです。

さきほどの、for of文などの取り出し順と異なりますので、混同しないようにしましょう。

const n = new Map([["one", 1], ["two", 2]]);
n.forEach( (value, key) => {
  console.log(`${key}:${value}`); // => one:1, two:2
});

Mapオブジェクトの中身

Mapオブジェクトのset()メソッドの戻り値は、Mapオブジェクトです。

なので、このように、メソッドチェーン記法で、マップを生成できます。

const n = new Map().set("one", 1).set("two", 2);

生成されたマップは、{ one: 1, two: 2, } のような構造になっていると想像しますが、直接ログ出力ができません。

const n = new Map().set("one", 1).set("two", 2);
console.log(n); // => {}

Mapオブジェクトの、反復処理メソッドの戻り値は、 Mapの新しいイテレーターオブジェクトです。

これらも同様に、直接ログ出力ができません。

よくある質問だと思いますので、理解しておきましょう。

const n = new Map().set("one", 1).set("two", 2);
console.log(n.keys()); // => {}
console.log(n.values()); // => {}

まとめ

以上で、「連想配列はMapオブジェクトを使おう　前半」をお送りました。

次回は、実践編として、後半をお届けします。

参考資料

• Map MDN
• JavaScript 第7版 O’Reilly Japan

このシリーズの目次

• [GAS]連想配列はMapオブジェクトを使おう　前半
• [GAS]連想配列はMapオブジェクトを使おう　後半