JavaScriptでは、オブジェクトの配列から特定のプロパティを抽出して、新しい配列を作成する操作がよく行われます。例えば、ユーザーのリストから名前だけを取り出して配列に変換したり、複数のプロパティを別の形式に変換したりします。
この記事では、オブジェクトの配列から特定のプロパティを抽出して新しい配列を作成する方法について、サンプルコードを使いながら、わかりやすく解説していきます。
mapメソッドを使ってオブジェクトの配列を配列に変換する方法
mapメソッドは配列の各要素に関数を適用し、その結果を新しい配列として返すJavaScriptのメソッドです。
例えば、以下に示すようなオブジェクトの配列があるとします。
const users = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 28 },
{ id: 3, name: 'Bob', age: 22 },
];このオブジェクトの配列は、3つのオブジェクトで構成されています。それぞれのオブジェクトには、id、name、ageというプロパティが含まれています。
このオブジェクトの配列から特定のプロパティだけを抽出して、新しい配列を作成したい場合、mapメソッドを使用します。
特定のプロパティを抽出して新しい配列に変換する方法
例えば、オブジェクトの配列（users）からnameプロパティだけを抽出して、新しい配列を作成したい場合は、次のようにします。
const users = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 28 },
{ id: 3, name: 'Bob', age: 22 },
];
const names = users.map((user) => user.name);
console.log(names);
// ['John', 'Jane', 'Bob']上記のサンプルコードは、mapメソッドを使用して、オブジェクトの配列（users）内の各オブジェクトからnameプロパティを抽出し、新しい配列namesを作成しています。
複数のプロパティを抽出して新しい配列に変換する方法
例えば、オブジェクトの配列（users）からnameプロパティとageプロパティを抽出して、新しい配列を作成したい場合は、次のようにします。
const users = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 28 },
{ id: 3, name: 'Bob', age: 22 },
];
const nameAndAgeArray = users.map((user) => ({
name: user.name,
age: user.age,
}));
console.log(nameAndAgeArray);
// [
// { name: 'John', age: 25 },
// { name: 'Jane', age: 28 },
// { name: 'Bob', age: 22 }
// ]上記のサンプルコードは、mapメソッドを使用して、オブジェクトの配列（users）内の各オブジェクトからnameプロパティとageプロパティを抽出し、新しい配列nameAndAgeArrayを作成しています。
本記事のまとめ
この記事ではJavaScriptの『mapメソッド』を使って、オブジェクトの配列から特定のプロパティを抽出し、新しい配列を作成する方法を学びました。
お読み頂きありがとうございました。