An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods

JavaScript's map , reduce and filter methods are powerful tools for processing arrays and can implement complex operations with concise code. Let's take a deeper look at how to use these methods effectively.

Array.map()

Array.map() method updates each value in the array according to the provided transformation function and returns a new array of the same size. It accepts a callback function as an argument to apply the transformation.

 let newArray = oldArray.map((value, index, array) => {
  // ...Conversion logic...
});

Memory skills: MAP: Modify array elements one by one (Morph Array Piece-by-Piece) .

map() method is suitable for situations where all elements need to be preserved but their values ​​need to be modified, unlike filter() method (which may delete elements) or reduce() method (which calculates a single result). map() method allows you to modify array elements one by one. Example:

 [1, 4, 6, 14, 32, 78].map(val => val * 10)
// Results: [10, 40, 60, 140, 320, 780]

In the above example, we multiply each value in the original array [1, 4, 6, 14, 32, 78] by 10. The result is a new array whose values ​​are the conversion result of the corresponding values ​​of the original array: [10, 40, 60, 140, 320, 780] .

Array.filter()

Array.filter() method is used to filter out elements that meet certain conditions from an array and return a new array containing these elements.

It's like a search filter, retaining only elements that meet the criteria.

For example, if we have an array of numeric values ​​and want to filter out values ​​greater than 10, we can write this:

 [1, 4, 6, 14, 32, 78].filter(val => val > 10)
// Results: [14, 32, 78]

If you use map() method, a new array with the same length as the original array is returned, where each element is the result of a conditional conversion (true or false). For example:

 [1, 4, 6, 14, 32, 78].map(val => val > 10)
// Result: [false, false, false, true, true]

filter() method only returns elements with a value of true . Therefore, the length of the resulting array may be less than or equal to the length of the original array.

Memory tips: filter() method is like a filter, some elements will pass, and some will be filtered out.

Suppose there is a group of four dogs who have taken an obedience training course, they all face some challenges and take the final exam. We can represent these dogs with an array of objects:

 const students = [
  { name: "Boops", finalGrade: 80 },
  { name: "Kitten", finalGrade: 45 },
  { name: "Taco", finalGrade: 100 },
  { name: "Lucy", finalGrade: 60 }
];

If the dog's final exam score is above 70, he or she will get a certificate; otherwise, the course will be re-taken. In order to know how many certificates we need to print, we need to write a method to return the passing dog. We can use filter() method to simplify the code:

 const passingDogs = students.filter(student => student.finalGrade >= 70);

/*
passingDogs = [
  { name: "Boops", finalGrade: 80 },
  { name: "Taco", finalGrade: 100 }
];
*/

Boops and Taco pass the exam and will receive a certificate!

Array.reduce()

The reduce() method reduces all values ​​in the array to a single value. It accepts a callback function that contains the accumulator (the value of each element in the accumulated array), the current value, and the index. It can also accept an initial value as the second parameter:

 let finalVal = oldArray.reduce((accumulator, currentValue, currentIndex, array) => {
  // ...Cumulative logic...
}, initialValue);

Let's create a cooking function and a list of ingredients:

 // Ingredient list const ingredients = ['wine', 'tomato', 'onion', 'mushroom'];

// Cooking function const cook = (ingredient) => `cooked ${ingredient}`;

If you want to make these ingredients into a sauce, you can use reduce() method:

 const wineReduction = ingredients.reduce((sauce, item) => {
  return sauce = cook(item) ', ';
}, '');

// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom, "

The initial value (here is '') is important, without it, the first element will not be processed.

To avoid extra spaces at the end, we can use indexes and arrays to apply the transformation:

 const wineReduction = ingredients.reduce((sauce, item, index, array) => {
  sauce = cook(item);
  if (index <p> Memory tips: The <code>reduce()</code> method is like making a sauce, reducing multiple ingredients into a single result.</p>

The above is the detailed content of An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods. For more information, please follow other related articles on the PHP Chinese website!