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ă / filtrare / reducere într-un tweet:
Hartă([?, ?, ?], bucătar)
=> [?, ?, ?]filtru([?, ?, ?], esteVegetarian)
=> [?, ?]reduce([?, ?], mânca)
=>?– Steven Luscher (@steveluscher) 10 iunie 2016
Conţinut
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.
#JavaScript #Map #Reduce #și #Filter #Funcții #matrice #explicate #exemple #cod
JavaScript Map, Reduce și Filter – Funcții de matrice JS explicate cu exemple de cod