Master the Reduce in Javascript function: an often underestimated power

This article discusses the

function of JavaScript in depth, which is a method of powerful but often misunderstanding. We will explain why it is better than reduce or map and other methods in some cases, as well as how it performs complex operations efficiently. To illustrate its function, we applied to a practical case: filter handle the list of doctors reduce. Understand Function

The method can simplify the array into a single or more complicated format. The method is to apply a function to each element in the array. Its grammar is as follows: reduce

The parameters of

reduce

Accumulator

<code class="language-javascript">array.reduce((accumulator, currentValue, index, array) => {
    // 逻辑
    return accumulator;
}, initialValue);</code>

: The value accumulated in each step.

reduce Currentvalue

: The elements are currently processed in the array.

• Index : Index (optional) of the current element.
Array
• : The whole array (optional). InitialValue
:: The initial value of: Accumulator.
• Why may be better than
or
• Although and
are very useful for conversion or filter arrays, they are not as functional as
• . The following are some more superior scenes:
Combining operation

: Use

, you can complete the conversion and filtering in one step to avoid multiple iterations of the array. reduce map Complex aggregate filter:

Allows to create objects or complex structures based on array.

map Performance optimization filter: The less the number of iterations, the higher the efficiency of the large array. reduce reduce

Practice compare

Example 1: Use
• to convey reduce Example 2: Use
to convey and filter
• Actual Case: Treatment of the doctor list reduce
Suppose we have a doctor's list, which includes the doctor's name, surname, code and specialist. Here are how to help us perform examples of different operations.
• Doctor list

Operation 1: According to the number of doctors in college statistics

map Operation 2: Create the dictionary of finding a doctor in order

<code class="language-javascript">const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]</code>

reduce Operation 3: Create the full name list of formatting

<code class="language-javascript">const numbers = [1, 2, 3, 4];
const result = numbers.reduce((acc, n) => {
    if (n % 2 === 0) acc.push(n * 2); // 一步完成过滤和转换
    return acc;
}, []);
console.log(result); // [4, 8]</code>

<code class="language-javascript">array.reduce((accumulator, currentValue, index, array) => {
    // 逻辑
    return accumulator;
}, initialValue);</code>

The best practice of reduce

Add the initial value
• : always provides to avoid errors in the air array. initialValue Keep readability
: Although
• powerful, excessive use may make the code complicated. Use it only when other methods are not enough. Record your logic reduce: Explain each step clearly in the comment to facilitate understanding.
• Conclusion Function is not just a simple reduction tool. It can be transformed, filter and reorganize data within one step, and provides unique functions in array operations. Through some exercises, you can perform complex operations in an optimization and elegance. How do you use in the project? Please share your ideas and experiences in the comments, we want to know your skills!

Try to use

and discover all its potential in your project!

The above is the detailed content of Master the Reduce in Javascript function: an often underestimated power. For more information, please follow other related articles on the PHP Chinese website!