Detaillierte Erklärung der allgemeinen For-Schleife in JavaScript-Anweisungen

Es gibt viele Schleifenanweisungen in JavaScript, darunter for-, for in-, for of- und forEach-Schleifen. Heute werden wir die Unterstützung und Unterschiede von Schleifenanweisungen für vier Datenstrukturen vergleichen: Array, Object, Set (ES6) und Map (ES6).

Erstellen Sie vier neue Testdatentypen

sei arr = [1, 2, 3, 4, 5, 6];
sei Objekt = { a: 1, b: 2, c: 3 };
lass map = neue Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]);
setze = neues Set(['a', 'b', 'c']);

1 für

In Arrays können gewöhnliche For-Schleifen verwendet werden. Beim Durchlaufen eines Arrays durchlaufen Sie den Array-Index und erhalten den Wert über den Index.

for (let i = 0; i < arr.length; i++) { // i ist der Index
  Konsole.log(i)
  Konsole.log(arr[i])
}

2 für in

for in kann sowohl im Array als auch im Objekt verwendet werden. Dabei ist zu beachten, dass auch die Eigenschaften des Prototyps ausgeschleift werden.

Anordnung

sei arr = [1, 2, 3, 4, 5, 6];
Array.prototype.a = "1"

for (let i in arr) { // i ist der Index
  Konsole.log(i)
  Konsole.log(arr[i])
}

Sie können sehen, dass der Prototyp ebenfalls durchgeschleift wird, aber das ist nicht das, was wir wollen. Wir können die Eigenschaften des Prototyps über hasOwnProperty herausfiltern.

sei arr = [1, 2, 3, 4, 5, 6];
Array.prototype.a = "1"

for (let i in arr) { // i ist der Index
  wenn (arr.hasOwnProperty(i)) {
    Konsole.log(i)
    Konsole.log(arr[i])
  }
}

Objekt

lass obj = { a: 1, b: '2', c: 3 };
Objekt.prototyp.d = 4

for (let key in obj) { // key ist der Schlüssel console.log(key)
  console.log(Objekt[Schlüssel])
}

Das gleiche Problem besteht für Object. Die Prototyp-Eigenschaften werden ebenfalls durchgeschleift und die Eigenschaften des Prototyps können auch über hasOwnProperty herausgefiltert werden.

for (let key in obj) { // key ist der Schlüssel if (obj.hasOwnProperty(key)) {
    console.log(Schlüssel)
    console.log(Objekt[Schlüssel])
  }
}

3 für von

für of kann in Array, Object, Set und Map verwendet werden.

Anordnung

Da es sich bei Arrays im Wesentlichen um Objekte handelt, können wir definierte Methoden im impliziten Prototyp (__proto__) finden.

for (let key of arr.keys()) { // key ist der Index console.log(key)
}
für (let value of arr) { // Wert ist der Wert console.log(value)
}
für (let value of arr.values()) { // Wert ist der Wert console.log(value)
}
for (let [key, value] of arr.entries()) { // Schlüssel ist der Indexwert ist der Wert console.log(key,value)
}

Objekt

for (let [key, value] of Object.entries(obj)) { // Schlüssel ist der Indexwert ist der Wert console.log(key, value)
}

Satz

Da Set keine Duplikate aufweist, sind die Schlüssel und Werte konsistent, was bedeutet, dass die folgenden vier Ausgaben konsistent sind

für (let key von set.keys()) {  
  console.log(Schlüssel)
}
für (let Wert von set) {     
  console.log(Wert)
}
für (let Wert von set.values()) { 
  console.log(Wert)
}
für (let [Schlüssel, Wert] von set.entries()) { 
  console.log(Schlüssel, Wert)
}

Karte

für (let Schlüssel von map.keys()) { 
  console.log(Schlüssel)
}
für (let Wert der Karte) {     
  console.log(Wert)
}
für (let Wert von map.values()) { 
  console.log(Wert)
}
für (let [Schlüssel, Wert] von map.entries()) { 
  console.log(Schlüssel, Wert)
}

Mit den Anweisungen „break“ und „continue“ können Sie aus der Schleife herausspringen oder mit „return“ aus dem Funktionskörper zurückkehren.

for (let key of arr.keys()) { // Schlüssel ist ein Index if (key == 3) {
    zurückkehren
  }
  console.log(Schlüssel)
}
for (let key of arr.keys()) { // Schlüssel ist ein Index if (key == 3) {
    brechen
  }
  console.log(Schlüssel)
}
for (let key of arr.keys()) { // Schlüssel ist ein Index if (key == 3) {
    weitermachen
  }
  console.log(Schlüssel)
}

4 fürJeden

Die forEach-Schleife kann in Array, Set und Map verwendet werden. Die Methode kann jedoch keine „break“- oder „continue“-Anweisungen verwenden, um aus der Schleife zu springen, und sie kann auch keine „return“-Anweisungen verwenden, um aus dem Funktionskörper zurückzukehren.

Anordnung

arr.forEach((Wert, Index) => {
  console.log(Wert, Index)
})

Satz

set.forEach((Wert, Schlüssel) => {
  console.log(Wert, Schlüssel)
})

Karte

map.forEach((Wert, Schlüssel) => {
  console.log(Wert, Schlüssel)
})

unterbrechen, fortsetzen und zurückkehren

Verwenden Sie „Weiter“, um zur Eingabeaufforderung zu gelangen

Unzulässige Continue-Anweisung: keine umgebende Iterationsanweisung

Mit „break“ wird

Unzulässige Break-Anweisung

Die Verwendung von return führt nicht zur Rückkehr, sondern setzt die Schleife fort

5 Fazit

In Arrays können gewöhnliche For-Schleifen verwendet werden. Beim Durchlaufen eines Arrays durchlaufen Sie den Index des Array-Index und erhalten den Wert über den Index; „for in“ kann sowohl im Array als auch im Objekt verwendet werden. Es ist jedoch zu beachten, dass die Eigenschaften des Prototyps ebenfalls in einer Schleife ausgegeben werden; for of kann in Array, Object, Set und Map verwendet werden. Sie können auch „break“, „continue“ und „return“ verwenden; die forEach-Schleife kann in Array, Set und Map verwendet werden. Die Methode kann jedoch keine „break“- oder „continue“-Anweisungen verwenden, um aus der Schleife zu springen, und sie kann auch keine „return“-Anweisungen verwenden, um aus dem Funktionskörper zurückzukehren.

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der häufig verwendeten for-Schleife in JavaScript-Anweisungen. Weitere verwandte js-for-Schleifeninhalte 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!