So zählen Sie Objekte in einem Array

Es ist täuschend einfach zu wissen, wie man schnell durch ein Array iteriert und Objekte zählt. Die length()Methode gibt Ihnen die Gesamtzahl der Werte im Array an. Was ist jedoch, wenn Sie diese Werte nur unter bestimmten Bedingungen zählen möchten?

Stellen Sie sich zum Beispiel vor, Sie haben ein Array wie das folgende:

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' }, ];

Und Sie möchten nur die Anzahl der Objekte zählen, auf die statusgesetzt ist '0'.

Wie bei fast allem in der Programmierung gibt es eine Reihe von Möglichkeiten, dies zu tun. Wir werden im Folgenden einige der gängigen Methoden durchgehen.

Verwenden Sie eine forSchleife

Der wahrscheinlich einfachste Weg wäre, eine counterVariable zu deklarieren , das Array zu durchlaufen und counternur dann zu iterieren , wenn dies statusgleich ist '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

Sie können dies ein wenig vereinfachen, indem Sie eine for...ofSchleife verwenden:

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

Sie können auch eine Funktion erstellen, um dasselbe zu tun, wenn Sie andere Arrays von Objekten haben, die bedingt gezählt werden können:

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

Verwenden Sie Array-Methoden

JavaScript enthält eine Reihe hilfreicher Methoden für die Arbeit mit Arrays. Jeder kann an ein Array verkettet werden und verschiedene Parameter übergeben, mit denen gearbeitet werden kann, während die Elemente im Array durchlaufen werden.

Die beiden, die wir uns ansehen werden, sind filter()und reduce().

filter()

Die Filtermethode macht genau das - sie durchläuft jedes Element im Array und filtert alle Elemente heraus, die die von Ihnen angegebenen Bedingungen nicht erfüllen. Anschließend wird ein neues Array mit allen Elementen zurückgegeben, die basierend auf Ihren Bedingungen true zurückgegeben haben.

Zum Beispiel:

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' } ] */

Nachdem Sie das Objekt mit herausgefiltert haben status: '1', rufen Sie einfach die length()Methode für das neue Array auf, um die Gesamtzahl der Objekte zu erhalten mit 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

Dies kann jedoch mit der ES6-Syntax erheblich verkürzt werden:

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()

Stellen Sie sich die reduce()Methode wie ein Schweizer Taschenmesser vor - sie ist äußerst flexibel und ermöglicht es Ihnen, ein Array als Eingabe zu verwenden und es in nahezu alles umzuwandeln. Noch besser ist filter(), dass diese Methode ein neues Array zurückgibt und das Original unverändert lässt.

Sie können mehr darüber reduce()in diesem Artikel lesen .

Für unsere Zwecke möchten wir ein Array nehmen, seinen Inhalt untersuchen und eine Zahl erzeugen. Hier ist eine einfache Möglichkeit, dies zu tun:

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

Sie können die Verwendung der ES6-Syntax und eines ternären Operators weiter vereinfachen:

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

Und noch ein bisschen mehr durch Objektzerstörung:

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

Dies sind also einige Möglichkeiten, um die Elemente eines Arrays zu durchlaufen und sie bedingt zu zählen. Jetzt geh raus und zähle mit Zuversicht!