AngularJS の高度な配列の合計

AngularJS では、配列プロパティの合計は一般的なタスクになる場合があります。基本的なアプローチには、配列を反復処理してプロパティ値を蓄積することが含まれます。ただし、複数の配列やさまざまなプロパティ名に直面すると、この方法は退屈になります。

これに対処するには、配列プロパティの便利な合計を可能にする、より柔軟で再利用可能なソリューションが必要です。これは、配列値を集約する強力な方法を提供する、reduce() メソッドを使用して実現できます。

次の例を考えてみましょう。

$scope.traveler = [
    { description: 'Senior', Amount: 50},
    { description: 'Senior', Amount: 50},
    { description: 'Adult', Amount: 75},
    { description: 'Child', Amount: 35},
    { description: 'Infant', Amount: 25 },
];

reduce() を使用して traveler 配列の 'Amount' プロパティを合計するには、次のようにメソッドを作成できます:

$scope.sum = function(items, prop){
    return items.reduce( function(a, b){
        return a   b[prop];
    }, 0);
};

このメソッドでは、2 つの引数 (配列の累積値 (a) と現在の要素 (b)) を受け取るコールバック関数で、reduce() メソッドを使用します。コールバック内で、合計 (prop) するプロパティにアクセスし、それを累積された値に追加します。

このメソッドをトラベラー配列に適用するには、次の操作を行うことができます:

$scope.travelerTotal = $scope.sum($scope.traveler, 'Amount');

このアプローチを使用すると、AngularJS 内の任意の配列のプロパティ値を簡単に合計できます。 応用。再利用可能なメソッドを定義することで、冗長なコードを回避し、合計計算の一貫性を確保します。