JavaScriptのMapオブジェクト entries()メソッドの使い方

JavaScriptのmapオブジェクトのentries()メソッドについて記載します。
概要、実際のサンプルコードを交えて構文などの使い方をまとめてみました。

JavaScriptのMapオブジェクトとは？
JavaScriptのmapオブジェクトのentries()概要
JavaScriptのmapオブジェクトのentries()を使ったサンプルコードの紹介
1. entries()を使ったサンプルコード1
2. entries()を使ったサンプルコード2
JavaScript mapオブジェクトの他メソッドについて

JavaScriptのMapオブジェクトとは？

キー（key）とキーに対応する値（value）を対応させて保持するオブジェクトで、Setオブジェクトと併せて、ES6(ES2015)から追加された比較的新しいデータタイプです。
配列に似ており、Javascript でデータを扱う上でよく使うデータ型として知られています。
またJSのオブジェクト型とも非常に似ておりますが、文字列や数値、真偽値（Boolean）をキーとなる値に対して自由に設定できる違いがあります。
JS,TypeScript,Node.jsなどで開発していくうえで重要なデータタイプとなっています。

それでは、次に本題の説明に移ります。

JavaScriptのmapオブジェクトのentries()概要

entries()メソッドは、JavaScriptのmapオブジェクト内のすべてのキー/値ペアを含む配列を返します。

構文、使い方

entries()メソッドは、JavaScriptのMapオブジェクトのキーと値の組み合わせを配列として返します。

構文：

map.entries()

1	map.entries()

使い方：

let myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

let entries = myMap.entries();
console.log(entries); // [['key1', 'value1'], ['key2', 'value2']]

let myMap = new Map();

myMap.set('key1', 'value1');

myMap.set('key2', 'value2');

let entries = myMap.entries();

console.log(entries); // [['key1', 'value1'], ['key2', 'value2']]

引数について

entries()の引数はありません。

返り値について

entries()は、JavaScriptのmapオブジェクトからキーと値のペアを含む配列を返します。

このメソッドを利用した便利なテクニック

JavaScriptのmapオブジェクトのentries()を使うと、キーと値のペアを含む配列を取得できます。

これを使うと、オブジェクトの中身を簡単に反復処理できます。

例えば、オブジェクトの各要素を1つずつ取り出して、新しいオブジェクトに変換することができます。

現場で実際にどのように使われているか

JavaScriptのmapオブジェクトのentries()は、mapオブジェクト内のすべてのキーと値のペアを含む配列を返します。

実際には、mapオブジェクト内のすべてのキーと値を反復処理するために使用されます。

例えば、以下のようなコードを使用して、mapオブジェクト内のすべてのキーと値を反復処理することができます。

let myMap = new Map();
myMap.set(""key1"", ""value1"");
myMap.set(""key2"", ""value2"");

for (let [key, value] of myMap.entries()) {
console.log(key + "" = "" + value);
}

let myMap = new Map();

myMap.set(""key1"", ""value1"");

myMap.set(""key2"", ""value2"");

for (let [key, value] of myMap.entries()) {

console.log(key + "" = "" + value);

}

JavaScriptのmapオブジェクトのentries()と一緒によく使われる処理

for…ofループがよく使われます。

なぜなら、mapオブジェクトのentries()は、キー/値ペアの配列を返すためです。for…ofループを使用すると、これらのキー/値ペアを反復処理することができます。

使用する上での注意点

-mapオブジェクトのentries()は、キーと値のペアを含む配列を返します。
-値を変更すると、mapオブジェクトの内容も変更されます。
-entries()を使用する場合は、for…ofループを使用して配列を反復処理する必要があります。

JavaScriptのmapオブジェクトのentries()と似た処理のJSメソッド、違い

Object.keys()と似ていますが、下記の違いがあります。

Object.entries()は、オブジェクトのキーと値の組み合わせを配列として返します。
Object.keys()は、オブジェクトのキーを配列として返します。

JavaScriptのmapオブジェクトのentries()を使ったサンプルコードの紹介

entries()を使ったサンプルコード1

const map1 = new Map([
  ['name', 'John'],
  ['age', 30],
]);

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

const map1 = new Map([

['name', 'John'],

['age', 30],

]);

for (const [key, value] of map1.entries()) {

console.log(`${key}: ${value}`);

}

name: John age: 30

entries()を使ったサンプルコード2

const map2 = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

const entries = [...map2.entries()];

console.log(entries);

const map2 = new Map([

[1, 'one'],

[2, 'two'],

[3, 'three'],

]);

const entries = [...map2.entries()];

console.log(entries);

[[1, ‘one’], [2, ‘two’], [3, ‘three’]]

JavaScript mapオブジェクトの他メソッドについて

JavaScriptのmapオブジェクトの他メソッドについては、下記記事にもまとめていますので参考にしてみてください

メソッド名	機能	リンク
map new Map()	新しいマップオブジェクトを作成します	JavaScript mapオブジェクト newMapメソッドの使い方
map.prototype.set()	マップ内のキーの値を設定します	JavaScript mapオブジェクト setメソッドの使い方
map.prototype.get()	マップ内のキーの値を取得します	JavaScript mapオブジェクト getメソッドの使い方
map.prototype.clear()	マップからすべての要素を削除します	JavaScript mapオブジェクト clearメソッドの使い方
map.prototype.delete()	キーで指定されたマップ要素を削除します	JavaScript mapオブジェクト deleteメソッドの使い方
map.prototype.has()	キーがマップに存在する場合、trueを返します	JavaScript mapオブジェクト hasメソッドの使い方
map.prototype.forEach()	マップ内の各キー/値ペアのコールバックを呼び出す	JavaScript mapオブジェクト foreachメソッドの使い方
map.prototype.entries()	マップ内の[key、value]ペアを持つイテレーターオブジェクトを返します	JavaScript mapオブジェクト entriesメソッドの使い方
map.prototype.keys()	マップ内にキーを含むイテレーターオブジェクトを返します	JavaScript mapオブジェクト keysメソッドの使い方
map.prototype.values()	マップ内の値のイテレーターオブジェクトを返します	JavaScript mapオブジェクト valuesメソッドの使い方
map size property	マップ要素の数を返します	JavaScript mapオブジェクト sizeプロパティの使い方