How to apply a function to each key of an accumulator and object in JavaScript?-JS Tutorial-php.cn

How to apply a function to each key of an accumulator and object in JavaScript?

王林

Release： 2023-08-25 17:33:06

forward

1406 people have browsed it

如何在 JavaScript 中对累加器和对象的每个键应用函数？

In JavaScript, we can use the reduce() method to apply a function to the accumulator and each key of the object (from left to right).

The reduce() method takes a given array and accepts a callback function as its first parameter. See array reduce() for more details. Let's take a look at the syntax of this method.

Syntax

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

Copy after login

Parameters

Callback - Function executed for each value in the array.

initialValue - The object used as the first argument for the first invocation of the callback.

Callback< /strong> The function passes four parameters

The first parameter is the accumulator, which is the previous callback function The result of the call, or the initial value if this is the first call.
The second parameter is the key currently being processed.
The third parameter is the key currently being processed. The value being processed.
The fourth parameter is the index currently being processed.

Then the reduce() method returns the accumulator.

Applying the reduce() method

Let’s look at a simple example to understand how the reduce() method works.

We have an array of objects, each object has a name and a value attribute. We use the reduce() method to sum the values.

We can achieve this by passing in a callback function that receives the accumulator (result of the previous callback function call) and the current value to handle. The callback function then returns the accumulator plus the current value.

Example

<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>

Copy after login

In the above program, we have an array of objects, each object has a name and a value attribute. We use the reduce() method to sum the values.

We pass in a callback function ((acc, cur) => acc cur.value), which accepts the accumulator acc being processed (the result of the previous callback function call) and Current value cur. The callback function then returns the accumulator plus the current value.

Then, the reduce() method returns the accumulator, which is the sum of all values.

< h2>Advantages of using reduce()
One advantage of using reduce() is that it can make your code more readable.
For example, if we want to sum the values in the above array, we can also use a for loop.
Example
<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>
Copy after login
The above reduce() method and for loop both achieve the same result. However, the reduce() method is more concise and easier to read.
Another advantage of using reduce() is that it can be used to process data in parallel.
For example, if we have an array of objects, each object has an name and a value attribute, and we want to process each object in parallel, we can use the map () method.
let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }]; let results = arr.map(obj => { // do something with obj });
Copy after login
However, if we want to process the data sequentially, we can use the reduce() method.
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);
Copy after login
Conclusion

In this tutorial, we saw how to apply a function on an accumulator and each key of an object using the reduce() method. We also saw some advantages of using reduce() over other methods.
The above is the detailed content of How to apply a function to each key of an accumulator and object in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!