JavaScript >> Javascript 文檔 >  >> Tags >> object

如何在 JavaScript 中使用 Reduce 來匯總對像數組

如何使用 JavaScript Array.reduce 方法循環遍歷代表購物車的項目數組,生成具有小計、稅收總計和總計(小計 + 稅收)的對象。

開始使用

因為我們為本教程編寫的代碼是“獨立的”(意味著它不是更大的應用程序或項目的一部分),所以我們將從頭開始創建一個 Node.js 項目。如果您的計算機上尚未安裝 Node.js,請先閱讀本教程,然後再返回此處。

在計算機上安裝 Node.js 後,從計算機上的項目文件夾(例如,~/projects ),為我們的工作創建一個新文件夾:

終端

mkdir reduce

接下來,cd 進入該目錄並創建一個 index.js 文件(這是我們編寫教程代碼的地方):

終端

cd reduce && touch index.js

有了這個,我們就可以開始了。

創建項目數組

我們需要做的第一件事是創建一個代表我們購物車的項目數組。購物車中的每件商品都有四個屬性:

  1. id - 項目的唯一 ID,為整數。
  2. name - 字符串形式的項目名稱。
  3. quantity - 該商品的購買數量為整數。
  4. amount - 每件商品的金額為浮點數(十進制)。

讓我們在文件中添加一個示例數組。隨意播放和更改它(只要確保在每個對像上使用相同的鍵名和值的正確數據類型)。

/index.js

const items = [
  { id: 1, name: 'Coffee Maker', quantity: 3, amount: 29.22 },
  { id: 2, name: 'Toaster Oven', quantity: 1, amount: 129.19 },
  { id: 3, name: 'Chef\'s Knife', quantity: 10, amount: 39.38 },
  { id: 4, name: 'Deep Fryer', quantity: 4, amount: 209.61 },
  { id: 5, name: 'Espresso Machine', quantity: 2, amount: 89.49 },
];

接下來,在我們繼續我們的 reduce 函數之前,讓我們添加另一個變量 taxRate 到我們的文件中,該文件將包含我們要為每個項目計算的稅收百分比:

/index.js

const items = [
  { id: 1, name: 'Coffee Maker', quantity: 3, amount: 29.22 },
  { id: 2, name: 'Toaster Oven', quantity: 1, amount: 129.19 },
  { id: 3, name: 'Chef\'s Knife', quantity: 10, amount: 39.38 },
  { id: 4, name: 'Deep Fryer', quantity: 4, amount: 209.61 },
  { id: 5, name: 'Espresso Machine', quantity: 2, amount: 89.49 },
];

const taxRate = 0.0625; // 6.25%

在這裡,正如評論所暗示的那樣,我們的稅率將為 6.25%。這表示為浮點 0.0625 .

使用 Array.reduce 生成對象

現在我們有了一些要處理的項目,我們準備好放置 .reduce() 在我們的陣列上工作。讓我們先勾勒出我們的電話並討論最終目標。

/index.js

const items = [
  ...
];

const taxRate = 0.0625; // 6.25%

const cart = items.reduce((acc = {}, item = {}) => {
  // We'll handle our calculations here...

  return acc;
}, {
  subtotal: 0,
  tax: 0,
  total: 0
});

console.log(cart);

了解.reduce()的重要事項 就是它是 JavaScript 中的標準數組方法,就像 .forEach().map() . .reduce() 的獨特之處 是它被設計為像它的兄弟方法一樣循環遍歷數組,而不是僅僅循環遍歷數組(如 .forEach() ) 或遍歷數組並返回修改後的數組(如 .map() ),它旨在“將數組縮減為其他內容。”

在烹飪中,“減少”一詞用於將某些東西煮成另一種形式(例如,將黃油與大蒜一起融化以製成簡單的醬汁)。

在這裡,我們想要將我們的項目數組“減少”成一個如下所示的對象:

{
  subtotal: 0,
  tax: 0,
  total: 0,
}

這個想法是,對於我們數組的每次迭代或“循環”,我們將添加到這個對像上的值(subtotal , tax , 和 total ),一旦我們到達數組的末尾,就返回那個對象。

/index.js

const items = [
  ...
];

const taxRate = 0.0625; // 6.25%

const cart = items.reduce((acc = {}, item = {}) => {
  // We'll handle our calculations here...

  return acc;
}, {
  subtotal: 0,
  tax: 0,
  total: 0
});

console.log(cart);

處理添加部分,到 .reduce() 方法我們傳遞了一個函數,該函數在我們的項目數組上的每次迭代或“循環”時調用。向該函數傳遞兩個參數:acc (累加器的縮寫)和 item 當前正在循環的項目。

這裡,acc 是我們從調用 .reduce() 最終返回的對象 (在本教程中,我們的購物車總數)。如果我們看看我們對 .reduce() 的調用 在這裡,我們會注意到我們剛剛描述的函數是我們傳遞的第一個參數,而累加器的起始值 (acc ) 作為第二個值傳遞。雖然我們使用一個對像作為我們的起始值,但這在技術上可以是 any JavaScript 值(例如,字符串、整數或其他數組)。

我們可以期待的是,當我們的 .reduce() 第一次運行(意味著它遍歷數組中的第一個項目,或者在我們的示例中,購物車中的“咖啡機”項目),acc 的值 傳遞給函數的參數傳遞給 .reduce() 是:{ subtotal: 0, tax: 0, total: 0 } .

我們的目標是獲取 acc 並在我們的 items 上為每次迭代或“循環”修改它 數組,使用 item 的當前值 這樣做。

/index.js

const items = [
  ...
];

const taxRate = 0.0625; // 6.25%

const cart = items.reduce((acc = {}, item = {}) => {
  const itemTotal = parseFloat((item.amount * item.quantity).toFixed(2));
  const itemTotalTax = parseFloat((itemTotal * taxRate).toFixed(2));

  // We'll modify acc here...

  return acc;
}, {
  subtotal: 0,
  tax: 0,
  total: 0
});

console.log(cart);

在我們修改我們的 acc 之前 (累加器),我們需要為我們的項目做一些數學和格式化。我們對每個項目的目標是生成兩個總計:項目本身的總計(其 amount 乘以它的 quantity ) 以及該項目的稅額。

要做到這一點,從內到外,我們首先將 item.amount item.quantity 的值 .因為其結果可能會產生一個長十進制數(例如,191.07180001 ) 我們將該計算括在括號中,然後調用 .toFixed(2) 方法。所以很明顯,我們正在這樣做:

(item.amount * item.quantity) // Produces a number which is captured by the parentheses.
(123.2910181).toFixed(2) // Converts the resulting number to a two place decimal number, formatted as a string.

.toFixed(2) 這裡的方法是說“取計算中產生的任何數字並將其轉換為兩位小數。”如果小數點後第三位大於等於 5,則向上取整(例如,123.0157181 將四捨五入為 123.02 ) 而小於 5 的值將向下舍入(例如,123.014571811 將四捨五入為 123.01 ) 由 .toFixed() .

您可能已經猜到了一個小問題:這將我們的數字作為一個字符串,而不是作為一個浮點數(JavaScript 反對者 1,JavaScript 開發者 0),這使得我們難以進行進一步的計算。

為了解決這個問題,我們包裝了 (item.amount * item.quantity).toFixed(2) 調用 parseFloat() 進行計算 顧名思義,它將我們傳遞給它的任何值轉換為 JavaScript 浮點數。所以,如果我們通過類似 "123.02" ,我們將返回一個實際的浮點數 123.02 .

對於 itemTotalTax ,我們使用相同的方法,但是,對於這個數字,我們乘以 itemTotal 我們剛剛用 taxRate 計算 我們之前定義的變量。

/index.js

const items = [
  { id: 1, name: 'Coffee Maker', quantity: 3, amount: 29.22 },
  { id: 2, name: 'Toaster Oven', quantity: 1, amount: 129.19 },
  { id: 3, name: 'Chef\'s Knife', quantity: 10, amount: 39.38 },
  { id: 4, name: 'Deep Fryer', quantity: 4, amount: 209.61 },
  { id: 5, name: 'Espresso Machine', quantity: 2, amount: 89.49 },
];

const taxRate = 0.0625; // 6.25%

const cart = items.reduce((acc = {}, item = {}) => {
  const itemTotal = parseFloat((item.amount * item.quantity).toFixed(2));
  const itemTotalTax = parseFloat((itemTotal * taxRate).toFixed(2));

  acc.subtotal = parseFloat((acc.subtotal + itemTotal).toFixed(2));
  acc.tax = parseFloat((acc.tax + itemTotalTax).toFixed(2));
  acc.total = parseFloat((acc.total + itemTotal + itemTotalTax).toFixed(2));

  return acc;
}, {
  subtotal: 0,
  tax: 0,
  total: 0
});

console.log(cart);

現在是有趣的部分。使用我們的 itemTotalitemTotalTax ,我們準備修改我們的 acc (累加器)。請記住:我們正在更改 acc items 上的每一次迭代或“循環” 數組 .

為此,我們需要做的就是獲取 acc 參數傳遞給我們的函數並修改它。記住:從技術上講 acc 可以包含任何值,但是,我們知道它包含一個 JavaScript 對象,因為我們將默認值作為第二個參數傳遞給 .reduce() .

因此,我們要修改該對象的各個屬性。這裡,我們修改acc.subtotal , acc.tax , 和 acc.total .對於每個,請注意我們將值設置為等於 current 該財產的價值,加上我們剛剛計算的相應總額(項目總額或項目的稅收總額)。

請注意,為了將我們的數字固定到小數點後兩位,我們使用 .toFixed(2) 結合 parseFloat() 我們在對像上設置的每個總數的技巧。

雖然我們只看到最終結果(這將存儲在 cart 我們將調用分配給 items.reduce() 的變量 to),如果我們註銷循環的每次迭代,我們希望看到如下內容:

{ subtotal: 0, tax: 0, total: 0 } // Initial value for acc we set as a default.
{ subtotal: 87.66, tax: 5.48, total: 93.14 }
{ subtotal: 216.85, tax: 13.55, total: 230.4 }
{ subtotal: 610.65, tax: 38.16, total: 648.81 }
{ subtotal: 1449.09, tax: 90.56, total: 1539.65 }
{ subtotal: 1628.07, tax: 101.75, total: 1729.82 }

重要的部分 :請注意,在函數的最底部,我們傳遞給 .reduce() 我們確保 return acc之後 我們已經對其進行了修改。 這是必需的 .這就是 .reduce() 更新 acc 的值 在我們修改之後。

而已!現在,對於循環的每次迭代,我們修改 acc 將最終結果存儲在變量 cart 中 .在我們文件的底部,讓我們添加一個 console.log(cart) 這樣我們就可以在運行代碼時看到輸出了。

要運行它,在我們項目文件夾根目錄的終端中,如果我們運行 node index.js 我們應該會看到類似這樣的註銷:

{ subtotal: 1628.07, tax: 101.75, total: 1729.82 }

總結

在本教程中,我們學習瞭如何使用 Array.reduce() JavaScript 中的方法將對像數組轉換為單個對象。為了演示用法,我們創建了一個虛構的 items 購物車 並使用reduce計算每個項目的總數及其稅率。


Tutorial JavaScript 教程
  1. JavaScript 中的 Facebook URL 驗證 |示例代碼

  2. 使用 React Native 構建 UI 預訂酒店應用程序

  3. 在 60 分鐘內創建個性化區塊鏈

  4. 使用 Nextjs 和 ChakraUI 創建專業的作品集網站

  5. React 教程 - 如何使用多個複選框(新課程推出 - 內有詳細信息)

  6. 使用 i18next 國際化你的 React 應用程序

  7. vuejs 與 crypto-js - AES256 加密 |解密api登錄

  1. 在 Vue 中製作對 SEO 友好的單頁應用程序 (SPA)

  2. JavaScript 工廠函數和 Object.create()

  3. 賽普拉斯:完整的設置指南

  4. NodeJS 與 Python:如何選擇開發 Web 應用後端的最佳技術

  5. D3.js rect在圖表上不顯示

  6. Bootstrap 5 教程:學習如何在沒有 jQuery 的情況下入門

  7. 如何在 mailto 鏈接中動態設置收件人?

  1. 使用 Wails 和 Vue 構建桌面應用程序

  2. 如何使用 react-scroll 製作導航欄

  3. bandDotRand:隨機藝術家生成器

  4. JavaScript 變量 |變量類型 |聲明、範圍、字符串