Wozu dienen Array-Funktionen?

Oft sind Sie verwirrt, Sie sollten reduce mehr verwenden oder filter nicht verwenden, aber map; warum nicht ? Ist es nicht zu verwirrend? forforEach

Tatsächlich? Arrays und iterative Funktionen über Arrays können für Anfänger verwirrend sein, daher versuche ich, das Problem für jedes einzelne zu vereinfachen. Die letzte Frage lautet: Was möchten Sie zurückgeben?

Einführung

Eine Sache für jede vorhandene Sache zurückgeben:

• map()

Nur ​​einige vorhandene Dinge zurückgeben Dinge:

• filter()

Nur ​​eines zurückgeben:

• reduce()

Nichts zurückgeben, sondern für jedes vorhandene Etwas etwas tun:

• forEach()

Als Nächstes stellen wir diese Array-bezogenen Funktionen nacheinander vor und verwenden gleichzeitig ein Beispiel für eine Nicht-Pfeil-Funktion und ein Beispiel für eine Pfeil-Funktion.

Für jedes vorhandene Ding ein neues Ding zurückgeben:

map()Wenn Sie ein Array haben und eine Operation für jedes Element im Array ausführen möchten, geben Sie dann ein Array mit neuen Werten zurück Die Verwendung von

ist am besten geeignet. Hier ist eine einfache Funktion, die ein Array nimmt und jedes Element verdoppelt:

map()

Verwendung von ES6-Pfeilfunktionen:

const originalArray = [1, 2, 3];const newArray = originalArray.map(function(item) {    return item * 2;
});
console.log(newArray); // -> [2, 4, 6]

const originalArray = [1, 2, 3];const newArray = originalArray.map(item => item * 2);
console.log(newArray); // -> [2, 4, 6]

Hinweis:

Mit der neuen Pfeilfunktion Aufgrund der Syntax müssen wir weder die Schlüsselwörter , noch die geschweiften Klammern function verwenden. Dies liegt daran, dass Pfeilfunktionen implizite Rückgaben für return-Funktionen wie diese bereitstellen. Weitere Informationen zu Pfeilfunktionen finden Sie bei Wes Bos. {}simple()Gibt ein neues Array zurück, das nur einige vorhandene Array-Elemente enthält, die die Kriterien erfüllen:

filter()

ist wahrscheinlich die am einfachsten zu verstehende Array-Funktion, da sie so gut benannt ist.

Akzeptiert einen Wertebereich, führt eine Funktion oder einen Vergleich für jeden Wert aus und gibt ein neues Array zurück. Diese Werte bestehen ihren Test (wir nennen sie filter()wahrefilter() Werte). Hier ist ein Beispiel für die Entnahme einer Zahl größer als

aus einem Array und die anschließende Rückgabe eines neuen Arrays, das die Bedingungen erfüllt:

5

Verwendung von ES6-Pfeilfunktionen:

const originalArray = [1, 9, 4, 2, 42];const newArray = originalArray.filter(function(item) {    return item > 5;
});
console.log(newArray); // -> [9, 42]

Nur ​​eine neue Sache zurückgeben:

const newArray = originalArray.filter(item => item > 5);

reduce()Manchmal hat man eine Reihe von Werten, aber man möchte daraus nur eine neue Sache zurückgeben. Die

-Funktion in einem Array führt eine Funktion oder einen Vergleich für jedes Element im Array aus und führt dann einige Operationen an einem sogenannten

Akkumulatorreduce() durch. Diese Funktion lässt sich leichter anhand eines Beispiels beschreiben, da die darin beschriebene Terminologie ebenso verwirrend ist wie die Funktion selbst. Angenommen, Sie haben eine Reihe von Namen und möchten zählen, wie oft der Name

vorkommt:

Bob

Verwenden Sie die Pfeilfunktionen von ES6:

const originalArray = ["Alice", "Bob", "Charlie", "Bob", "Bob", "Charlie"];const numberOfBobs = originalArray.reduce(function(accumulator, item) {    if (item === "Bob") {        return accumulator + 1;
    } else {        return accumulator;
    }
}, 0);
console.log(numberOfBobs); // -> 3

Wie Sie sehen, spart uns diese Pfeilfunktion keine Zeit, da wir der Funktion zwei Argumente bereitstellen und dann vor der Rückkehr eine Logik haben müssen, sodass wir weiterhin die geschweiften Klammern

const numberOfBobs = originalArray.reduce((accumulator, item) => {    if (item === "Bob") {        return accumulator + 1;
    } else {        return accumulator;
    }
}, 0);

benötigen.

{} Das

am Ende der

-Funktion ist der Startwert unseres Akkumulators. Wenn der Wert, auf den wir stoßen, reduce() ist, fügen wir 0 hinzu, andernfalls geben wir den aktuellen Akkumulator zurück. Wenn Sie nichts zurückgeben, wird Bob zurückgegeben, wenn Sie die Funktion das nächste Mal ausführen. 1undefinedMacht etwas mit jedem Wert im Array, gibt aber nichts zurück:

forEach()Manchmal haben Sie eine Reihe von Werten, die Sie verarbeiten möchten, aber nicht behalten müssen Spur jeder Funktion Der Rückgabewert des Aufrufs. Das bedeutet

.

forEach()

Verwendung der ES6-Pfeilfunktionen:

const originalArray = [1, 2, 3];
originalArray.forEach(function(item) {
    doSomething(item);
});

Zusammenfassung

originalArray.forEach( item => doSomething(item); );

Einfach und süß. Dies sind die einfachsten Beispiele, die wir für jede Funktion bereitstellen, um sie so einfach wie möglich zu halten, vor allem um es einfacher zu machen, zu verstehen, wann Sie sie verwenden sollten. Mit diesen Funktionen können Sie viel arbeiten, und jede Funktion verfügt über ein erweitertes Formular, das auch den aktuellen Index bereitstellt:

Verwandte Empfehlungen:

arr.map((item, index) => {})
arr.filter((item, index) => {})
arr.reduce((accumulator, item, index) => {})
arr.forEach((item, index) => {})

php Array-Funktionen implementieren Bearbeiten von Assoziationstabellen

Die praktischsten JS-Array-Funktionen organisiert

Was sind die am häufigsten verwendeten Array-Funktionen

Das obige ist der detaillierte Inhalt vonWozu dienen Array-Funktionen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!