JavaScript のオブジェクトの配列の合計
Shivam Arora
2023年10月12日
配列には同様のタイプの要素を格納できます。これにはオブジェクトも含まれます。
この記事では、JavaScript でオブジェクトの配列の値を合計するためのより優れた効率的な方法を学習します。
この例では、次の配列内のすべてのオブジェクトの Amount を合計します。
fruits = [
{description: 'orange', Amount: 50},
{description: 'orange', Amount: 50},
{description: 'apple', Amount: 75},
{description: 'kiwi', Amount: 35},
{description: 'watermelon', Amount: 25},
];
JavaScript で reduce 関数を使用してオブジェクトの配列の値を合計する
sum() という関数を作成し、reduce() メソッドを使用して、配列を単一の値に縮小できます。これは、配列内のすべての値の合計です。
このメソッドは、1 回のパスで値のフィルタリングとマッピングを同時に行うのに役立ちます。
これを次のコードで実装します。
class fruitCollection extends Array {
sum(key) {
return this.reduce((a, b) => a + (b[key] || 0), 0);
}
}
const fruit = new fruitCollection(
...[{description: 'orange', Amount: 50},
{description: 'orange', Amount: 50},
{description: 'apple', Amount: 75},
{description: 'kiwi', Amount: 35},
{description: 'watermelon', Amount: 25},
]);
console.log(fruit.sum('Amount'));
出力：
235
JavaScript で map() および reduce() 関数を使用してオブジェクトの配列の値を合計する
map() 関数は、配列内のすべての要素の値をそれぞれ変更することにより、新しい配列を作成します。次に、フィルター関数を使用して、そのカテゴリーに該当しない値を削除します。最後に、reduce() 関数はすべての値を受け取り、必要な合計である単一の値を返します。
例えば、
fruits = [
{description: 'orange', Amount: 50},
{description: 'orange', Amount: 50},
{description: 'apple', Amount: 75},
{description: 'kiwi', Amount: 35},
{description: 'watermelon', Amount: 25},
];
const sumall =
fruits.map(item => item.amount).reduce((prev, curr) => prev + curr, 0);
console.log(sumall);
出力：
235