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

JavaScriptのMap.entries()関数とは？キーと値のペアを取得する方法を実例付きで解説

Map.entries()は、Mapオブジェクトに格納されたキーと値のペア（エントリー）を順番に取り出すためのメソッドです。このメソッドを呼び出すと、そのMapオブジェクトに対応する新しいイテレーターオブジェクトが返されます。イテレーターからnext()メソッドを呼び出すことで、マップ内の要素を1つずつ取得できます。

なお、各エントリーは「[キー, 値]」という形式の配列として返される点に注意してください。

構文

mapVar.entries()

引数は不要で、Mapオブジェクトに対して直接呼び出します。戻り値として、マップ内の全エントリーを走査できるイテレーターオブジェクトが返ります。

サンプルコード1：すべてのエントリーを順番に取得する

次の例では、entries()で取得したイテレーターに対してnext()を繰り返し呼び出し、マップ内のすべてのキーと値のペアを表示しています。ループ回数はmap.sizeプロパティ（マップの要素数）で制御しています。

<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.entries();
        for(i = 0; i < mapVar.size; i++) {
            document.write(it.next().value);
            document.write(" <p> ");
        }
    </script>
</body>
</html>

実行結果

1,Java

2,JavaFX

3,HBase

4,Neo4j

このように、キーと値がカンマ区切りの配列として順に出力されていることが確認できます。

サンプルコード2：next()メソッドで必要な分だけ取得する

next()メソッドは、呼び出すたびに次のエントリーを1件ずつ返します。以下の例ではnext()を2回だけ呼び出しているため、先頭の2件のみが出力されます。

<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    <script type="text/javascript">
        var mapVar = new Map();
        mapVar.set('1', 'Raju');
        mapVar.set('2', 'Ram');
        mapVar.set('3', 'Rahim');
        mapVar.set('4', 'Robert');
        var it = mapVar.entries();
        document.write(it.next().value);
        document.write("<br>");
        document.write(it.next().value);
    </script>
</body>
</html>

実行結果

1,Raju
2,Ram

補足：for...ofループとの組み合わせ

entries()が返すイテレーターは、for...ofループとも相性が抜群です。以下のように記述すると、すべてのエントリーをより簡潔に処理できます。

const mapVar = new Map();
mapVar.set('1', 'Java');
mapVar.set('2', 'JavaFX');

for (const [key, value] of mapVar.entries()) {
  console.log(key, value);
}

さらに、Mapオブジェクト自体がデフォルトでイテラブル（反復可能）であるため、mapVar.entries()を省略してfor (const [key, value] of mapVar)と書くことも可能です。状況に応じて使い分けると、コードの可読性が向上します。

  1. JavaScriptの関数定義とは？基本構文と書き方を実例で解説

    JavaScriptにおける関数定義は、基本的に以下の要素で構成されます。functionキーワード：関数であることを示す予約語関数名：呼び出し時に使用する識別子引数（パラメータ）：括弧内に記述する入力値波括弧 { }：実行されるJavaScriptの処理（ステートメント）を囲むブロック関数定義の2つの主な書き方JavaScriptでは、大きく分けて「関数宣言」と「関数式」という2つの方法で関数を定義できます。それぞれの特徴は次のとおりです。1. 関数宣言（function宣言）function helloWorld() { alert(HELLO WORLD); }functionキーワ

  2. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ