Eine kurze Diskussion über die integrierten Traversierungsmethoden von JS-Arrays und ihre Unterschiede

forEach() (ES6)-Methode

Die Methode forEach() (ES6) führt eine bestimmte Funktion einmal für jedes Element eines Arrays aus.

1. Der Rückruf in dieser Methode wird so oft ausgeführt, wie Elemente im Array vorhanden sind
2. Der erste Parameter ist das Element im Array, der zweite Parameter ist der Index des Elements im Array und der dritte Parameter ist er selbst (der dritte Parameter kann zum Deduplizieren des Arrays verwendet werden).
3. Die Array-eigene Traversierungsmethode foreach ist effizienter als die for-Schleife, wenn die Anzahl der Schleifen unbekannt oder die Berechnung komplex ist.
4. Die Elemente des Schleifen-Arrays sind grundlegende Datentypen, die die Daten der Originaldaten nicht ändern. Die Elemente des Schleifen-Arrays sind Objekte, die die Werte der Objektattribute des Original-Arrays ändern.
5. Indexänderungen werden während der Schleife nicht unterstützt. Die Verwendung von return im Rückruf meldet keinen Fehler, ist aber ungültig.

Hinweis: Sie können break und continue nicht verwenden, um aus der gesamten Schleife oder der aktuellen Schleife herauszuspringen. Es wird ein Fehler gemeldet. Sie können jedoch aus der Schleife herausspringen, indem Sie try...catch kombinieren.

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));

Nachteil: Keine Möglichkeit, eine `forEach()`-Schleife abzubrechen oder daraus auszusteigen

map() (ES6)-Methode

Die Methode map() (ES6) erstellt ein neues Array, in dem jedes Element der Rückgabewert des einmaligen Aufrufs der bereitgestellten Funktion ist.

    const array1 = [1, 4, 9, 16];
    const map1 = array1.map(x => x * 2);
    console.log(map1); //[2, 8, 18, 32]

Drei Parameter: Array-Element, Elementindex und das ursprüngliche Array selbst

flatMap()-Methode

Die Methode flatMap() ordnet zunächst jedes Element mithilfe der Mapping-Funktion zu und komprimiert die Ergebnisse anschließend in ein neues Array. Es ist fast dasselbe wie „Map“ gefolgt von „Flat“ mit einer Tiefe von 1, aber „FlatMap“ ist normalerweise etwas effizienter, wenn es in einer Methode kombiniert wird.

    var arr1 = [1, 2, [3, 4]];
    arr1.flatMap(x => x); //[1, 2, 3, 4]
    var arr1 = [1, 2, 3, 4];
    arr1.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]

für...in...

Diese Schleife wird auch von vielen Leuten verwendet, ist aber die am wenigsten effiziente (der Ausgabeschlüssel ist der Array-Index). Wenn das Objekt durchlaufen wird, ist die Ausgabe der Attributname des Objekts.

für...von...

Die Leistung ist besser als bei „for..in...“, aber immer noch nicht so gut wie bei einer normalen „for“-Schleife.
Hinweis: Objekte können nicht in einer Schleife ausgeführt werden, da jede Datenstruktur durchlaufen werden kann, solange die Iterator-Schnittstelle bereitgestellt wird. Einige Datenstrukturen verfügen nativ über die Iterator-Schnittstelle, z. B. Array, Map, Set, String usw., und die Iterator-Schnittstelle wird auf dem Symbol.iterator-Attribut der Datenstruktur bereitgestellt, aber das Objekt Object verfügt nicht über das Symbol.iterator-Attribut und kann daher nicht von for..of durchlaufen werden.

Filter (ES6) durchläuft das Array

filter (ES6) durchläuft das Array, filtert die Elemente heraus, die die Bedingungen erfüllen, und gibt ein neues Array zurück. Wenn kein Array-Element den Test besteht, wird ein leeres Array zurückgegeben.

    const Ergebnis = Wörter.Filter(Wort => Wort.Länge > 6);
    console.log(Ergebnis) //["überschwänglich", "Zerstörung", "gegenwärtig"]
some()-Funktion (ES6)
    Durchläuft das Array, um zu sehen, ob es Elemente gibt, die die Bedingungen erfüllen. Der Rückgabewert ist ein Boolescher Wert. Solange ein Element gefunden wird, das die Bedingungen erfüllt, wird „true“ zurückgegeben.
    var arr = [
     { id: 1, name: 'Stift kaufen', done: true },
     { id: 2, name: 'Laptop kaufen', done: true },
     { id: 3, name: 'Kalligraphie üben', done: false }
    ]
    
    var bool = arr.some(Funktion (Element, Index) {
     Artikel zurückgeben.fertig
    })
    console.log(bool) // wahr

every()-Funktion (ES6)

Testet, ob jedes Element des Arrays den Test der Callback-Funktion besteht
Wenn alles erfolgreich ist, geben Sie „true“ zurück, andernfalls „false“
Einfach ausgedrückt: Wenn die Rückruffunktion jedes Mal „true“ zurückgibt, gibt every() „true“ zurück, andernfalls „false“.

    var arr = [
        { id: 1, name: 'Stift kaufen', done: true },
        { id: 2, name: 'Laptop kaufen', done: true },
        { id: 3, name: 'Kalligraphie üben', done: false }
    ]
    var bool = arr.jedes((Element, Index) => {
        Artikel zurückgeben.fertig
    })
    console.log(bool) // falsch

find()-Funktion (ES6)

Gibt das erste Element zurück, das den Test besteht. Wenn kein Element den Test besteht, wird **undefined** zurückgegeben.

    var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
    var num = arr.find( (Element, Index) => {
        Artikel zurückgeben === 3
    })
    console.log(Nummer) // 3

findIndex()-Funktion (ES6)

Diese Funktion hat dieselbe Wirkung wie find() oben, außer dass sie den Index des ersten übergebenen Elements zurückgibt.

    var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
    var num = arr.findIndex(item => {
        Artikel zurückgeben === 3
    })
    console.log(Nummer) // 4

Damit ist dieser Artikel über die integrierten Traversierungsmethoden von JS-Arrays und ihre Unterschiede abgeschlossen. Weitere relevante Inhalte zur integrierten Traversierung von JS-Arrays finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!