配列とオブジェクトの相互変換

JavaScript では、配列とオブジェクトを相互に変換する場面がよくあります。Object のメソッドや Array のメソッドを組み合わせることで、柔軟なデータ変換が可能です。

オブジェクトから配列への変換

オブジェクトを配列に変換する方法は、何を取り出したいかによって使い分けます。

const user = { name: "田中", age: 25, city: "東京" };

// キーの配列
Object.keys(user);    // ["name", "age", "city"]

// 値の配列
Object.values(user);  // ["田中", 25, "東京"]

// [キー, 値] ペアの配列
Object.entries(user); // [["name", "田中"], ["age", 25], ["city", "東京"]]

メソッド	戻り値
Object.keys()	キーの配列
Object.values()	値の配列
Object.entries()	[キー, 値] の配列

配列からオブジェクトへの変換

[キー, 値] のペアからなる配列をオブジェクトに変換するには、Object.fromEntries() を使用します。

const entries = [
  ["name", "田中"],
  ["age", 25],
  ["city", "東京"]
];

const obj = Object.fromEntries(entries);
console.log(obj); // { name: "田中", age: 25, city: "東京" }

実践的な変換パターン

Object.entries() と Object.fromEntries() を組み合わせると、オブジェクトの変換処理を簡潔に書けます。

const prices = { apple: 100, banana: 80, orange: 120 };

// 全ての価格を1.1倍にする
const taxIncluded = Object.fromEntries(
  Object.entries(prices).map(([key, value]) => [key, value * 1.1])
);

console.log(taxIncluded);
// { apple: 110, banana: 88, orange: 132 }

配列をオブジェクトに変換（reduce 使用）

特定の条件でオブジェクトを構築する場合は、reduce() を使う方法もあります。

const users = [
  { id: 1, name: "田中" },
  { id: 2, name: "山田" },
  { id: 3, name: "佐藤" }
];

// id をキーにしたオブジェクトに変換
const userMap = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});

console.log(userMap);
// { 1: { id: 1, name: "田中" }, 2: { id: 2, name: "山田" }, ... }

Map との変換

Map オブジェクトとの相互変換も簡単に行えます。

// オブジェクト → Map
const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));

// Map → オブジェクト
const backToObj = Object.fromEntries(map);

オブジェクト → Map

Object.entries() で [キー, 値] の配列を作り、Map コンストラクタに渡します。

Map → オブジェクト

Map は iterable で [キー, 値] のペアを返すため、そのまま Object.fromEntries() に渡せます。

フィルタリングとの組み合わせ

オブジェクトのプロパティをフィルタリングする際にも、この変換パターンが活躍します。

const data = { a: 1, b: null, c: 3, d: undefined, e: 5 };

// null や undefined を除外
const cleaned = Object.fromEntries(
  Object.entries(data).filter(([key, value]) => value != null)
);

console.log(cleaned); // { a: 1, c: 3, e: 5 }

配列とオブジェクトの変換を自在に使いこなせると、データ処理の幅が大きく広がります。