🪓

【JavaScript】オブジェクトが格納された配列から必要なプロパティのみを抽出する

2024/04/09に公開

目的

以下のような、オブジェクトが格納された配列データから、特定のプロパティのみのデータが欲しい場合があります。

const data = [{
    id: 1,
    name: "Taro",
    age: 20,
    email: "taro@example.com",
    phone: "000-0000-0000"
}, {
    id: 2,
    name: "Hanako",
    age: 30,
    email: "hanako@example.com",
    phone: "111-1111-1111"
}];

例えば、name と mail のみを抽出したものだと以下のようなデータです。

[{
    name: "Taro",
    email: "taro@example.com",
}, {
    name: "Hanako",
    email: "hanako@example.com",
}]

やり方

いろいろ方法はありますが、map と分割代入の仕組みを利用するとシンプルに実装できます。

const result = data.map(({ name, email }) => ({ name, email }));

console.log(result);
// [{
//     name: "Taro",
//     email: "taro@example.com,
// }, {
//     name: "Hanako",
//     email: "hanako@example.com,
// }]

説明

分割代入

分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。

例えば、単純なオブジェクトの場合以下のように利用できます。

const object = { a: 1, b: 2, c: 3 };
const { a, b } = object;
console.log(a); // 1
console.log(b); // 2

ここでは、object オブジェクトからプロパティ a と b を抽出し、それぞれの変数 a と b に代入しています。

map メソッドとの組み合わせ

先ほどのコードを例として見ます。

const result = data.map(({ name, email }) => ({ name, email }));

ここでは、 map メソッドが配列 data の各要素（オブジェクト）に適用されます。
map のコールバック関数の引数で、オブジェクトから name と email プロパティを抽出しています。分割代入は、mapのコールバック関数のパラメータに直接書くことで、配列の各要素に適用されます。

そして、そのままオブジェクトを返すことで期待した結果を得ることができます。
ここでは、オブジェクトのプロパティ名と変数名が同じなため、そのプロパティを短縮形 { name, email } で記述できます。

応用

プロパティ名を変更する

const result = data.map(({ name, email }) => ({
    name,
    mailaddress: email,
}));

// [{
//     name: "Taro",
//     mailaddress: "taro@example.com"
// }, {
//     name: "Hanako",
//     mailaddress: "hanako@example.com"
// }]

値を加工する

const result = data.map(({ name, age, email }) => ({
    name: `${name}さん(${age})`,
    email,
}));

// [{
//     name: "Taroさん(20)",
//     email: "taro@example.com"
// }, {
//     name: "Hanakoさん(30)",
//     email: "hanako@example.com"
// }]

目的

やり方

説明

分割代入

map メソッドとの組み合わせ

応用

Discussion