JavaScript Map, Reduce și Filter – Funcții de matrice JS explicate cu exemple de cod

Hartă, reducere și filtrare sunt toate metode matrice în JavaScript. Fiecare va itera pe o matrice și va efectua o transformare sau calcul. Fiecare va returna o nouă matrice bazată pe rezultatul funcției. În acest articol, veți afla de ce și cum să le utilizați pe fiecare.

Iată un rezumat distractiv de Steven Luscher:

Hartă

map() metoda este utilizată pentru a crea o nouă matrice dintr-una existentă, aplicând o funcție fiecăruia dintre elementele primei matrice.

Sintaxă

var new_array = arr.map(function callback(element, index, array) {
    // Return value for new_array
}[, thisArg])

În callback, doar matricea element este necesară. De obicei, se efectuează o anumită acțiune asupra valorii și apoi se returnează o nouă valoare.

Exemplu

În exemplul următor, fiecare număr dintr-o matrice este dublat.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8]

Filtru

filter() metoda ia fiecare element dintr-un tablou și aplică o declarație condițională împotriva acestuia. Dacă acest condițional returnează adevărat, elementul este împins în matricea de ieșire. Dacă condiția revine falsă, elementul nu este împins în matricea de ieșire.

Sintaxă

var new_array = arr.filter(function callback(element, index, array) {
    // Return true or false
}[, thisArg])

Sintaxa pentru filter este similar cu map, cu excepția faptului că funcția de apel invers ar trebui să revină true pentru a păstra elementul sau false in caz contrar. În callback, numai element este necesară.

Exemple

În exemplul următor, numerele impare sunt „filtrate”, lăsând doar numere pare.

const numbers = [1, 2, 3, 4];
const evens = numbers.filter(item => item % 2 === 0);
console.log(evens); // [2, 4]

În exemplul următor, filter() este folosit pentru a obține toți elevii ale căror note sunt mai mari sau egale cu 90.

const students = [
  { name: 'Quincy', grade: 96 },
  { name: 'Jason', grade: 84 },
  { name: 'Alexis', grade: 100 },
  { name: 'Sam', grade: 65 },
  { name: 'Katie', grade: 90 }
];

const studentGrades = students.filter(student => student.grade >= 90);
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]

Reduce

reduce() metoda reduce o serie de valori la o singură valoare. Pentru a obține valoarea de ieșire, rulează o funcție de reducere pe fiecare element al matricei.

Sintaxă

arr.reduce(callback[, initialValue])

callback argumentul este o funcție care va fi apelată o dată pentru fiecare element din matrice. Această funcție ia patru argumente, dar adesea sunt folosite doar primele două.

• acumulator – valoarea returnată a iterației anterioare
• Valoarea curentă – elementul curent din matrice
• index – indicele articolului curent
• matrice – matricea originală pe care a fost apelat reduce
• initialValue argumentul este opțional. Dacă este furnizat, va fi folosit ca valoare inițială a acumulatorului în primul apel către funcția de apel invers.

Exemple

Următorul exemplu adaugă fiecare număr împreună într-o serie de numere.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function (result, item) {
  return result + item;
}, 0);
console.log(sum); // 10

În exemplul următor, reduce() este folosit pentru a transforma o matrice de șiruri într-un singur obiect care arată de câte ori apare fiecare șir în matrice. Observați acest apel pentru a reduce trecerea unui obiect gol {} dupa cum initialValue parametru. Aceasta va fi utilizată ca valoare inițială a acumulatorului (primul argument) transmis funcției de apel invers.

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];

var petCounts = pets.reduce(function(obj, pet){
    if (!obj[pet]) {
        obj[pet] = 1;
    } else {
        obj[pet]++;
    }
    return obj;
}, {});

console.log(petCounts); 

/*
Output:
 { 
    dog: 2, 
    chicken: 3, 
    cat: 1, 
    rabbit: 1 
 }
 */

Explicație video

Vedeți videoclipul de mai jos de pe canalul YouTube Routech.org. Acoperă metodele de matrice discutate, plus încă câteva.