JavaScriptのentriesの使い方！【配列・Map】

JavaScriptで配列やMapオブジェクトのキーと値のペアを取得するために使用するentriesメソッドについて書いています。
entriesメソッドは、for...ofループなどを使って、キーと値を処理する場合に便利です。

実際に動くサンプルを使って、以下の操作を解説します。

entriesメソッドの基本的な使い方（配列）

配列に対してentriesメソッドを使用すると、各要素のインデックス（キー）と値のペアを格納した新しいIteratorオブジェクトが返されます。

const fruits = ['apple', 'banana', 'orange'];
const iterator = fruits.entries();

console.log(iterator.next().value); // 結果：[0, 'apple']
console.log(iterator.next().value); // 結果：[1, 'banana']
console.log(iterator.next().value); // 結果：[2, 'orange']
console.log(iterator.next().done);  // 結果：true (すべての要素を処理済み)

最初にfruits配列を作成しています。

そしてfruits.entriesでIteratorオブジェクトを取得し、iterator.next().valueで各要素のペアを順に取得しています。
iterator.next()で呼び出されるたびに、配列の要素(キーと値)が取得できます。

doneプロパティがtrueになると、すべての要素が処理済みであることを示します。

entriesメソッドの基本的な使い方（Mapオブジェクト）

Mapオブジェクトに対してもentriesメソッドを使用できます。
この場合、キーと値のペアがそのままIteratorオブジェクトとして返されます。

const fruitMap = new Map([
  ['apple', 100],
  ['banana', 200],
  ['orange', 150]
]);

const iterator = fruitMap.entries();

console.log(iterator.next().value); // 結果：['apple', 100]
console.log(iterator.next().value); // 結果：['banana', 200]
console.log(iterator.next().value); // 結果：['orange', 150]
console.log(iterator.next().done);  // 結果：true (すべての要素を処理済み)

fruitMap変数にMapを作成しました。
そして、fruitMapからentriesを呼び出しています。

結果はコメントにある通りです。
Mapオブジェクトの場合、キーと値がそのままペアとして取得できます。

for...ofループでの使用例

entriesメソッドは、for...ofループと組み合わせて使用すると、キーと値を効率的に処理できます。

const fruits = ['apple', 'banana', 'orange'];

for (const [index, fruit] of fruits.entries()) {
  console.log(`Index: ${index}, Fruit: ${fruit}`);
}
// 結果：
// Index: 0, Fruit: apple
// Index: 1, Fruit: banana
// Index: 2, Fruit: orange

fruits変数に配列を作成して、次の処理でfor...ofでループしています。
for...ofループでは、entriesメソッドが返すIteratorオブジェクトから、各要素のペアを[index, fruit]のように直接取り出すことができます。

entriesメソッドを使うメリット

entriesメソッドを使う主なメリットは以下のとおりです。

• キーと値のペアを効率的に取得: 配列やMapオブジェクトから、キーと値のペアを簡単に取得できます。
• for...ofループとの連携: for...ofループと組み合わせて、キーと値を効率的に処理できます。
• 柔軟な処理: Iteratorオブジェクトとして返されるため、next()メソッドなどを使って柔軟な処理が可能です。

JavaScriptのentriesメソッドの使い方まとめ

今回はJavaScriptのentriesメソッドの使い方について解説しました。
記事の内容をまとめます。