JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのMap.keys()メソッドとは？使い方とサンプルコードをわかりやすく解説

Map.keys()メソッドとは

JavaScriptのMapオブジェクトに用意されているkeys()メソッドは、entries()メソッドとよく似た働きをします。ただし、keys()が返すのはキーと値のペアではなく、マップに格納されたキーのみを含むイテレーターオブジェクトである点が大きな違いです。

イテレーターオブジェクトはnext()メソッドを持っており、呼び出すたびに次のキーを順番に取得できます。戻り値は {value: キー, done: 真偽値} という形式のオブジェクトで、value プロパティを参照することで個々のキーにアクセスできます。

構文

keys()メソッドの構文は以下のとおりです。引数は不要で、呼び出し元のMapオブジェクト自身のキーを列挙するイテレーターを返します。

mapObj.keys()

サンプルコード

次の例では、4つのキーと値のペアを持つMapオブジェクトを作成し、keys()メソッドで取得したイテレーターをforループと組み合わせて、すべてのキーを画面に出力しています。

<html>
<head>
   <title>JavaScript Example</title>
</head>
<body>
   <script type="text/javascript">
      var mapVar = new Map();
      mapVar.set('1', 'Java');
      mapVar.set('2', 'JavaFX');
      mapVar.set('3', 'HBase');
      mapVar.set('4', 'Neo4j');
      var it = mapVar.keys();
      for(i=0; i<mapVar.size; i++) {
         document.write(it.next().value);
         document.write(" <p> ");
      }
   </script>
</body>
</html>

実行結果

このコードを実行すると、登録された順番どおりにキーが出力されます。

1
2
3
4

モダンな書き方：for...ofループとの組み合わせ

現在のJavaScriptでは、for...ofループを使うことで、より簡潔にキーを取り出せます。

const mapVar = new Map([
  ['1', 'Java'],
  ['2', 'JavaFX'],
  ['3', 'HBase'],
  ['4', 'Neo4j']
]);

for (const key of mapVar.keys()) {
  console.log(key);
}

このようにkeys()メソッドは、マップからキーだけを効率的に列挙したい場合に便利です。値のみを取得したい場合はvalues()、キーと値の両方を取得したい場合はentries()を使用するとよいでしょう。

  1. JavaScriptのMap（マップ）オブジェクトとは？基本的な使い方をサンプルコード付きで解説

    MapオブジェクトとはMap（マップ）オブジェクトは、ES6（ECMAScript 2015）で導入された組み込みオブジェクトの一つで、「キー」と「値」のペアで構成される要素を管理するコレクションです。通常のオブジェクトとよく似ていますが、Mapの大きな特徴は、キーにオブジェクトやプリミティブ値など、あらゆる型の値を使用できる点にあります。さらに、要素は挿入した順序で保持されるため、for...ofループなどを利用して、追加した順番どおりに反復処理を行うことも可能です。Mapオブジェクトの主なメソッドとプロパティメソッド / プロパティ説明new Map(iterable)配列などのイテラブル

  2. JavaScriptのObject.keys().map()とArray.map()の違いを徹底解説

    JavaScriptにおいて、Array.map()は配列の各要素に関数を適用し、その結果を新しい配列として返すメソッドです。一方、オブジェクトには直接map()メソッドが用意されていないため、Object.keys().map()という形で、まずObject.keys()を使ってオブジェクトのキーを配列として取得し、そこにmap()を適用するのが一般的なテクニックとなります。 この記事では、両者の使い方の違いを、実際に動作するサンプルコードと実行結果をもとにわかりやすく解説します。 サンプルコード 以下は、Object.keys().map()とArray.map()の動作を比較できるJa