Grundlegende Verwendung von Javascript-Array-Includes und -Reduces

Vorwort

Die Sprache JavaScript hat in den letzten Jahren mehrere Aktualisierungen erfahren. Behalten Sie stets eine Lernhaltung bei, um mit dem Tempo der technologischen Neuerungen Schritt zu halten. Nutzen Sie die Pausenzeit, um sich mit der Verwendung von Array-Includes und -Reduce vertraut zu machen.

Array.Prototyp.enthält

ES7 fügt Unterstützung für diese Methode hinzu. Die Methode includes() wird verwendet, um zu bestimmen, ob ein Array ein Element mit einem angegebenen Wert enthält, und gibt einen Booleschen Wert von true oder false zurück. Wenn es enthalten ist, gibt es true zurück, andernfalls gibt es false zurück.

Grammatik

arr.includes(ZuSuchenderWert[,VonIndex])

Parameter

• valueToFind (erforderlich): Der zu suchende Elementwert. Bei Zeichenfolgen- und Zeichenvergleichen wird die Groß-/Kleinschreibung beachtet.
• fromIndex (optional): Beginnen Sie mit der Suche nach valueToFind vom Array-Index fromIndex.
  • Wenn es sich um eine negative Zahl handelt, beginnt die Suche beim Index von array.length + fromIndex in aufsteigender Reihenfolge (d. h., sie beginnt am Ende, springt um den absoluten Wert von fromIndex vorwärts und sucht dann rückwärts).
  • Der Standardwert ist 0.

Rückgabewert

Gibt „true“ zurück, wenn enthalten, andernfalls „false“.

Beispiele

// ES5-Code
const numbers = ["eins", "zwei", "drei", "vier"];
console.log(numbers.indexOf("Zahlen") > -1); // wahr
console.log(numbers.indexOf("Zahlen") > -1); // false

// ES7-Code
console.log(numbers.includes("Zahlen")); // wahr
console.log(numbers.includes("Alle")); // false

console.log(numbers.includes("一",1)); // false, Suche ab Array-Index 1 rückwärtsconsole.log(numbers.includes("一", -3)); // true, Suche ab array.length + fromIndex rückwärts, entspricht dem Start ab Index 1 oben

Durch die Verwendung der Includes-Methode kann der Code kurz und leicht verständlich gemacht werden. Die Include-Methode eignet sich auch gut zum Vergleichen von Werten, wie der folgende Code zeigt.

// Vergangenheit const day = "Dienstag";
if (day === "Dienstag" || day === "Mittwoch" || day === "Donnerstag") {
    konsole.log(Tag);
}

// Nowif (["Dienstag", "Mittwoch", "Donnerstag"].includes(Tag)) {
    konsole.log(Tag);
}

Array.Prototyp.Reduzieren

Die Methode „reduce()“ führt die Reducer-Funktion für jedes Element im Array aus (in aufsteigender Reihenfolge) und fasst die Ergebnisse in einem einzigen Rückgabewert zusammen.

Grammatik

Array.reduce(Rückruf(Akkumulator, aktuellerWert[, Index[, Array]])[, Anfangswert])

Führt die Rückruffunktion nacheinander für jedes Element im Array aus und schließt Elemente im Array aus, die gelöscht wurden oder denen nie ein Wert zugewiesen wurde.

Parameter

• callback (erforderlich): Führt die Reducer-Funktion für jeden Wert im Array aus (außer dem ersten Wert, wenn initialValue nicht angegeben ist), der vier Parameter enthält
  • Akkumulator (erforderlich): Der Akkumulator akkumuliert den Rückgabewert des Rückrufs; es handelt sich um den akkumulierten Wert, der zurückgegeben wurde, als der Rückruf zuletzt aufgerufen wurde. Der Anfangswert kann durch initialValue definiert werden, der standardmäßig dem ersten Elementwert des Arrays entspricht. Der Akkumulator behält den Wert der vorherigen Operation bei, genau wie eine statische Variable.
  • currentValue (erforderlich): Das Element im Array, das verarbeitet wird
  • Index (optional): Der Index des aktuellen Elements, das im Array verarbeitet wird. Wenn initialValue angegeben ist, ist der Startindex 0, andernfalls beginnt er beim Index 1.
    Hinweis: Wenn kein InitialValue angegeben ist, beginnt Reduce mit der Ausführung der Rückrufmethode ab Index 1 und überspringt den ersten Index. Wenn „initialValue“ angegeben ist, beginnen Sie bei Index 0.
  • Array (optional): das Array, für das „reduce()“ aufgerufen werden soll
• initialValue (optional): Der Wert, der als erstes Argument verwendet wird, wenn die Rückruffunktion zum ersten Mal aufgerufen wird. Wenn kein Anfangswert angegeben ist, wird das erste Element im Array verwendet. Der Aufruf von „Reduce“ für ein leeres Array ohne Anfangswert führt zu einem Fehler.

Rückgabewert

Die Funktion akkumuliert die Ergebnisse der Verarbeitung.

Beispiele

const arrNumbers = [1, 2, 3, 4, 5];
const reduceNumbers = (arrayNumbers, accumulatorInitVal = false) => {
    const reduceCallback = (Akkumulator, aktueller Wert, aktueller Index) => {
        console.log(`Aktueller Index: ${currentIndex}`);
        Gib Akkumulator + currentVal zurück;
    };
    AkkumulatorInitVal zurückgeben
        ? arrayNumbers.reduce(reduceCallback, accumulatorInitVal)
        : arrayNumbers.reduce(reduceCallback);
};

console.log(reduceNumbers(arrNumbers)); // 15, der Anfangswert des Akkumulators ist der Wert des ersten Elements des Arrays 1
console.log(reduceNumbers(arrNumbers, 10)); // 25, der Anfangswert des Akkumulators ist 10

console.log(current index: ${currentIndex}) dient dazu, den Indexwert intuitiver anzuzeigen.

Beim ersten Mal, wenn der Anfangswert nicht definiert ist, lautet die Ausgabe wie folgt:

Aktueller Index: 1
Aktueller Index: 2
Aktueller Index: 3
Aktueller Index: 4

Die zweite Definition der Ausgabe des Akkumulator-Anfangswertes lautet wie folgt:

Aktueller Index: 0
Aktueller Index: 1
Aktueller Index: 2
Aktueller Index: 3
Aktueller Index: 4

Als Nächstes haben wir eine seltsame Anforderung: Aus irgendeinem Grund benötigen wir ein neues Array mit den vollständigen Namen aller unserer Benutzer (Nachname und Vorname), aber nur, wenn sie in ihren 20ern sind und ihr vollständiger Name drei Zeichen lang ist. Fragen Sie uns nicht, warum wir solch eine seltsame Datenuntermenge benötigen. Der Produktmanager hat gefragt und wir helfen gerne weiter^_^

const Benutzer = [
    {
        Vorname: "Jian",
        Nachname: "Sun",
        Alter: 37,
    },
    {
        Vorname: "策",
        Nachname: "Sun",
        Alter: 21,
    },
    {
        Vorname: "Ge Liang",
        Nachname: "朱",
        Alter: 28,
    },
    {
        Vorname: "Name",
        Nachname: "Liu",
        Alter: 44,
    },
    {
        Vorname: "统",
        Nachname: "Pang",
        Alter: 22,
    },
    {
        Vorname: "维",
        Nachname: "姜",
        Alter: 19,
    },
    {
        Vorname: "Vorname",
        Nachname: "Liu",
        Alter: 22,
    },
];
const getFullName = (Benutzer) => `${user.lastName}${user.firstName}`;
const filterByAge = (Benutzer) => Benutzer.Alter >= 20 && Benutzer.Alter < 30;

// Konventionelle Implementierung const getFilterResult = users
    // Der erste Schritt besteht darin, Benutzer im Alter zwischen 20 und 30 Jahren zu filtern.filter((user) => filterByAge(user))
    // Vollständige Namen verketten.map((Benutzer) => getFullName(Benutzer))
    // Filter.filter((vollständigerName) => vollständigerName.länge === 3);

console.log(getFilterResult); // ['Zhuge Liang', 'Liu Bowen']

// Iterationsimplementierung const iterationsFilterResult = (arrayResult, currentUser) => {
    const vollständiger Name = getFullName(aktueller Benutzer);
    wenn (filterByAge(currentUser) && vollständigerName.Länge === 3) {
        arrayResult.push(vollständiger Name);
    }
    Array-Ergebnis zurückgeben;
};
console.log(Benutzer.reduce(iterationsFilterResult, [])); // [ 'Zhuge Liang', 'Liu Bowen' ]

Zusammenfassen

Dies ist das Ende dieses Artikels über die grundlegende Verwendung von JavaScript-Array-Includes und -Reduces. Weitere verwandte JavaScript-Array-Includes und -Reduces-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!