導入

JavaScript の入門コースを受講し、配列のさまざまなメソッドすべてについて学びます。私は、reduce メソッドの真の力を完全には理解していませんでしたが、2 回目に戻って初めて、このメソッドが本当に便利であることに気づきました。この記事によって、この方法がどのように機能するのか、いつ使用するのかがより明確になることを願っています。

方法

Array.prototype.reduce(callbackFunction)
Array.prototype.reduce(callbackFunction、initialValue)

この方法は具体的に何をするのでしょうか?

reduce() メソッドは、コールバック関数を使用して配列の各要素を処理し、結果を 1 つの値に累積します。初期値が指定されている場合は、それが開始点として使用されます。それ以外の場合は、最初の配列要素が使用され、反復は 2 番目の要素から開始されます。

コールバック関数のパラメータ

callbackFunction(アキュムレータ、currentValue、currentIndex、配列){}

アキュムレータ

前の反復からの累積結果、または指定されている場合は初期値。

現在の値

処理中の現在の配列要素の値。

現在のインデックス

現在の要素のインデックス。初期値が指定されている場合は 0 から始まり、それ以外の場合は 1 から始まります。

配列

reduce() メソッドが実行されている配列。

初期値

初期値なしでreduceメソッドを使用する場合、コールバック関数は配列の最初の要素を取得し、それをアキュムレータとして初期化し、配列の残りの部分を反復処理します。

ユースケース

reduce メソッドを使用する最も一般的な例は、配列の合計です。

const ages = [23, 15, 45, 13, 66, 54, 38];
let sumOfAges = ages.reduce(function(sumOfAges, currentAge){
    sumOfAges = sumOfAges   currentAge;
    return sumOfAges;
}); // 254

はい、これはまさにreduceメソッドの利点であり、得意なことですが、それ以外にもできることはたくさんあります。

グループの最大年齢を取得する

const ages = [23, 15, 45, 13, 66, 54, 38];
let oldestPerson = ages.reduce(function(maxAge, currentAge){
    if(currentAge>maxAge){
        maxAge = currentAge;
    }
    return maxAge;
}); // 66

ここでは、reduce メソッドを使用して、配列内で発生した最高年齢を保存し、配列全体を反復処理した後にその値を返します。

配列内の重複の削除

const store = ['apple', 'pear', 'apple', 'orange', 'apple', 'pear'];
let itemCatalogue = store.reduce(function(uniqueStoreItems, currentItem){
    if(!uniqueStoreItems.includes(currentItem)){
        uniqueStoreItems.push(currentItem);
    }
    return uniqueStoreItems;
}, []); // ['apple', 'pear', 'orange']

重要 ここで、reduce メソッドの初期値として空の配列 [] を指定していることに注意してください。これは、アキュムレータが配列になり、コールバック関数がその配列にまだ存在しない項目のみをプッシュすることを意味します。その結果、重複を削除しました。

配列内の項目数の取得

const store = ['apple', 'pear', 'apple', 'orange', 'apple', 'pear'];
let itemCount = store.reduce(function(count, currentItem){
    count[currentItem] = (count[currentItem] || 0)   1;
    return count;
}, {}); // { apple: 3, pear: 2, orange: 1 }

重要 ここで注意すべきことは、初期値は空のオブジェクトであるということです。ストア内のアイテムを確認するときに、そのアイテムにカウントを入力します。

結論

まず、ここまで読んでいただいた方、読んでいただきありがとうございます!この記事を書く私の主な目的は、reduce メソッドについての理解をしっかりとすることでした。ここで何か新しいことを学んでいただければ幸いです。 reduce メソッドには本当に素晴らしいアプリケーションがたくさんあり、とても使いやすいです。このメソッドに関する他の使用例や楽しいトリックはありますか?ぜひ知りたいです！