JavaScript 中物件陣列的總和

Shivam Arora 2023年10月12日 JavaScript JavaScript Object
  1. 在 JavaScript 中使用 reduce 函式對物件陣列的值求和
  2. 在 JavaScript 中使用 map() 和 reduce() 函式對物件陣列的值求和
JavaScript 中物件陣列的總和

陣列可以儲存類似型別的元素，這也包括物件。

在本文中，我們將學習在 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() 方法將陣列縮減為單個值，即陣列中所有值的總和。

此方法有助於在一次通過中同時過濾和對映值。

我們在下面的程式碼中實現了這一點。

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
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe

相關文章 - JavaScript Object