JavaScriptでマップ（辞書）のキーと値を取得する方法

辞書（ディクショナリ）型のデータを扱っていると、ある処理のために「キーだけ」を配列として取り出したい場面があります。JavaScriptでは、Object.keysメソッドを使うことで、オブジェクトが持つプロパティ（キー）を簡単に配列形式で取得できます。ここでは、このメソッドを利用して、独自のコンテナオブジェクトからキーの一覧を返す実装を見ていきましょう。

keys()メソッドの実装例

keys() {
    return Object.keys(this.container);
}

動作確認

実際に動作を確認してみます。

const myMap = new MyMap();
myMap.put("key1", "value1");
myMap.put("key2", "value2");

console.log(myMap.keys());

出力結果

[ 'key1', 'key2' ]

ES6のMapでキーを取得する

ES6で標準搭載されたMapオブジェクトにも、同じ目的で使えるkeys()メソッドが用意されています。ただし注意点として、このメソッドはMapIteratorオブジェクトを返します。返り値はそのまま配列のように扱えるわけではなく、Array.from()などで配列へ変換するか、通常のイテレータとして順次処理する必要があります。

const myMap = new Map([
    ["key1", "value1"],
    ["key2", "value2"]
]);

console.log(myMap.keys())

出力結果

MapIterator { 'key1', 'key2' }

配列として使いたい場合は、次のように変換すると便利です。

const keyArray = Array.from(myMap.keys());
console.log(keyArray); // [ 'key1', 'key2' ]

values()メソッドで値を取得する

逆に、キーではなく値だけが必要になるケースもあります。その場合は、辞書全体をループして各キーに対応する値を収集していきます。以下はその実装例です。

values() {
    let values = [];
    for (let key in this.container) {
        values.push(this.container[key]);
    }
    return values;
}

動作確認

const myMap = new MyMap();
myMap.put("key1", "value1");
myMap.put("key2", "value2");
console.log(myMap.values());

出力結果

[ 'value1', 'value2' ]

まとめ

ES6のMapにも、keys()と同様にvalues()メソッドが標準で用意されており、同じように利用できます。Object.keysによる自前実装と、ES6標準のMap、それぞれの特徴を理解しておくと、用途に応じて使い分けができるようになります。