Erläuterung der Array-Verarbeitung in React und Redux

Dieser Artikel stellt einige häufig verwendete Funktionen und Syntax zur Array-Verarbeitung vor, wie etwa reduce(), filter(), map(), every(), some() und den Spread-Operator. Dieses Wissen steht nicht in direktem Zusammenhang mit React und Redux selbst, aber die Beispiele in diesem Kapitel beinhalten die Verwendung dieser Funktionen und Syntax, sodass wir sie im Programm lernen können. Erwähnenswert ist auch, dass die Ideen für Funktionen wie „reduce()“, „filter()“ und „map()“ aus der funktionalen Programmierung stammen. Da JavaScript eine funktionale Programmiersprache ist, ist die ursprünglich komplexe Logikverarbeitung so einfach geworden.

reduzieren()

Überblick

Die Methode „reduce()“ erhält eine Funktion als Akkumulator und jeder Wert im Array (von links nach rechts) wird zu einem einzelnen Wert zusammengeführt.

Grammatik

array.reduce(Rückruf,Anfangswert)

Die Parameter werden weiter unten erläutert.
Rückruf: Eine Funktion (auch Reducer genannt), die jeden Wert im Array ausführt und vier Parameter enthält.
previousValue: Der vom letzten Rückrufaufruf zurückgegebene Wert oder der bereitgestellte Anfangswert (initialValue).
currentValue: Das aktuell im Array verarbeitete Element.
Index: Der Index des aktuellen Elements im Array.
Array: das Array, bei dem Reduce aufgerufen werden soll · InitialValue: der erste Parameter des ersten Rückrufaufrufs. Dieser Parameter ist nicht erforderlich.
Beispiel

const abgeschlosseneAnzahl = alle Todesfälle.Reduce(
(Anzahl, Aufgaben)=>(Aufgaben.Abgeschlossen?Anzahl+1:Anzahl),
0);

Code-Erklärung:

todos ist ein Array.
Der erste Parameter von „reduce()“ ist eine Pfeilfunktion. Der erste Parameter „count“ dieser Pfeilfunktion ist der vorherige Rückgabewert und der zweite Parameter „todo“ ist der Wert des aktuellen Elements.
Der zweite Parameter 0 von reduce() ist ein Initialisierungswert, der verwendet wird, um den Anfangswert count auf 0 zu setzen.
Beim Zurückverfolgen zum ersten Wert des Arrays „todos“ ist „count“ 0. „todo“ ist das erste Element in „todos“ und der Rückgabewert wird um eins erhöht oder bleibt unverändert (wenn „todo.completed“ wahr ist, wird „count+1“ zurückgegeben, andernfalls wird „count“ zurückgegeben).
Beim Durchlaufen des zweiten Wertes des Todos-Arrays ist count der vorherige Rückgabewert. „todo“ ist das zweite Element in „todos“ und der Rückgabewert wird um eins erhöht oder bleibt unverändert.
Nach Abschluss der Durchquerung kann die Anzahl der Aufgaben im Array abgerufen werden, deren abgeschlossenes Attribut wahr ist, dh die Anzahl der abgeschlossenen Aufgaben.

Filter()

Überblick

Die Methode filter() testet alle Elemente mit der angegebenen Funktion und erstellt ein neues Array mit allen Elementen, die den Test bestehen.

Grammatik

array.filter(Rückruf,diesesArg)

Die Parameter werden weiter unten erläutert.

Rückruf: Eine Funktion zum Testen jedes Elements des Arrays, die drei Parameter enthält. Geben Sie „true“ zurück, um das Element beizubehalten (Test bestehen), „false“, um es nicht beizubehalten.
currentValue: Das aktuell übergebene Element im Array.
Index: Der Index des Elements.
Array: Das zu durchlaufende Array.
thisArg: Optional. Der this-Wert, der beim Ausführen des Rückrufs verwendet werden soll.

Status zurückgeben.Filter(todo=>
todo.id!==Aktion.id
)

Code-Erklärung:

Status ist ein Array von Aufgaben.
Der Parameter von filter() ist eine Pfeilfunktion. Die Pfeilfunktion hat nur einen Parameter, todo, nämlich das aktuelle Element im Array. Wenn die Beurteilungsanweisung nach dem Pfeil true zurückgibt, wird das aktuelle Element beibehalten, andernfalls wird das aktuelle Element entfernt.
Der Zweck dieses Codeausschnitts besteht darin, Aufgaben im Aufgaben-Array herauszufiltern, deren ID mit der angegebenen ID übereinstimmt, und ein neues Aufgaben-Array zurückzugeben.

Karte()

Überblick

Die Methode map() gibt ein neues Array zurück, das aus den Rückgabewerten des Aufrufs einer angegebenen Methode für jedes Element im ursprünglichen Array besteht.

Grammatik

array.map(Rückruf, diesesArg)

Die Parameter werden weiter unten erläutert.

Rückruf: Diese Methode wird für das Element im ursprünglichen Array aufgerufen und gibt ein neues Element zurück. Diese Methode enthält die folgenden drei Parameter.
currentValue: Das aktuell übergebene Element im Array.
·index: Der Index des Elements.
Array: Das zu durchlaufende Array.
thisArg:Optional. Der this-Wert, der beim Ausführen des Rückrufs verwendet werden soll.

Beispiel

Status zurückgeben.map(todo=>(
todo.id === Aktions-ID?
Objekt.zuweisen({},todo.{ text:action.text}):
Aufgaben
));

Code-Erklärung:

Status ist der Status vor der Änderung, der ein Array ist.
Das Argument für map() ist eine Pfeilfunktion. Der erste Parameter der Pfeilfunktion ist todo, und der Rückgabewert ist ein Ausdruck, der den ternären Operator verwendet, um ein neues Element zurückzugeben. Wenn die ID übereinstimmt, wird über 0bject.assign() ein neues Attribut zusammengeführt, d. h. ein Textattribut wird zu todo hinzugefügt oder neu geschrieben und der Attributwert ist action.text
Die Methode Object.assign() kann eine beliebige Anzahl der aufzählbaren Eigenschaften des Quellobjekts in das Zielobjekt kopieren und anschließend das Zielobjekt zurückgeben.

Die Syntax lautet „Object.assign(target,...sources).“ „target“ ist das Zielobjekt und „sources“ ist eine beliebige Anzahl von Quellobjekten.
Dieser Code aktualisiert die Texteigenschaft für die im Array angegebenen Aufgaben.

jeder()

Überblick

Mit der Methode every() wird getestet, ob alle Elemente in einem Array den Test der angegebenen Funktion bestehen.

Grammatik

array.jeder(Rückruf,diesesArg)

callbak: Die zum Testen jedes Elements verwendete Funktion.
currentValue: Das aktuell übergebene Element im Array.
Index: Der Index des Elements.
Array: Das zu verfolgende Array.
thisArg: Optional. Der this-Wert, der beim Ausführen des Rückrufs verwendet werden soll.

Beispiel

const areAllMarked = status.jeder(todo=>todo.abgeschlossen)

Wenn das Aufgaben-Array durchlaufen wird und das Abgeschlossen-Attribut jeder Aufgabe wahr ist, wird „true“ zurückgegeben.

manche()

Überblick

Mit der Methode some() wird getestet, ob im Array mindestens ein Element vorhanden ist, das den Test der angegebenen Funktion besteht.

Grammatik

array.some(Rückruf[,diesesArg])

Die Parameter werden weiter unten erläutert.

Rückruf: Die zum Testen jedes Elements verwendete Funktion.
currentValue: Das aktuell übergebene Element im Array.
Index: Der Index des Elements.
Array: Das zu durchlaufende Array.
thisArg:Optional. Der this-Wert, der beim Ausführen des Rückrufs verwendet werden soll.

Beispiel

const areAllMarked = status.einige(todo=>todo.abgeschlossen)

Durchlaufen Sie das Task-Array und geben Sie „true“ zurück, solange es eine Aufgabe gibt, deren Eigenschaft „Abgeschlossen“ „true“ ist.

Spread-Operator

Überblick

Der Spread-Operator ermöglicht die Erweiterung eines Ausdrucks an einer bestimmten Stelle. Zu den üblichen Szenarien zählen: Funktionsparameter, Array-Elemente und Dekonstruktionszuweisung.
Darüber hinaus können Komponenteneigenschaften in JSX auch mit dem Spread-Operator zugewiesen werden.
Die Destrukturierungszuweisungssyntax ist ein JavaScript-Ausdruck, der es ermöglicht, Daten aus einem Array oder Objekt zu extrahieren und sie verschiedenen Variablen zuzuweisen.

Grammatik

Für Funktionsparameter:

meineFunktion(...iterable0bj);

Für Array-Elemente:

[...iterierbares Objekt,4,5,6]

Für die Destrukturierungszuweisung:

const [a,b,...rest]=[1,2,3,4,5]
const {a,b,...rest}={a:1,b:2,c:3,d:4}

Requisiten für React-Komponenten:

<App...iterable0bj/>

Beispiel

Status erweitern
Jedes Element eines Arrays wird dem aktuellen Array hinzugefügt.

zurückkehren[
id:status.reduce((maxId,todo)=>Math,max(todo,id,maxId),-1)+1,
{
abgeschlossen:false,
text:Aktion.Text,
},
...Zustand,
];

Erweitern Sie jede Eigenschaft von Aktionen in die Komponente.

<TodoItem-Schlüssel={todo.id}todo={todo}{...Aktionen}/>

Zusammenfassen

Die Methode „reduce()“ erhält eine Funktion als Akkumulator und jeder Wert im Array (von links nach rechts) wird zu einem einzelnen Wert zusammengeführt.
Die Methode filter() testet alle Elemente mit der angegebenen Funktion und erstellt ein neues Array mit allen Elementen, die den Test bestehen.
Die Methode map() gibt ein neues Array zurück, das aus den Rückgabewerten des Aufrufs einer angegebenen Methode für jedes Element im ursprünglichen Array besteht. Die Methode every() prüft, ob alle Elemente des Arrays den Test der angegebenen Funktion bestehen.
Mit der Methode some() wird getestet, ob im Array mindestens ein Element vorhanden ist, das den Test der angegebenen Funktion besteht.
Der Spread-Operator ermöglicht die Erweiterung eines Ausdrucks an einer bestimmten Stelle. Häufig verwendete Feldvariablen, Funktionsparameter sowie Array-Konstruktion und -Zuweisung. Darüber hinaus können Komponenteneigenschaften in JSX auch mit dem Spread-Operator zugewiesen werden.

Dies ist das Ende dieses Artikels über die Array-Verarbeitung in React und Redux. Weitere Informationen zur Array-Verarbeitung in React und Redux finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!