現代の Web 開発では、アプリケーションのスムーズで応答性の高いデータ操作が重要です。製品のフィルタリング、特定のアイテムの検索、表示用のデータ変換など、効果的なデータ操作によりアプリケーションがスムーズに実行され、優れたユーザー エクスペリエンスが提供されます。

JavaScript には、一般的なタスク用に検索、マップ、フィルターなどの組み込みメソッドがいくつか用意されています。ただし、汎用性の高いreduceメソッドは、これらすべての操作などを実行できるという点で際立っています。 Reduce を使用すると、値の蓄積、配列の変換、ネストされた構造の平坦化、および複雑なデータ変換を簡潔に作成できます。

reduce は他の配列メソッドを複製できますが、単純なタスクにとっては必ずしも最も効率的な選択肢であるとは限りません。マップやフィルターなどのメソッドは特定の目的に最適化されており、単純な操作では高速化できます。ただし、reduce の使用方法を理解すると、コードをより良く理解しやすくするためのさまざまな方法を見つけるのに役立ちます。

この記事では、reduce メソッドについて詳しく説明し、さまざまな使用例を検討し、その可能性を最大化するためのベスト プラクティスについて説明します。

記事の概要

• reduce メソッドを理解する

• JavaScript reduce 構文

• JavaScript Reduce の例

• reduce メソッドのさまざまな使用例

• reduce による JavaScript のマップ、フィルター、検索の置換

• 結論

reduce メソッドを理解する

JavaScript のreduce メソッドは、アキュムレータと配列内の各要素 (左から右) に対して関数を適用して、単一の値に削減します。この単一の値は、文字列、数値、オブジェクト、または配列です。

基本的に、reduce メソッドは配列を受け取り、累積された結果と現在の配列要素を組み合わせる関数を繰り返し適用することによって、それを 1 つの値に圧縮します。

JavaScriptのreduce構文

array.reduce(callback(accumulator, currentValue, index, array), initialValue);

パラメーター：

callback: 各要素で実行する関数。次の引数を取ります:

accumulator: コールバックの最後の呼び出しで以前に返された累積値、または指定されている場合は、initialValue。

currentValue: 配列内で処理されている現在の要素。

index (オプション): 配列内で処理されている現在の要素のインデックス。

array (オプション): 配列reduceが呼び出されました。

initialValue: コールバックの最初の呼び出しの最初の引数として使用する値。 InitialValue が指定されていない場合、配列内の最初の要素 (array[0]) が初期アキュムレータ値として使用され、最初の要素に対してコールバックは実行されません。

Javascript Reduce の例

これは、JavaScriptのreduceメソッドの使用方法の基本的な例です

JavaScript を使用して合計を減らす

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 10

この例では、reduce は配列内の各数値をアキュムレータ (acc) に加算します。初期値0から以下のように処理します:

• (0 1) -> 1

• (1 2) -> 3

• (3 3) -> 6

• (6 4) -> 10

reduce メソッドのさまざまな使用例

reduce メソッドは汎用性が高く、幅広いシナリオに適用できます。ここでは、説明とコード スニペットを含む一般的な使用例をいくつか示します。

オブジェクトの配列を削減する

オブジェクトの配列があり、特定のプロパティを合計したいとします。

const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 750 }
];


const totalPrice = products.reduce((acc, curr) => acc   curr.price, 0);
console.log(totalPrice); // Output: 2250

この例では、各製品オブジェクトの反復を減らし、0 から始まるアキュムレータ (acc) に価格プロパティを追加します。

配列をオブジェクトに変換します

reduce を使用して配列をオブジェクトに変換できます。これは、プロパティ
を使用して配列をグループ化する場合に便利です。

const items = [
  { name: 'Apple', category: 'Fruit' },
  { name: 'Carrot', category: 'Vegetable' },
  { name: 'Banana', category: 'Fruit' }
];

const groupedItems = items.reduce((acc, curr) => {
  if (!acc[curr.category]) {
    acc[curr.category] = [];
  }
  acc[curr.category].push(curr.name);
  return acc;
}, {});

console.log(groupedItems);
// Output: { Fruit: ['Apple', 'Banana'], Vegetable: ['Carrot'] }

この例では、アイテムをカテゴリ別にグループ化します。アイテムごとに、カテゴリがアキュムレータ (acc) にすでに存在するかどうかがチェックされます。そうでない場合は、そのカテゴリの配列を初期化し、項目名を配列に追加します。

配列の配列をフラット化する

reduce メソッドは、以下に示すように、配列の配列を単一の配列にフラット化できます

const nestedArrays = [[1, 2], [3, 4], [5, 6]];

const flatArray = nestedArrays.reduce((acc, curr) => acc.concat(curr), []);
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

ここで、reduce は各ネストされた配列 (curr) をアキュムレーター (acc) に連結します。これは空の配列として開始されます。

配列からの重複の削除

reduce メソッドは、配列から重複を削除するためにも使用できます

const numbers = [1, 2, 2, 3, 4, 4, 5];

const uniqueNumbers = numbers.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]

JavaScript のマップ、フィルター、検索を Reduce で置き換える

reduce メソッドは非常に多用途で、map、filter、find などの他の配列メソッドの機能を複製できます。これが常に最もパフォーマンスの高いオプションであるとは限りませんが、これらのシナリオでどのように Reduce を使用できるかを理解することは役に立ちます。以下は、reduce がこれらのメソッドをどのように置き換えることができるかを示す例です。

Reduce を使用してマップを置換する

map メソッドは、元の配列の各要素に関数を適用して新しい配列を作成します。これはreduce.
で再現できます。

const numbers = [1, 2, 3, 4];

const doubled = numbers.reduce((acc, curr) => {
  acc.push(curr * 2);
  return acc;
}, []);

console.log(doubled); // Output: [2, 4, 6, 8]

この例では、reduce が各数値を反復し、2 倍にして、結果をアキュムレータ配列 (acc) にプッシュします。

Reduce を使用してフィルターを置換する

フィルター メソッドは、提供された関数によって実装されたテストに合格する要素を含む新しい配列を作成します。これはreduce.
でも実現できます。

const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.reduce((acc, curr) => {
  if (curr % 2 === 0) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(evens); // Output: [2, 4, 6]

ここでは、現在の数値 (curr) が偶数であるかどうかのチェックを減らします。そうである場合、その数値はアキュムレータ配列 (acc) に追加されます。

reduce を使用して置換検索を行う

find メソッドは、指定されたテスト関数を満たす配列内の最初の要素を返します。この目的には、reduce も使用できます。これは、配列
内の最初の偶数を見つけるときに便利です。

const numbers = [1, 3, 5, 6, 7, 8];

const firstEven = numbers.reduce((acc, curr) => {
  if (acc !== undefined) return acc;
  return curr % 2 === 0 ? curr : undefined;
}, undefined);

console.log(firstEven); // Output: 6

結論

JavaScript のreduce メソッドは、マップ、フィルター、検索の機能を超え、幅広いデータ操作タスクを処理できる多用途ツールです。単純なタスクでは必ずしも最も効率的であるとは限りませんが、reduce をマスターすると、コードの最適化と簡素化の新たな可能性が広がります。 Reduce を理解して効果的に使用すると、複雑なデータ変換を管理する能力が大幅に向上し、JavaScript ツールキットの重要な部分になります。