如何在 JavaScript 中對累加器和物件的每個鍵應用函式?


在 JavaScript 中,我們可以使用 reduce() 方法對累加器和物件的每個鍵(從左到右)應用函式。

reduce() 方法被呼叫在一個給定的陣列上,並以回撥函式作為其第一個引數。請參考 Array reduce() 獲取更多詳細資訊。讓我們看看此方法的語法。

語法

array array.reduce(callback[, initialValue]);

引數

  • callback − 在陣列中的每個值上執行的函式。

  • initialValue − 用作回撥函式第一次呼叫時的第一個引數的物件。

callback 函式傳遞四個引數

  • 第一個引數是累加器,它是前一個回撥函式呼叫的結果,或者如果是第一次呼叫,則是初始值。

  • 第二個引數是正在處理的當前鍵。

  • 第三個引數是正在處理的當前值。

  • 第四個引數是正在處理的當前索引。

然後,reduce() 方法返回累加器。

應用 reduce() 方法

讓我們看一個簡單的例子,瞭解 reduce() 方法是如何工作的。

我們有一個物件陣列,每個物件都有一個 name 和一個 value 屬性。我們使用 reduce() 方法來累加這些值。

我們可以透過傳入一個回撥函式來做到這一點,該函式接收累加器(前一個回撥函式呼叫的結果)和正在處理的當前值。然後,回撥函式返回累加器加上當前值。

示例

<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
      let sum = arr.reduce((acc, cur) => acc + cur.value, 0);
      document.getElementById("result").innerHTML = sum;
   </script>
</body>
</html>

在上面的程式中,我們有一個物件陣列,每個物件都有一個 name 和一個 value 屬性。我們使用 reduce() 方法來累加這些值。

我們傳入一個回撥函式 ((acc, cur) => acc + cur.value),它接收累加器 acc(前一個回撥函式呼叫的結果)和正在處理的當前值 cur。然後,回撥函式返回累加器加上當前值。

然後,reduce() 方法返回累加器,它是所有值的總和。

使用 reduce() 的優勢

使用 reduce() 的一個優點是它可以使您的程式碼更具可讀性。

例如,如果我們想累加上面陣列中的值,我們也可以使用 for 迴圈。

示例

<html>
<head>
   <title>Using for loop</title>
</head>
<body>
   <h2> Using for loop to sum the values of objects in an array</h2>
   <div id="result"></div>
   <script>
      let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
      let sum = 0;
      for (let i = 0; i < arr.length; i++) {
         sum += arr[i].value;
      }
      document.getElementById("result").innerHTML = sum
   </script>
</body>
</html>

上面的 reduce() 方法和 for 迴圈都實現了相同的結果。但是,reduce() 方法更簡潔且更易於閱讀。

使用 reduce() 的另一個優點是它可以用於並行處理資料。

例如,如果我們有一個物件陣列,每個物件都有一個 name 和一個 value 屬性,並且我們想並行處理每個物件,我們可以使用 map() 方法。

let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let results = arr.map(obj => { // do something with obj });

但是,如果我們想按順序處理資料,我們可以使用 reduce() 方法。

let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let result = arr.reduce((acc, obj) => { // do something with obj and return the result }, initialValue);

結論

在本教程中,我們瞭解瞭如何使用 reduce() 方法對累加器和物件的每個鍵應用函式。我們還了解了一些使用 reduce() 相比其他方法的優勢。

更新於: 2022-07-02

446 次檢視

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.