JavaScript: オブジェクトの配列からプロパティの値を配列として抽出する方法

2024-04-02

オブジェクトの配列からプロパティの値を配列として抽出する方法

map メソッドは、配列の各要素に対して関数を適用し、新しい配列を生成します。この方法は簡潔で分かりやすく、最もよく使われます。

const objects = [
  { name: "John", age: 30 },
  { name: "Mary", age: 25 },
  { name: "Bob", age: 40 },
];

const ages = objects.map(object => object.age);

console.log(ages); // [30, 25, 40]

forEach メソッドは、配列の各要素に対して関数を呼び出します。map メソッドと比べて少し冗長ですが、処理の流れをより細かく制御できます。

const objects = [
  { name: "John", age: 30 },
  { name: "Mary", age: 25 },
  { name: "Bob", age: 40 },
];

const ages = [];

objects.forEach(object => {
  ages.push(object.age);
});

console.log(ages); // [30, 25, 40]

ループを使用する

map メソッドや forEach メソッドよりも古い方法ですが、シンプルなケースでは有効です。

const objects = [
  { name: "John", age: 30 },
  { name: "Mary", age: 25 },
  { name: "Bob", age: 40 },
];

const ages = [];

for (const object of objects) {
  ages.push(object.age);
}

console.log(ages); // [30, 25, 40]

簡潔で分かりやすいコードを求める場合は、map メソッドを使用するのがおすすめです。
処理の流れをより細かく制御したい場合は、forEach メソッドを使用します。
シンプルなケースの場合は、ループを使用しても問題ありません。

上記以外にも、以下のような方法があります。

reduce メソッドを使用する
Lodashなどのライブラリを使用する

これらの方法は、より複雑なケースで役立ちます。

オブジェクトの配列からプロパティの値を配列として抽出するには、いくつかの方法があります。それぞれの方法のメリットとデメリットを理解し、状況に応じて適切な方法を選択しましょう。

// オブジェクトの配列
const objects = [
  { name: "John", age: 30 },
  { name: "Mary", age: 25 },
  { name: "Bob", age: 40 },
];

// map メソッドを使用する
const ages1 = objects.map(object => object.age);

// forEach メソッドを使用する
const ages2 = [];

objects.forEach(object => {
  ages2.push(object.age);
});

// ループを使用する
const ages3 = [];

for (const object of objects) {
  ages3.push(object.age);
}

// 結果を出力する
console.log(ages1); // [30, 25, 40]
console.log(ages2); // [30, 25, 40]
console.log(ages3); // [30, 25, 40]

このコードを実行すると、以下の結果が出力されます。

[30, 25, 40]
[30, 25, 40]
[30, 25, 40]

以下のコードは、reduce メソッドや Lodash ライブラリを使用して、オブジェクトの配列からプロパティの値を配列として抽出する方法の例です。

reduce メソッドを使用する

const ages4 = objects.reduce((acc, object) => {
  acc.push(object.age);
  return acc;
}, []);

console.log(ages4); // [30, 25, 40]

Lodash ライブラリを使用する

const _ = require("lodash");

const ages5 = _.map(objects, "age");

console.log(ages5); // [30, 25, 40]

これらのコードは、サンプルとして参考にしてください。

オブジェクトの配列からプロパティの値を配列として抽出するその他の方法

filter メソッドと map メソッドを組み合わせることで、条件に合致するオブジェクトのみの配列を作成し、そこからプロパティの値を抽出することができます。

const objects = [
  { name: "John", age: 30, gender: "male" },
  { name: "Mary", age: 25, gender: "female" },
  { name: "Bob", age: 40, gender: "male" },
];

const maleAges = objects
  .filter(object => object.gender === "male")
  .map(object => object.age);

console.log(maleAges); // [30, 40]

このコードでは、まず filter メソッドを使用して性別が "male" のオブジェクトのみの配列を作成します。次に、map メソッドを使用して、その配列から年齢の値のみを抽出します。

const objects = [
  { name: "John", age: 30 },
  { name: "Mary", age: 25 },
  { name: "Bob", age: 40 },
];

const ages = [...objects].reduce((acc, object) => {
  acc.push(object.age);
  return acc;
}, []);

console.log(ages); // [30, 25, 40]

このコードでは、まずスプレッド構文を使用して、オブジェクトの配列を個別のオブジェクトに展開します。次に、reduce メソッドを使用して、展開されたオブジェクトの年齢の値を配列に格納します。

自作関数

上記の方法でうまくいかない場合は、自作関数を使用して、オブジェクトの配列からプロパティの値を抽出することができます。

function extractAges(objects) {
  const ages = [];

  for (const object of objects) {
    ages.push(object.age);
  }

  return ages;
}

const objects = [
  { name: "John", age: 30 },
  { name: "Mary", age: 25 },
  { name: "Bob", age: 40 },
];

const ages = extractAges(objects);

console.log(ages); // [30, 25, 40]