JavaScriptのObject.entries()とmap()を使ってオブジェクトをキーと値のペアに変換する方法

概要

JavaScriptオブジェクトを「キー」と「値」のペアを持つ配列形式に変換するには、Object.entries()メソッドとmap()メソッドを組み合わせて使用します。

Object.entries()はオブジェクト内の各キーと値のペアを [キー, 値] の形で取得できるため、それをmap()で加工することで、任意の構造を持つ新しい配列を簡単に作成できます。以下に具体的なコード例を示します。

コード例

var studentObject={
   101: "John",
   102: "David",
   103: "Bob"
}
var studentDetails = Object.assign({}, studentObject)
studentDetails = Object.entries(studentObject).map(([studentId,studentName])=>({studentId ,studentName}));
console.log(studentDetails);

プログラムの実行方法

上記のプログラムを実行するには、ターミナルまたはコマンドプロンプトで以下のコマンドを入力します。

node fileName.js

ここでは、ファイル名をdemo113.jsとして保存しているものとします。

出力結果

上記のコードを実行すると、以下のような出力が得られます。

PS C:\Users\Amit\JavaScript-code> node demo113.js
[
   { studentId: '101', studentName: 'John' },
   { studentId: '102', studentName: 'David' },
   { studentId: '103', studentName: 'Bob' }
]

処理の流れの解説

まず、学籍番号（101〜103）をキー、学生の名前を値とするオブジェクトstudentObjectを定義します。続いて、Object.assign()を使ってオブジェクトのコピーを作成した後、Object.entries(studentObject)によって各エントリを[キー, 値]の配列として取得します。

さらにmap()の中で分割代入（Destructuring）を用いてstudentIdとstudentNameを受け取り、それぞれをプロパティとして持つ新しいオブジェクトを生成しています。その結果、元のオブジェクトが「studentId」と「studentName」を持つ個別のオブジェクトの配列へと変換され、扱いやすいデータ構造になります。

このテクニックは、APIレスポンスの整形やデータの一括処理など、オブジェクトを配列形式で操作したい場面で非常に役立ちます。