Bestimmte Elemente eines Arrays in JavaScript zählen

1. Verwenden Sie die .filter-Methode, um bestimmte Elemente eines Arrays in JavaScript zu zählen
2. Verwenden Sie die .reduce-Methode, um eine Callback-Funktion in JavaScript auszuführen
3. Verwenden Sie die Array-Entität .prototype, um benutzerdefinierte Methoden oder Eigenschaften in JavaScript zu schreiben

Mit der Einführung der .filter-Methode, die buchstäblich zum Filtern von Array-Elementen basierend auf einer Bedingung verwendet werden kann, können wir sie zusätzlich zur .length-Eigenschaft verwenden, um bestimmte Elemente eines Arrays zu zählen. Eine Funktion liefert die Bedingung der Methode .filter als Parameter übergeben.

Außerdem führen wir die Methode .reduce ein, die eine Funktion für jedes Element im Array ausführt und einen einzelnen Wert zurückgibt.

Die als Parameter übergebene Funktion kann entweder eine Pfeilfunktion oder eine allgemeine Funktion als Callback-Funktion sein. Es bestimmt, welche Elemente der .filter dem zurückgegebenen Array hinzufügt oder was die .reduce-Methode für jedes Element im Array tut.

Verwenden Sie die .filter-Methode, um bestimmte Elemente eines Arrays in JavaScript zu zählen

Der .filter ist eine Methode der Entität Array, die ein neues Array zurückgibt, das nach der bereitgestellten Bedingung gefiltert ist. Die Rückgabe eines neuen Arrays bedeutet, dass das ursprüngliche Array, das die Methode aufruft, unveränderlich bleibt.

Wenn wir beispielsweise alle Elemente in einem Array haben möchten, die dem Wert one entsprechen, können wir den .filter wie folgt verwenden:

// Input
let array = ['one', 'two', 'three', 'four', 'five']
array = array.filter(element => element == 'one')
console.log(array)

Ausgabe:

// Output
[ 'one' ]

Wie erwartet hat die Methode .filter ein Array basierend auf der Bedingung element == 'one' zurückgegeben. Wenn also das tatsächliche Element des Arrays gleich Eins ist, fügt der Filter dieses Element dem zurückgegebenen Array hinzu.

Aber was passiert in der .filter-Methode? Wir können es besser sehen, indem wir eine gemeinsame Funktionsstruktur zur Funktion condition() verwenden:

// Input
let array = ['one', 'two', 'three', 'four', 'five']
array = array.filter(function condition(element) {
  if (element == 'one') return true
    return false
})
console.log(array)

Damit haben wir die gleiche erste Beispielausgabe:

// Output
[ 'one' ]

Die Funktion condition() erhält als Parameter ein element und wenn dieses element gleich einem bestimmten Wert ist, in diesem Fall 'one', gibt sie true zurück, und wenn nicht, false.

Die Methode .filter fügt also jedes element hinzu, das die Bedingung zu true macht; Da das ursprüngliche Array nur das erste Element als eins hat, gibt der .filter nur ein Element zurück.

Beachten Sie, dass die Funktion condition() innerhalb der Methode .filter deklariert ist. Wenn Sie es außerhalb deklarieren und innerhalb des Filters aufrufen, funktioniert es nicht, da das element Teil des Callback-Bereichs ist.

Eine Callback-Funktion wird als Parameter an eine andere Funktion namens äußere Funktion übergeben.

Die äußere Funktion ruft die Callback-Funktion auf, um etwas zu tun; im Fall der .filter-Methode wird die condition()-Callback-Funktion aufgerufen, um das Array basierend auf seiner Bedingung zu filtern.

Zurück zu unserem Ziel, der .filter wird schließlich ein neues Array mit array.length-Elementen zurückgeben, und jedes ist ein Element, dessen Callback-Funktion einen Wert zurückgegeben hat, der true entspricht. Wir können dies einfach mit der Eigenschaft .length tun, um diese gefilterten Elemente zu zählen.

Die .length ist eine Eigenschaft der Array-Entität, die die Anzahl der Elemente in einem Array zurückgibt. Diese Zahl ist immer größer als der höchste Index in diesem Array, da das erste Element auf dem Index immer gleich 0 ist.

// Input
let array = [1, 2, 3, 4, 5]
console.log(array.length)

Ausgabe:

// Output
5

Die Anzahl der Elemente im array ist 5. 5 ist grösser als der Index des Werts 5, der 4 ist.

Zusammengenommen können wir als Beispiel Folgendes verwenden: Wie erhält man die Anzahl aller Testnoten einer Schule größer als sieben? Das Array der Testnotizen ist im Beispiel.

// Input
let notes =
    [7.0, 6.7, 7.3, 9.8, 5.6, 7.1, 7.8, 6.2, 8.0, 9.0, 4.5, 6.9, 7.5, 8.5, 6.4]
greaterThanSeven = notes.filter(value => value > 7)
console.log(greaterThanSeven.length)

Ausgabe:

// Output (The array returned by the .filter is: [7.3, 9.8, 7.1, 7.8, 8, 9, 7.5, 8.5])
8

8 ist also die Anzahl der Noten größer als 7 aller 15 Noten im ursprünglichen notes-Array.

Verwenden Sie die .reduce-Methode, um eine Callback-Funktion in JavaScript auszuführen

Als weitere Option können wir die Array-Entity-Methode .reduce verwenden. Diese Methode wird verwendet, um eine Callback-Funktion (und den .filter) für jedes Array-Element auszuführen, aber sie wird letztendlich einen einzelnen Wert zurückgeben.

Ein einfaches Beispiel für das .reduce-Arbeiten ist die Summe aller Elemente in einem Array:

// Input
let array = [1, 2, 3, 4, 5].reduce((previous, current) => previous + current)
console.log(array)

Ausgabe:

// Output
15

Aber wir können diese Methode auch anders verwenden, indem wir den Anfangswert übergeben. Im vorherigen Beispiel können wir sehen, dass das previous mit dem ersten Indexelement im Array beginnt, das die Callback-Funktion ist, auf diese Weise:

/*
previous + current = result
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
10 + 5 = 15 -> final result
*/

Diese Summe funktioniert, denn wenn wir keinen zweiten Parameter (da die Callback-Funktion der erste Parameter ist) an die .reduce-Methode übergeben, wird sie das previous als erstes Element des Arrays in der ersten Iteration betrachten.

Aber wenn wir bestimmte Elemente im Array zählen wollen? Wir können das erste Element nicht als vorheriges verwenden, da dies zu einem falschen Wert führen könnte.

Im folgenden Beispiel geht es darum, zu zählen, wie viele 2 Zahlen sich im Array befinden:

// Input
let array = [1, 2, 3, 4, 5].reduce((sum, value) => (value == 2 ? sum + 1 : sum))
console.log(array)

Ausgabe:

// Output
2

Wie wir sehen können, ist das Ergebnis 2, aber die richtige Antwort ist 1. Dies geschah, dass sum mit dem ersten Element 1 initialisiert wird, da wir keinen anderen Parameter über die Callback-Funktion hinaus übergeben.

Um die Korrektur vorzunehmen, können wir einfach eine 0 als zweiten .reduce-Parameter übergeben:

// Input
let array =
    [1, 2, 3, 4, 5].reduce((sum, value) => (value == 2 ? sum + 1 : sum), 0)
console.log(array)

Ausgabe:

// Output
1

Auf diese Weise macht .reduce jedes Mal sum + 1, wenn das aktuelle Element gleich 2 ist, wobei sum mit 0 initialisiert wird.

Verwenden Sie die Array-Entität .prototype, um benutzerdefinierte Methoden oder Eigenschaften in JavaScript zu schreiben

Anstatt all diese Logiken jedes Mal zu verwenden, wenn wir bestimmte Elemente in einem Array zählen müssen, können wir als Pluspunkt die Array-Entity-Eigenschaft .prototype verwenden, um benutzerdefinierte Methoden oder Eigenschaften für diese Entität zu schreiben.

Um eine .countCertainElements-Methode für die Array-Entität zu erstellen, können wir die folgende Struktur verwenden:

// Input
// Declaring the prototype .countCertainElements method
Array.prototype.countCertainElements = function(value) {
  return this.filter(arrayElement => arrayElement == value).length
} let array1 = [1, 2, 2, 2, 3, 4, 5]
console.log(array1.countCertainElements(2))

Ausgabe:

// Output
3

Wir können dasselbe für die .reduce tun:

// Input
// Declaring the prototype .countCertainElements method
Array.prototype.countCertainElements = function(value) {
  return this.reduce((sum, element) => (element == value ? sum + 1 : sum), 0)
} let array1 = [1, 2, 2, 2, 3, 4, 5]
console.log(array1.countCertainElements(2))

Ausgabe:

// Output
3