Kennen Sie alle 24 Methoden zur JavaScript-Schleifendurchquerung?

Vorwort

Heute werden wir uns einige Grundlagen ansehen und uns die Methoden zur Schleifendurchquerung in JavaScript ansehen:

1. Array-Traversal-Methode

1. fürJedes()

Mit der Methode forEach wird jedes Element eines Arrays aufgerufen und an die Rückruffunktion übergeben. Die Rückruffunktion wird für jeden Wert im Array aufgerufen. Die Syntax lautet wie folgt:

array.forEach(Funktion(aktuellerWert, Index, arr), dieserWert)

Der erste Parameter dieser Methode ist die Callback-Funktion, die erforderlich ist und drei Parameter hat:

• currentValue: erforderlich. Aktuelles Element
• Index: Optional. Der Indexwert des aktuellen Elements.
• arr: Optional. Das Array-Objekt, zu dem das aktuelle Element gehört

sei arr = [1,2,3,4,5]
arr.forEach((Element, Index, arr) => {
  Konsole.log(Index+":"+Element)
})

Diese Methode kann auch einen zweiten Parameter haben, um diese Variable innerhalb der Rückruffunktion zu binden (vorausgesetzt, die Rückruffunktion kann keine Pfeilfunktion sein, da Pfeilfunktionen dies nicht haben):

sei arr = [1,2,3,4,5]
sei arr1 = [9,8,7,6,5]
arr.forEach(Funktion(Element, Index, arr){
  console.log(dieser[index]) // 9 8 7 6 5
}, arr1)

Beachten:

• Die forEach-Methode ändert das ursprüngliche Array nicht und hat keinen Rückgabewert.
• forEach kann weder break noch continue verwenden, um die Schleife zu verlassen. Wenn return verwendet wird, ist der Effekt derselbe wie bei Verwendung von continue in der for-Schleife.
• Die forEach-Methode kann keine Objekte durchlaufen und ist nur auf die Array-Durchquerung anwendbar.

2. Karte ()

Die Methode map() gibt ein neues Array zurück, dessen Elemente die Werte sind, die durch den Aufruf der Funktion auf den Elementen des ursprünglichen Arrays verarbeitet wurden. Diese Methode verarbeitet die Elemente im ursprünglichen Array der Reihe nach. Die Syntax lautet wie folgt:

array.map(Funktion(aktuellerWert,Index,arr),dieserWert)

Der erste Parameter dieser Methode ist die Callback-Funktion, die erforderlich ist und drei Parameter hat:

• currentValue: Erforderlich. Der Wert des aktuellen Elements;
• Index: Optional. Der Indexwert des aktuellen Elements;
• arr: Optional. Das Array-Objekt, zu dem das aktuelle Element gehört.

sei arr = [1, 2, 3];
 
arr.map(Element => {
    Artikel zurückgeben + 1;
})

// Ausgabe: [2, 3, 4]

Der zweite Parameter dieser Methode wird verwendet, um die Variable this innerhalb der Parameterfunktion zu binden und ist optional:

sei arr = ['a', 'b', 'c'];
 
[1, 2].map(Funktion (e) {
    gib dies zurück[e];
}, arr)

// Ausgabe: ['b', 'c']

Diese Methode kann auch verkettet werden:

sei arr = [1, 2, 3];
 
arr.map(Element => Element + 1).map(Element => Element + 1)

// Ausgabe: [3, 4, 5]

Beachten:

• Die Map-Methode erkennt keine leeren Arrays;
• Die Map-Methode gibt beim Durchlaufen des Arrays ein neues Array zurück und ändert das ursprüngliche Array nicht.
• Die Map-Methode hat einen Rückgabewert, der zurückgegeben werden kann. Die Map-Callback-Funktion unterstützt Rückgabewerte.
• Die Map-Methode kann keine Objekte durchlaufen und ist nur auf die Array-Durchquerung anwendbar.

3. für von

Die for...of-Anweisung erstellt eine Schleife zum Iterieren über ein iterierbares Objekt. Die for...of-Schleife wurde in ES6 eingeführt, um for...in und forEach() zu ersetzen und unterstützt das neue Iterationsprotokoll. Die Syntax lautet wie folgt:

für (Variable des Iterables) {
    Stellungnahme
}

Diese Methode verwendet zwei Parameter:

• Variable: Der Eigenschaftswert jeder Iteration wird dieser Variable zugewiesen.
• iterierbar: Ein Objekt, das aufzählbare Eigenschaften hat und über das iteriert werden kann.

Mit dieser Methode kann der Wert eines Schlüssels in einem Objekt abgerufen werden:

lass arr = [
    {id:1, Wert:'Hallo'},
    {id:2, Wert:'Welt'},
    {id:3, Wert:'JavaScript'}
]
für (Element in arr lassen) {
  konsole.log(Element); 
}
// Ausgabe: 0 1 2 

Beachten:

• Die for-of-Methode durchläuft nur die Eigenschaften des aktuellen Objekts, nicht die Eigenschaften in seiner Prototypenkette.
• Die for of-Methode ist anwendbar auf das Durchlaufen von Sammlungen mit Iteratorobjekten wie Arrays/Klassenarrays/Strings/Maps/Sets.
• Die for of-Methode unterstützt keine Durchquerung einfacher Objekte, da sie kein Iteratorobjekt hat. Wenn Sie über die Eigenschaften eines Objekts iterieren möchten, können Sie die Methode for in verwenden.
• Sie können „break“, „continue“ und „return“ verwenden, um den Durchlauf der Schleife zu unterbrechen.

4. filter()

Mit der Methode filter() wird ein Array gefiltert. Es werden Elemente zurückgegeben, die die Bedingungen erfüllen. Sein Parameter ist eine Callback-Funktion. Alle Array-Elemente führen die Funktion nacheinander aus. Es werden Elemente mit dem Rückgabewert true zurückgegeben. Wenn es keine Elemente gibt, die die Bedingungen erfüllen, wird ein leeres Array zurückgegeben. Die Syntax lautet wie folgt:

array.filter(Funktion(aktuellerWert,Index,arr),dieserWert)

Der erste Parameter dieser Methode ist die Callback-Funktion, die erforderlich ist und drei Parameter hat:

• currentValue: Erforderlich. Der Wert des aktuellen Elements;
• Index: Optional. Der Indexwert des aktuellen Elements;
• arr: Optional. Das Array-Objekt, zu dem das aktuelle Element gehört.

const arr = [1, 2, 3, 4, 5]
arr.filter(Artikel => Artikel > 2) 

// Ausgabe: [3, 4, 5]

Ebenso verfügt es über einen zweiten Parameter, der zum Binden dieser Variable innerhalb der Parameterfunktion verwendet wird.

Mit der Methode filter() können Sie undefinierte, Null-, NAN- und andere Werte aus dem Array entfernen:

let arr = [1, undefiniert, 2, null, 3, falsch, '', 4, 0]
arr.filter(Boolesch)

// Ausgabe: [1, 2, 3, 4]

Beachten:

• Die Filtermethode gibt ein neues Array zurück und ändert das ursprüngliche Array nicht;
• Die Filtermethode erkennt keine leeren Arrays;
• Die Filtermethode funktioniert nur auf Arrays.

5. einige(), alle()

Die Methode some() durchläuft jedes Element im Array. Wenn mindestens ein Element die Kriterien erfüllt, wird true zurückgegeben und die übrigen Elemente werden nicht getestet. Andernfalls wird false zurückgegeben.

Die Methode every() durchläuft alle Elemente im Array und gibt nur dann true zurück, wenn alle Elemente die Bedingung erfüllen. Wenn ein Element im Array als nicht zufriedenstellend erkannt wird, gibt der gesamte Ausdruck false zurück und die verbleibenden Elemente werden nicht erneut getestet. Die Syntax lautet wie folgt:

Die Syntax für beide lautet wie folgt:

array.some(Funktion(aktuellerWert,Index,arr),dieserWert)
array.every(Funktion(aktuellerWert,Index,arr),dieserWert)

Der erste Parameter beider Methoden ist die Callback-Funktion, die erforderlich ist und drei Parameter hat:

• currentValue: Erforderlich. Der Wert des aktuellen Elements;
• Index: Optional. Der Indexwert des aktuellen Elements;
• arr: Optional. Das Array-Objekt, zu dem das aktuelle Element gehört.

sei arr = [1, 2, 3, 4, 5]
arr.some(Artikel => Artikel > 4) 

// Ausgabe: true

sei arr = [1, 2, 3, 4, 5]
arr.jedes(Artikel => Artikel > 0) 

// Ausgabe: true

Beachten:

• Beide Methoden ändern das ursprüngliche Array nicht und geben einen booleschen Wert zurück.
• Keine der Methoden erkennt leere Arrays.
• Beide Methoden sind nur auf Arrays anwendbar.

6. reduzieren(), reduzierenRechts()

Die Methode „reduce()“ empfängt eine Funktion als Akkumulator und jeder Wert im Array (von links nach rechts) wird reduziert und schließlich zu einem einzelnen Wert ausgewertet. „reduce()“ kann als Funktion höherer Ordnung für die Funktionszusammenstellung verwendet werden. Die Syntax lautet wie folgt:

array.reduce(Funktion(Gesamt, aktuellerWert, aktuellerIndex, arr), Anfangswert)

Die Reduce-Methode führt die Callback-Funktion nacheinander für jedes Element im Array aus und schließt dabei Elemente aus, die gelöscht oder dem Array nie zugewiesen wurden. Die Callback-Funktion akzeptiert vier Parameter:

• total: der vom letzten Rückrufaufruf zurückgegebene Wert oder der bereitgestellte Anfangswert (initialValue);
• currentValue: das aktuell verarbeitete Element;
• currentIndex: der Index des aktuellen Elements;
• arr: Das Array-Objekt, zu dem das aktuelle Element gehört.

Der zweite Parameter dieser Methode ist initialValue, der den an die Funktion übergebenen Anfangswert darstellt (als erster Parameter des ersten Aufrufs des Rückrufs):

sei arr = [1, 2, 3, 4]
lass Summe = arr.reduce((vorherige, aktuelle, Index, arr) => {
    console.log(vorherige, aktuell, index);
    Rückgabewert für vorherige + aktuelle;
})
console.log(arr, Summe);

Ausgabe:

1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

Versuchen wir, einen Anfangswert hinzuzufügen:

sei arr = [1, 2, 3, 4]
lass Summe = arr.reduce((vorherige, aktuelle, Index, arr) => {
    console.log(vorherige, aktuell, index);
    Rückgabewert für vorherige + aktuelle;
}, 5)
console.log(arr, Summe);

Ausgabe:

5 1 0
6 2 1
8 3 2
11 4 3
[1, 2, 3, 4] 15

Daraus können wir schließen, dass, wenn kein Anfangswert initialValue angegeben ist, Reduce die Rückrufmethode beginnend bei Index 1 ausführt und den ersten Index überspringt. Wenn ein Anfangswert angegeben ist, beginnt die Ausführung beim Index 0

Die Methode „reduceRight()“ ist nahezu identisch mit der Methode „reduce()“, außer dass sie das Array in umgekehrter Reihenfolge durchläuft, während die Methode „reduce()“ das Array in Vorwärtsreihenfolge durchläuft.

sei arr = [1, 2, 3, 4]
lass Summe = arr.reduceRight((vorherige, aktuelle, Index, arr) => {
    console.log(vorherige, aktuell, index);
    Rückgabewert für vorherige + aktuelle;
}, 5)
console.log(arr, Summe);

Ausgabe:

5 4 3
9 3 2
12 2 1
14 1 0
[1, 2, 3, 4] 15

Beachten:

• Keine der Methoden ändert das ursprüngliche Array.
• Wenn die beiden Methoden einen Anfangswert hinzufügen, wird das ursprüngliche Array geändert und der Anfangswert wird am Ende des Arrays platziert.
• Beide Methoden führen die Rückruffunktion für ein leeres Array nicht aus.

7. finden (), findenIndex ()

Die Methode find() gibt den Wert des ersten Elements des von der Funktion ermittelten Arrays zurück. Wenn ein Element im Array beim Testen der Bedingung „true“ zurückgibt, gibt find() das Element zurück, das die Bedingung erfüllt, und die Ausführungsfunktion wird für nachfolgende Werte nicht aufgerufen. Wenn kein Element die Kriterien erfüllt, wird „undefined“ zurückgegeben.

Die Methode findIndex() gibt die Position (den Index) des ersten Elements in einem Array zurück, das die an eine Testfunktion übergebenen Bedingungen erfüllt. Wenn ein Element im Array unter der Funktionsbedingung „true“ zurückgibt, gibt findIndex() die Indexposition des Elements zurück, das die Bedingung erfüllt, und die Ausführungsfunktion wird für nachfolgende Werte nicht aufgerufen. Wenn kein Element die Bedingung erfüllt, wird -1 zurückgegeben.

Die Syntax beider Methoden ist wie folgt:

array.find(Funktion(aktuellerWert, Index, arr),dieserWert)
array.findIndex(Funktion(aktuellerWert, Index, arr), dieserWert)

Der erste Parameter beider Methoden ist die Callback-Funktion, die erforderlich ist und drei Parameter hat:

• currentValue: erforderlich. Aktuelles Element;
• Index: Optional. Der Index des aktuellen Elements;
• arr: Optional. Das Array-Objekt, zu dem das aktuelle Element gehört.

sei arr = [1, 2, 3, 4, 5]
arr.find(Artikel => Artikel > 2) 

// Ausgabe: 3

sei arr = [1, 2, 3, 4, 5]
arr.findIndex(Artikel => Artikel > 2) 

// Ausgabe: 2

Die Methoden find() und findIndex() sind fast identisch, außer dass sie unterschiedliche Ergebnisse zurückgeben:

• find(): gibt den ersten Wert zurück, der die Bedingungen erfüllt;
• findIndex: Gibt den Indexwert des ersten Werts zurück, der die Bedingung zurückgibt.

Beachten:

• Bei leeren Arrays führen die beiden Methoden die Funktionen nicht aus;
• Beide Methoden ändern das ursprüngliche Array nicht.

8. Schlüssel(), Werte(), Einträge()

Alle drei Methoden geben ein Array-Iterationsobjekt zurück und der Inhalt des Objekts unterscheidet sich geringfügig:

• keys() gibt den Indexwert des Arrays zurück;
• values() gibt die Elemente eines Arrays zurück;
• entries() gibt ein Array von Schlüssel-Wert-Paaren zurück.

Die Syntax der drei Methoden ist wie folgt:

array.schlüssel()
array.werte()
array.einträge()

Diese drei Methoden haben keine Parameter:

let arr = ["Banane", "Orange", "Apfel", "Mango"];
const iterator1 = arr.keys();
const iterator2 = arr.values() 
const iterator3 = arr.entries() 

für (let item of iterator1) {
  konsole.log(Element);
}
// Ausgabe: 0 1 2 3

für (let item of iterator2) {
  konsole.log(Element);
}
// Ausgabe: Banane Orange Apfel Mango

für (let item of iterator3) {
  konsole.log(Element);
}
// Ausgabe: [0, 'Banane'] [1, 'Orange'] [2, 'Apfel'] [3, 'Mango']

Zusammenfassen:

2. Objektdurchquerungsmethode

1. für in

for…in wird hauptsächlich zum Durchlaufen von Objekteigenschaften verwendet. Bei jeder Ausführung des Codes in der Schleife werden die Eigenschaften des Objekts bearbeitet. Die Syntax lautet wie folgt:

für (var im Objekt) {
Der auszuführende Codeblock
}

Zwei der Parameter sind:

• var: erforderlich. Die angegebene Variable kann ein Array-Element oder eine Objekteigenschaft sein.
• Objekt: erforderlich. Das zu iterierende Objekt.

var obj = {a: 1, b: 2, c: 3}; 
 
für (var i in obj) { 
    console.log('Schlüsselname:', i); 
    console.log('Schlüsselwert:', obj[i]); 
}

Ausgabe:

Schlüsselname: a
Schlüsselwert: 1
Schlüsselname: b
Schlüsselwert: 2
Schlüsselname: c
Schlüsselwert: 3

Beachten:

• Die Methode „for in“ durchläuft nicht nur alle aufzählbaren Eigenschaften des aktuellen Objekts, sondern auch die Eigenschaften in seiner Prototypenkette.

2. Objekt.Schlüssel(), Objekt.Werte(), Objekt.Einträge()

Diese drei Methoden werden zum Durchlaufen von Objekten verwendet. Sie geben ein Array zurück, das aus den aufzählbaren Eigenschaften des angegebenen Objekts besteht (ausgenommen geerbte und Symboleigenschaften). Die Reihenfolge der Array-Elemente entspricht der Reihenfolge, die beim normalen Durchlaufen des Objekts zurückgegeben wird. Die von diesen drei Elementen zurückgegebenen Werte lauten wie folgt:

• Object.keys(): Gibt ein Array zurück, das die Schlüsselnamen des Objekts enthält;
• Object.values(): Gibt ein Array zurück, das die Schlüsselwerte des Objekts enthält;
• Object.entries(): Gibt ein Array zurück, das die Schlüssel und Werte des Objekts enthält.

lass obj = { 
  ID: 1, 
  Name: 'Hallo', 
  Alter: 18 
};
console.log(Object.keys(obj)); // Ausgabe: ['id', 'name', 'age']
console.log(Object.values(obj)); // Ausgabe: [1, 'hallo', 18]
console.log(Object.keys(obj)); // Ausgabe: [['id', 1], ['name', 'hallo'], ['alter', 18]

Beachten

• Die Werte im von der Methode Object.keys() zurückgegebenen Array sind alle Zeichenfolgen. Dies bedeutet, dass Schlüsselwerte, die keine Zeichenfolgen sind, in Zeichenfolgen konvertiert werden.
• Die Eigenschaftswerte im Ergebnisarray sind alle aufzählbaren Eigenschaften des Objekts selbst, ausgenommen geerbte Eigenschaften.

3. Objekt.getOwnPropertyNames()

Die Methode Object.getOwnPropertyNames() ähnelt Object.keys(). Sie akzeptiert ebenfalls ein Objekt als Parameter und gibt ein Array zurück, das alle Eigenschaftsnamen des Objekts selbst enthält. Es können jedoch nicht aufzählbare Eigenschaften zurückgegeben werden.

let a = ['Hallo', 'Welt'];
 
Objekt.keys(a) // ["0", "1"]
Object.getOwnPropertyNames(a) // ["0", "1", "Länge"]

Beide Methoden können verwendet werden, um die Anzahl der Eigenschaften eines Objekts zu zählen:

var obj = { 0: "a", 1: "b", 2: "c"};
Objekt.getOwnPropertyNames(obj) // ["0", "1", "2"]
Objekt.Schlüssel(Objekt).Länge // 3
Objekt.getOwnPropertyNames(obj).length // 3

4. Objekt.getOwnPropertySymbols()

Die Methode Object.getOwnPropertySymbols() gibt ein Array der Symboleigenschaften des Objekts zurück, mit Ausnahme der Zeichenfolgeneigenschaften:

lass obj = {a: 1}

// Füge dem Objekt eine nicht aufzählbare Symboleigenschaft hinzu Object.defineProperties(obj, {
 [Symbol('baz')]: {
  Wert: 'Symbol baz',
  aufzählbar: falsch
 }
})
 
// Dem Objekt eine aufzählbare Symboleigenschaft hinzufügen obj[Symbol('foo')] = 'Symbol foo'
 
Object.getOwnPropertySymbols(obj).forEach((Schlüssel) => {
 console.log(Objekt[Schlüssel]) 
})

// Ausgabe: Symbol baz Symbol foo

5. Reflect.ownKeys()

Reflect.ownKeys() gibt ein Array zurück, das alle Eigenschaften des Objekts selbst enthält. Es ähnelt Object.keys(), das die Eigenschaftsschlüssel zurückgibt, aber keine nicht aufzählbaren Eigenschaften einschließt, während Reflect.ownKeys() alle Eigenschaftsschlüssel zurückgibt:

var obj = {
	ein: 1,
	b: 2
}
Objekt.defineProperty(obj, 'Methode', {
	Wert: Funktion () {
	    alert("Nicht aufzählbare Eigenschaft")
	},
	aufzählbar: falsch
})

Konsole.log(Objekt.Schlüssel(Objekt))
// ["a", "b"]
console.log(Reflect.ownKeys(obj))
// ["a", "b", "Methode"]

Beachten:

• Object.keys(): entspricht der Rückgabe eines Arrays von Objektattributen;
• Reflect.ownKeys(): Entspricht Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj).

Zusammenfassen:

3. Andere Durchquerungsmethoden

1. für

Die For-Schleife ist wahrscheinlich die am häufigsten verwendete Schleifenmethode. Sie besteht aus drei Ausdrücken: Deklarieren von Schleifenvariablen, Beurteilen von Schleifenbedingungen und Aktualisieren von Schleifenvariablen. Die drei Ausdrücke sind durch Semikolon getrennt. Sie können eine temporäre Variable verwenden, um die Länge des Arrays zwischenzuspeichern und so zu vermeiden, dass die Arraylänge wiederholt abgerufen werden muss. Der Optimierungseffekt ist deutlicher, wenn das Array groß ist.

Konstanten arr = [1,2,3,4,5]
für(sei i = 0, len = arr.length; i < len; i++ ){
  Konsole.log(arr[i])
}

Bei der Ausführung werden zuerst die Ausführungsbedingungen beurteilt und dann ausgeführt. Mit der For-Schleife können Arrays, Zeichenfolgen, arrayähnliche Objekte, DOM-Knoten usw. durchlaufen werden. Das ursprüngliche Array kann geändert werden.

2. während

Die Endbedingung in der While-Schleife kann verschiedene Typen haben, wird aber letztendlich in einen Booleschen Wert umgewandelt. Die Konvertierungsregeln lauten wie folgt.

• Boolesch: wahr ist wahr, falsch ist falsch;
• Zeichenfolge: Eine leere Zeichenfolge ist falsch und alle nicht leeren Zeichenfolgen sind wahr.
• Zahl: 0 ist falsch, eine Zahl ungleich Null ist wahr;
• null/Undefiniert/NaN: alles falsch;
• Einspruch: Alles wahr.

sei num = 1;
            
während (Zahl < 10){
    konsole.log(num);
    Zahl++;
}

Während gilt das Gleiche wie für. Beide beurteilen zuerst und führen dann aus. Eine Schleife führt Code aus, solange eine angegebene Bedingung erfüllt ist.

3. tun / während

Diese Methode wird zuerst ausgeführt und dann beurteilt. Auch wenn die Anfangsbedingung nicht erfüllt ist, wird die do/while-Schleife mindestens einmal ausgeführt.

sei num = 10;
            
Tun
	{
    konsole.log(num);
    Nummer--;
  }
während(Zahl >= 0);
            
console.log(Zahl); //-1

Es wird nicht empfohlen, do/while zum Iterieren über ein Array zu verwenden.

4. für warten auf

Die Methode for await...of wird als asynchroner Iterator bezeichnet und hauptsächlich zum Durchlaufen asynchroner Objekte verwendet. Es handelt sich um eine in ES2018 eingeführte Methode.

Die Anweisung for await...of erstellt eine Iterationsschleife über asynchrone oder synchrone iterierbare Objekte, einschließlich String-, Array-, arrayähnliche, Map-, Set- und benutzerdefinierte asynchrone oder synchrone iterierbare Objekte. Diese Anweisung kann nur in einer asynchronen Funktion verwendet werden:

Funktion Gen (Zeit) {
  returniere neues Promise((lösen,ablehnen) => {
    setzeTimeout(Funktion () {
       Auflösung (Zeit)
    },Zeit)
  })
}

asynchroner Funktionstest () {
   sei arr = [Gen(2000),Gen(100),Gen(3000)]
   für await (let item of arr) {
      console.log(Datum.jetzt(),Element)
   }
}
prüfen()

Ausgabe:

Zusammenfassen

Damit ist dieser Artikel über 24 JavaScript-Loop-Traversal-Methoden abgeschlossen. Weitere Informationen zu JavaScript-Loop-Traversal-Methoden finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!