Știind cum să iterați rapid printr-o matrice și să numărați obiecte este înșelător de simplu. length()
metoda vă va spune numărul total de valori din matrice, dar ce se întâmplă dacă doriți să numărați acele valori în funcție de anumite condiții?
De exemplu, imaginați-vă că aveți o matrice ca aceasta:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
Și doriți doar să numărați numărul de obiecte cu status
setat la '0'
.
La fel ca în aproape orice din programare, există o serie de modalități de a face acest lucru. Vom parcurge câteva dintre metodele comune de mai jos.
Folosește o for
buclă
Probabil cel mai simplu mod ar fi să declare a counter
variabilă, buclați prin matrice și iterați counter
doar dacă status
este egal cu '0'
:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
let counter = 0;
for (let i = 0; i < storage.length; i++) {
if (storage[i].status === '0') counter++;
}
console.log(counter); // 6
Puteți simplifica puțin acest lucru folosind un for...of
buclă:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
let counter = 0;
for (const obj of storage) {
if (obj.status === '0') counter++;
}
console.log(counter); // 6
De asemenea, puteți crea o funcție pentru a face același lucru dacă aveți alte matrice de obiecte de numărat condiționat:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
function statusCounter(inputs) {
let counter = 0;
for (const input of inputs) {
if (input.status === '0') counter += 1;
}
return counter;
}
statusCounter(storage); // 6
Folosiți metode de matrice
JavaScript include o grămadă de metode utile atunci când lucrați cu tablouri. Fiecare poate fi înlănțuit într-o matrice și treceți parametri diferiți pentru a lucra în timp ce iterați prin elementele din matrice.
Cele două la care ne vom uita sunt filter()
și reduce()
.
filter()
Metoda de filtrare face exact asta – iterează prin fiecare element din matrice și filtrează toate elementele care nu îndeplinesc condițiile pe care le furnizați. Apoi returnează o nouă matrice cu toate elementele care au revenit adevărat în funcție de condiția (condițiile) dvs.
De exemplu:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
const count = storage.filter(function(item){
if (item.status === 0) {
return true;
} else {
return false;
}
});
/*
[
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' }
]
*/
Acum că ați filtrat obiectul cu status: '1'
, sună doar la length()
metoda pe noua matrice pentru a obține numărul total de obiecte cu status: '1'
:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
const count = storage.filter(function(item){
if (item.status === 0) {
return true;
} else {
return false;
}
}).length; // 6
Dar acest lucru poate fi scurtat foarte mult cu sintaxa ES6:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
const count = storage.filter(item => item.status === '0').length; // 6
reduce()
Gândiți-vă la reduce()
metoda ca un cuțit armat elvețian – este extrem de flexibilă și vă permite să luați o matrice ca intrare și să o transformați în aproape orice. Chiar mai bine, cum ar fi filter()
, această metodă returnează o nouă matrice, lăsând originalul neschimbat.
Puteți citi mai multe despre reduce()
în acest articol.
În scopurile noastre, dorim să luăm o matrice, să examinăm conținutul acesteia și să producem un număr. Iată o modalitate simplă de a face acest lucru:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
const count = storage.reduce((counter, obj) => {
if (obj.status === '0') counter += 1
return counter;
}, 0); // 6
Puteți simplifica în continuare folosind sintaxa ES6 și un operator ternar:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
const count = storage.reduce((counter, obj) => obj.status === '0' ? counter += 1 : counter, 0); // 6
Și chiar mai mult folosind destructurarea obiectelor:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
const count = storage.reduce((counter, { status }) => status === '0' ? counter += 1 : counter, 0); // 6
Deci, acestea sunt câteva modalități de a parcurge elementele unui tablou și de a le număra condiționat. Acum ieși afară și numără cu încredere!