如何在 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() 相比其他方法的優勢。
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP