Detaillierte Diskussion der Unterschiede zwischen Schleifen in JavaScript

Vorwort

Bei der Verwendung von Schleifen in JavaScript müssen zwei wichtige Dinge korrekt definiert werden: aufzählbare Eigenschaften und iterierbare Objekte.

Aufzählbare Eigenschaften

Eines der bestimmenden Merkmale eines aufzählbaren Objekts besteht darin, dass wir das interne Aufzählflag (enumerable) auf „true“ setzen, wenn wir einem Objekt über den Zuweisungsoperator eine Eigenschaft zuweisen. Dies ist der Standardwert.

Wir können dieses Verhalten jedoch ändern, indem wir es auf „False“ setzen.

Als Faustregel gilt, dass aufzählbare Eigenschaften immer in einer for...in-Schleife vorkommen.

Schauen wir uns das an:

const Benutzer = {}
Benutzer.Sprachen = "JavaScript"
​
Object.getOwnPropertyDescriptor(Benutzer, 'Sprachen')
// Ausgabe -> { Wert: 'JavaScript', beschreibbar: true, aufzählbar: true, konfigurierbar: true }
​
// Mehr Kontrolle über die Eigenschaften haben, die wir in der Schleife verwenden Object.defineProperty(users, 'role', { value: 'Admin', writable: true, enumerable: false })
​
für (const item in users) {
  console.log(item) // Sprachen
}

Wie Sie sehen, haben wir der Benutzervariable eine Spracheneigenschaft hinzugefügt und die Methode Object.getOwnPropertyDescriptor verwendet, um die aufzählbare Eigenschaft des Spracheneigenschaftsdeskriptors als „true“ auszugeben.

Verwenden Sie Object.defineProperty, um das Rollenattribut hinzuzufügen und enumerable auf false zu setzen. Das Rollenattribut wird in der for...in-Schleife nicht ausgegeben. Das heißt, die Eigenschaften in der for...in-Schleife sind aufzählbare Eigenschaften.

Iterierbare Objekte

Ein Objekt ist iterierbar, wenn es sein Iterationsverhalten definiert. In diesem Fall definiert der Wert, der in der for...of-Konstruktion durchlaufen wird, sein Iterationsverhalten. Zu den iterierbaren integrierten Typen zählen Array-, String-, Set- und Map-Objekte, die nicht iterierbar sind, da sie keine @iterator-Methode angeben.

Grundsätzlich sind in JavaScript alle iterierbaren Objekte aufzählbare Objekte, aber nicht alle aufzählbaren Objekte sind iterierbare Objekte.

Man kann es sich folgendermaßen vorstellen: „for...in“ sucht nach Objekten in den Daten, während „for...of“ nach wiederholten Sequenzen sucht.

Sehen wir uns an, wie das alles funktioniert, wenn es mit dem Array-Datentyp verwendet wird:

const Sprachen = ['JavaScript', 'Python', 'Go']
​
// Verwenden mit for...in-Schleife for (const language in languages) {
  console.log(Sprache)
}
// Ausgabe
// 0
// 1
// 2
​
// Mit for...of-Schleife verwenden for (const language of languages) {
  console.log(Autor)
}
// Ausgabe -> JavaScript Python Go

Bei der Verwendung dieser Konstruktion müssen Sie Folgendes bedenken: Wenn typeof aufgerufen wird und die Ausgabe ein Objekt ist, können Sie eine for...in-Schleife verwenden.

Schauen wir uns diese Operation für die Sprachenvariable an:

typeof Sprachen // "Objekt" -> so können wir für in verwenden

Dies mag zunächst überraschend erscheinen, es ist jedoch wichtig zu wissen, dass Arrays ein spezieller Objekttyp sind, der durch Indizes schlüsselt. Es kann uns eine große Hilfe sein, zu wissen, dass for...in nach Objekten in einer Konstruktion sucht. Wenn die for...in-Schleife ein Objekt findet, durchläuft sie jede Taste.

Wir können die Funktionsweise der for..in-Schleife auf dem Sprachen-Array wie folgt visualisieren:

const Sprachen = {
  0: 'JavaScript',
  1: 'Python',
  2: „Los“
}

Hinweis: for...in durchläuft die Schlüssel ohne bestimmte Reihenfolge, wenn es auf ein Objekt zurückgeführt werden kann (oder von einer Objekt-Prototypenkette erbt).

Wenn außerdem ein Iterator für ... der Konstruktion implementiert wird, wird bei jeder Iteration eine Schleife über den Wert ausgeführt.

In forEach- und Map-Methoden

Obwohl mit den Methoden forEach und map dasselbe Ziel erreicht werden kann, unterscheiden sich ihr Verhalten und ihre Leistungsmerkmale.

Auf einer grundlegenden Ebene erhalten Funktionen beim Aufruf einen Rückruf als Argument.

Betrachten Sie den folgenden Ausschnitt:

const scoresEach = [2, 4, 8, 16, 32]
const scoresMap = [2, 4, 8, 16, 32]
const Quadrat = (Zahl) => Zahl * Zahl

Sehen wir uns einige der Unterschiede in ihrer Funktionsweise genauer an.

forEach gibt „undefiniert“ zurück, während map ein neues Array zurückgibt:

let newScores = []
const resultWithEach = scoresEach.forEach(score => {
  const newScore = Quadrat(Punktzahl)
  neueErgebnisse.push(neuerScore)
})
​
const resultWithMap = scoresMap.map(Quadrat)
​
console.log(resultWithEach) // undefiniert
console.log(ErgebnisMitMap) // [4, 16, 64, 256, 1024]

Map ist eine reine Funktion, während forEach einige Mutationen durchführt:

console.log(neueErgebnisse) // [4, 16, 64, 256, 1024]

Meiner Meinung nach unterstützt Map das Paradigma der funktionalen Programmierung. Wir müssen nicht immer Mutationen durchführen, um das gewünschte Ergebnis zu erhalten, anders als bei forEach, wo wir die Variable newScores mutieren mussten. Bei jedem Durchlauf erzeugt die Map-Funktion bei gleicher Eingabe die gleichen Ergebnisse. In der Zwischenzeit wird das forEach-Gegenstück aus dem vorherigen Wert der letzten Mutation gezogen.

Kettenanrufe

Map kann zum Verketten von Aufrufen verwendet werden, da das zurückgegebene Ergebnis ein Array ist. Daher kann jede andere Array-Methode unmittelbar auf das Ergebnis angewendet werden. Mit anderen Worten, wir können Methoden wie „Filter“, „Reduce“, „Some“ usw. aufrufen. Dies ist mit forEach nicht möglich, da der Rückgabewert undefiniert ist.

Leistung

Die Leistung der Map-Methode ist häufig besser als die der forEach-Methode.

Überprüfen Sie die Leistung eines entsprechenden Codeblocks, der mit map und forEach implementiert wurde. Im Durchschnitt werden Sie feststellen, dass Kartenfunktionen mindestens 50 % schneller ausgeführt werden.

abschließend

Von allen oben besprochenen Schleifenkonstrukten ist diejenige, die uns die meiste Kontrolle gibt, die for..of-Schleife. Wir können es mit den Schlüsselwörtern „return“, „continue“ und „break“ verwenden. Das heißt, wir können angeben, was mit jedem Element im Array geschehen soll und ob es vorzeitig verlassen oder übersprungen werden soll.

Damit ist dieser Artikel über die Unterschiede zwischen Schleifen in JavaScript abgeschlossen. Weitere Informationen zu den Unterschieden zwischen JavaScript-Schleifen 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!