JavaScript配列のreduceメソッドの用途は何ですか

reduce()配列要素を 1 つの値に集約するために使用できるJavaScript のメソッドは、引数としてコールバック関数を受け取り、各配列要素に対してその関数を呼び出して、それをアキュムレータ変数に蓄積します。以下にいくつかの実際的な応用例を示します。

配列の合計:reduce() メソッドを使用して配列の要素を加算し、配列の合計を計算します。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue
);
console.log(sum); // 15

配列の平均:reduce() メソッドを使用して配列の要素を追加し、配列の長さで割って配列の平均を計算します。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue
);
const average = sum / numbers.length;
console.log(average); // 3

配列の最大値/最小値:reduce() メソッドを使用して配列要素を現在の最大値/最小値と比較し、配列の最大値/最小値を計算します。

const numbers = [1, 2, 3, 4, 5];
const max = numbers.reduce((accumulator, currentValue) =>
  Math.max(accumulator, currentValue)
);
console.log(max); // 5

const min = numbers.reduce((accumulator, currentValue) =>
  Math.min(accumulator, currentValue)
);
console.log(min); // 1

配列の重複排除:reduce() メソッドを使用して配列を走査し、各要素を新しい配列に追加します。ただし、要素が新しい配列に存在しない場合に限ります。

const numbers = [1, 2, 3, 2, 1, 4, 5];
const uniqueNumbers = numbers.reduce((accumulator, currentValue) => {
      
      
  if (!accumulator.includes(currentValue)) {
      
      
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

オブジェクト属性の合計/平均:reduce() メソッドを使用してオブジェクト配列に属性値を追加し、オブジェクト配列の長さで割って属性の平均値を計算します。

const data = [
  {
      
       name: "Alice", score: 80 },
  {
      
       name: "Bob", score: 75 },
  {
      
       name: "Charlie", score: 90 },
];
const sum = data.reduce(
  (accumulator, currentValue) => accumulator + currentValue.score,
  0
);
const average = sum / data.length;
console.log(average); // 81.67

これらは、reduce() メソッドの一般的なアプリケーションの一部にすぎません。配列の標準偏差や分散の計算など、より複雑な操作にも使用できます。

オブジェクトのプロパティに従って分類するオブジェクト配列を実装する

JavaScript のreduce メソッドを使用して、オブジェクトの配列内のプロパティで並べ替えることができます。サンプルコードは次のとおりです。

const data = [
  {
      
       name: "Alice", age: 20, gender: "female" },
  {
      
       name: "Bob", age: 30, gender: "male" },
  {
      
       name: "Charlie", age: 25, gender: "male" },
  {
      
       name: "David", age: 22, gender: "male" },
  {
      
       name: "Eva", age: 18, gender: "female" },
  {
      
       name: "Frank", age: 40, gender: "male" },
];

const groupedData = data.reduce((acc, obj) => {
      
      
  const key = obj.gender;
  if (!acc[key]) {
      
      
    acc[key] = [];
  }
  acc[key].push(obj);
  return acc;
}, {
      
      });

console.log(groupedData);

上記のコードは、オブジェクト配列内のプロパティに基づいて並べ替えgender、並べ替えられたデータを新しいオブジェクトに保存します。このうち、reduceメソッドの初期値は空の object であり{}、各反復でgender現在のオブジェクトのプロパティに従って分類された配列にオブジェクトが追加されます。最終的に、groupedData変数には次のものが含まれます。

{
      
      
  "female": [
    {
      
       "name": "Alice", "age": 20, "gender": "female" },
    {
      
       "name": "Eva", "age": 18, "gender": "female" },
  ],
  "male": [
    {
      
       "name": "Bob", "age": 30, "gender": "male" },
    {
      
       "name": "Charlie", "age": 25, "gender": "male" },
    {
      
       "name": "David", "age": 22, "gender": "male" },
    {
      
       "name": "Frank", "age": 40, "gender": "male" },
  ]
}

上記のコードは、さまざまな属性に基づいて分類する必要に応じて変更できます。

JavaScript配列のreduceメソッドの用途は何ですか

JavaScript配列のreduceメソッドの用途は何ですか

おすすめ