reduceメソッドの基本
JavaScriptのreduceメソッドは、配列の全ての要素に対して関数を適用し、単一の出力値を生成します。このメソッドは、配列内の各要素に対して左から右へと関数を適用します。
reduceメソッドの基本的な使用方法は次の通りです：
const array = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(array.reduce(reducer)); // 出力: 10
ここで、reducer関数は2つの引数を取ります：
– accumulator（累積値）：これは配列の各要素に対して関数が適用されるたびに更新されます。
– currentValue（現在の値）：これは配列の現在処理中の要素です。
上記の例では、reduceメソッドは配列の全ての要素を合計します。最初、累積値は配列の最初の要素（ここでは1）で、現在の値は次の要素（ここでは2）です。関数が適用されると、これらの値が加算され、新しい累積値が生成されます。このプロセスが配列の全ての要素に対して繰り返されます。
以上がJavaScriptのreduceメソッドの基本的な使用方法です。このメソッドを使うと、配列の要素を効率的に処理し、単一の結果を得ることができます。
配列の全ての数値を合計する
JavaScriptのreduceメソッドを使って、配列の全ての数値を合計する方法を見てみましょう。以下に基本的な例を示します：
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 出力: 15
この例では、reduceメソッドが配列numbersの全ての要素を合計しています。reduceメソッドの第一引数には累積関数を、第二引数には初期値を指定します。累積関数は2つの引数、accumulator（累積値）とcurrentValue（現在の値）を取ります。
reduceメソッドは、配列の各要素に対して累積関数を適用します。累積関数は、累積値と現在の値を加算し、新しい累積値を返します。このプロセスは、配列の全ての要素に対して左から右へと繰り返されます。
初期値0は、累積値の初期設定です。この値から累積が始まり、配列の全ての要素が加算されます。
以上が、JavaScriptのreduceメソッドを使って配列の全ての数値を合計する方法です。このメソッドは、配列の要素を効率的に処理し、単一の結果を得るための強力なツールです。
オブジェクト配列から特定のプロパティの合計を計算する
JavaScriptのreduceメソッドを使って、オブジェクト配列から特定のプロパティの合計を計算する方法を見てみましょう。以下に基本的な例を示します：
const items = [
{ name: 'apple', quantity: 5 },
{ name: 'banana', quantity: 3 },
{ name: 'orange', quantity: 8 }
];
const totalQuantity = items.reduce((accumulator, item) => accumulator + item.quantity, 0);
console.log(totalQuantity); // 出力: 16
この例では、reduceメソッドがitems配列の全ての要素（オブジェクト）からquantityプロパティの合計を計算しています。reduceメソッドの第一引数には累積関数を、第二引数には初期値を指定します。累積関数は2つの引数、accumulator（累積値）とitem（現在の要素）を取ります。
reduceメソッドは、配列の各要素に対して累積関数を適用します。累積関数は、累積値と現在の要素のquantityプロパティを加算し、新しい累積値を返します。このプロセスは、配列の全ての要素に対して左から右へと繰り返されます。
初期値0は、累積値の初期設定です。この値から累積が始まり、配列の全ての要素のquantityプロパティが加算されます。
以上が、JavaScriptのreduceメソッドを使ってオブジェクト配列から特定のプロパティの合計を計算する方法です。このメソッドは、配列の要素を効率的に処理し、単一の結果を得るための強力なツールです。
応用例: データのフィルタリングと変換
JavaScriptのreduceメソッドは、単に数値を合計するだけでなく、データのフィルタリングや変換にも使用できます。以下に、その応用例を示します：
const products = [
{ name: 'apple', price: 100, category: 'fruit' },
{ name: 'banana', price: 80, category: 'fruit' },
{ name: 'orange', price: 120, category: 'fruit' },
{ name: 'carrot', price: 50, category: 'vegetable' },
{ name: 'lettuce', price: 60, category: 'vegetable' }
];
const fruitTotalPrice = products.reduce((accumulator, product) => {
if (product.category === 'fruit') {
return accumulator + product.price;
} else {
return accumulator;
}
}, 0);
console.log(fruitTotalPrice); // 出力: 300
この例では、reduceメソッドを使って、products配列からcategoryプロパティがfruitであるオブジェクトのpriceプロパティの合計を計算しています。reduceメソッドの第一引数には累積関数を、第二引数には初期値を指定します。累積関数は2つの引数、accumulator（累積値）とproduct（現在の要素）を取ります。
reduceメソッドは、配列の各要素に対して累積関数を適用します。累積関数は、現在の要素のcategoryプロパティがfruitである場合、累積値と現在の要素のpriceプロパティを加算し、新しい累積値を返します。そうでない場合、累積値をそのまま返します。このプロセスは、配列の全ての要素に対して左から右へと繰り返されます。
初期値0は、累積値の初期設定です。この値から累積が始まり、配列の全ての要素のpriceプロパティが加算されます。
以上が、JavaScriptのreduceメソッドを使ってデータのフィルタリングと変換を行う応用例です。このメソッドは、配列の要素を効率的に処理し、単一の結果を得るための強力なツールです。