In diesem Beitrag lernen wir häufig verwendete Javascript-Array-Methoden kennen, die Iteration und Rückruffunktionen verwenden, um ihre Funktionalität zu erreichen.

Iteration bezieht sich auf die wiederholte Ausführung einer Reihe von Anweisungen oder Codeblöcken, die es uns ermöglicht, denselben Vorgang mehrmals auszuführen.

Einfach ausgedrückt ist ein Rückruf eine Funktionsdefinition, die als Argument an eine andere Funktion übergeben wird.

Um die Dinge einfach zu halten, konzentrieren wir uns auf diese drei Punkte.

1. Wann eine bestimmte Array-Methode verwendet werden soll.
2. Was die Array-Methode zurückgibt.
3. Codebeispiel der Array-Methode. **

Bevor wir fortfahren, wollen wir verstehen, wie diese Array-Methoden strukturiert sind.

// Array-Methode (Rückruf (die Bedingung, die wir für jedes Element in unserem Array ausführen möchten))

Jede dieser Array-Methoden ist eine Funktion, die einen Rückruf als Argument empfängt. In diesem Rückruf geben wir die Bedingungen an, die wir für jedes unserer Array-Elemente ausführen möchten.

Wir werden dieses Array von Objekten für unsere Beispiele verwenden.

`const data = [
{
„userId“: 1,
„Benutzername“: „Francis“,
„message“: „Hey, wie geht’s?“,
„timestamp“: „2024-02-18T12:30:00Z“,
„status“: „online“,
"messageSent": 28,
„role“: „user“,
„passCode“: „293087O7764“

},
{
„userId“: 2,
„Benutzername“: „Moses“,
„message“: „Nicht schlecht, ich arbeite nur an einem Projekt.“,
„timestamp“: „2024-02-18T12:35:00Z“,
„status“: „abwesend“,
„messageSent“: 74,
„role“: „user“,
„passCode“: „675147O2234“
},
{
„userId“: 3,
„Benutzername“: „Vicky“,
„message“: „Hey Leute! Was ist der neueste Klatsch?“,
„timestamp“: „2024-02-18T12:40:00Z“,
„status“: „online“,
„messageSent“: 271,
„role“: „moderator“,
„passCode“: „76352O8069“

},
{
„userId“: 4,
„Benutzername“: „Junior“,
„message“: „Nicht viel, nur chillen. Wie wäre es mit dir?“,
„timestamp“: „2024-02-18T12:45:00Z“,
„status“: „offline“,
„messageSent“: 125,
„role“: „admin“,
„passCode“: „21876O3483“
}
]`

forEach: forEach wird verwendet, wenn wir eine Bedingung für alle unsere Array-Elemente ausführen möchten. forEach gibt undefiniert zurück.

function getMessageSent(users){
let sumMessageSent = 0;
users.forEach(function(user){
sumMessageSent = user.messageSent;
})
return sumMessageSent;
}
getMessageSent(data) // Ausgabe: 498

reduce: Reduce wird verwendet, um ein Array auf einen einzelnen Wert zu reduzieren. Beispielsweise kann dieses Array [8, 7, 3] auf die Zahl 18 reduziert werden. Ein Reduzierer gibt einen einzelnen Wert zurück.

Die Reduzierfunktion übernimmt zwei Parameter: erstens den Reduzierer (der aus der Gesamtsumme und dem aktuellen Wert besteht) und zweitens den Anfangswert

Die Summe: Dies wird im Volksmund als Akkumulator bezeichnet. Die Summe, wie ich sie nenne, ist der zuletzt berechnete Wert der Reduzierfunktion.

Der Strom bezieht sich auf ein einzelnes Array-Element. in unserem Fall haben wir vier Artikel (aktuell).

Der initialValue ist der Wert, den wir der Summe beim ersten Aufruf zuweisen. Sagen Sie einfach, dass der Anfangswert der Standardwert des Gesamtwerts ist

const getMessageSent = (Benutzer) => {
returnusers.reduce((total, current) => total = current.messageSent, 0)
}

getMessageSent(data) // Ausgabe: 498

filter: Array.filter wird verwendet, wenn wir nur Elemente im Array sammeln möchten, die eine bestimmte Bedingung erfüllen. array.filter gibt ein Array zurück.

const onlineUsers = (Benutzer) => {
returnusers.filter(user => user.status === "online")
}

onlineUsers(data) // Ausgabe: [object object]

find Array.find wird verwendet, wenn wir nur das erste Array-Element abrufen möchten, das die im Rückruf definierte Bedingung erfüllt. array.find gibt das erste Element NICHT in einem Array, sondern im Format des Elements zurück. In unserem Fall ist es ein Objekt oder undefiniert, wenn keine Übereinstimmung gefunden wurde.

const getUserRole = (Benutzer) => {
return users.find(user => user.role === "user")
}

getUserRole(data) // Ausgabe: {userId: 1, Benutzername: 'Francis', Nachricht: "Hey, wie geht's?", Zeitstempel: '2024-02-18T12:30:00Z', Status: ' online‘, …}

Beachten Sie, dass nur der erste Benutzer zurückgegeben wurde, der die Bedingung erfüllt.

map Array.map wird verwendet, wenn wir die Elemente im Array transformieren möchten. array.map gibt ein Array transformierter Elemente zurück, die die Bedingung in unserem Rückruf erfüllen.

const getUserNameAndPass = (Benutzer) => {
returnusers.map((user) => {
const userPassCode = user.passCode.slice(-4);
return${user.username} ${userPassCode.padStart(
user.passCode.length,
„★“
)};
});
};

getUserNameAndPass(data)// Ausgabe:['Francis ★★★★★★★7764', 'Moses ★★★★★★★2234', 'Vicky ★★★★★★8069', 'Junior ★ ★★★★★3483']

every array.every wird verwendet, wenn wir prüfen möchten, ob alle Array-Elemente unsere definierte Bedingung erfüllt haben. array.every gibt einen booleschen Wert zurück. true, wenn alle Elemente die Bedingung erfüllen, und false, wenn eines der Elemente die Bedingung nicht erfüllt.

const isOnline = data.every(user => dataItem.status === 'online')

console.log(isOnline) // Ausgabe:false

Some array.some wird verwendet, wenn wir überprüfen möchten, ob einige der Array-Elemente eine bestimmte Bedingung erfüllen. array.some gibt einen booleschen Wert zurück. „true“, wenn einige der Elemente die Bedingung bestanden haben, und „false“, wenn alle Elemente die Bedingung bestanden haben oder nicht.

const isOnline = data.every(user => dataItem.status === 'online')

console.log(isOnline) // Ausgabe: true

Dies sind einige der am häufigsten verwendeten Array-Methoden.