Zusammenfassung der Verwendung von drei For-Schleifenanweisungen in JavaScript (for, for...in, for...of)

Vorwort

Jeder Entwickler, der mit JS in Berührung kommt, wird zwangsläufig mit der For-Schleife zu tun haben. Schließlich ist sie eines der wesentlichen Tools für die Durchquerung. Ich glaube, dass jeder die For-Schleifenanweisungen in JavaScript satt hat. Es gibt viele Artikel darüber, wie man die For-Schleifenanweisungen im Code reduzieren kann, aber man muss zugeben, dass sie wirklich nützlich sind. Heute werde ich drei For-Loop-Anweisungen im Front-End-JavaScript zusammenfassen.

für

Dies ist wahrscheinlich die am häufigsten verwendete Schleifenanweisung. Sie ist einfach und praktisch und ihre Ausführung ist die meiste Zeit noch online. Der einzige Nachteil ist, dass sie zu gewöhnlich ist und keine Eigenschaften aufweist, weshalb viele Leute sie derzeit nicht verwenden möchten.

const array = [4, 7, 9, 2, 6];
für (let index = 0; index < array.length; index++) {
    konstantes Element = Array[Index];
    konsole.log(element);
}
// 4, 7, 9, 2, 6

für...in

Die for...in-Anweisung kann alle aufzählbaren Eigenschaften eines Objekts (außer Symbol) in beliebiger Reihenfolge durchlaufen.

const temp = {name: "temp"};
Funktion Apfel() {
    diese.Farbe = "rot";
}

Apple.prototype = temp;

const obj = neues Apple();

für (const prop in obj) {
    Konsole.log(`obj.${ prop } = ${ obj[prop] }`);
}

// Objektfarbe = rot
// Objektname = temp

Wenn Sie sich nur für die Eigenschaften des Objekts selbst und nicht für dessen Prototyp interessieren, verwenden Sie getOwnPropertyNames() oder führen Sie hasOwnProperty() aus, um zu bestimmen, ob eine Eigenschaft eine Eigenschaft des Objekts selbst ist.

const temp = {name: "temp"};
Funktion Apple() {
    diese.Farbe = "rot";
}

Apple.prototype = temp;

const obj = neues Apple();

für (const prop in obj) {
    wenn (obj.hasOwnProperty(prop)) {
        Konsole.log(`obj.${ prop } = ${ obj[prop] }`);
    }
}

// Objektfarbe = rot

Natürlich kann es auch zum Durchlaufen eines Arrays verwendet werden.

const arr = [1, 2, 3, 4, 5];
für (const key in arr) {
    console.log(Schlüssel)
}
// 0,1,2,3,4

Sie können for...in verwenden, um ein Array zu durchlaufen, es treten dabei jedoch die folgenden Probleme auf:

1. Index: Der Index ist eine Zeichenfolge (beachten Sie, keine Zahl) und kann nicht direkt für geometrische Operationen verwendet werden.
2. Die Durchlaufreihenfolge muss nicht der internen Reihenfolge des tatsächlichen Arrays entsprechen (sie kann eine zufällige Reihenfolge aufweisen).

Daher ist es im Allgemeinen nicht empfehlenswert, for...in zum Durchlaufen eines Arrays zu verwenden.

für...von

Die for...of-Anweisung erstellt eine Iterationsschleife über ein iterierbares Objekt (einschließlich Array, Map, Set, String, TypedArray, Argumentobjekt usw.), ruft den benutzerdefinierten Iterations-Hook auf und führt Anweisungen für jeden unterschiedlichen Eigenschaftswert aus.

konstantes Array = ['a', 'b', 'c'];
für (const Element des Arrays) {
    konsole.log(element);
}

// A
// B
// C

Der Unterschied zwischen for...of und for...in:

• Die for...in-Anweisung iteriert in beliebiger Reihenfolge über die aufzählbaren Eigenschaften eines Objekts.
• Die for...of-Anweisung iteriert über das iterierbare Objekt, um die zu iterierenden Daten zu definieren.

Objekt.prototype.objCustom = Funktion () { };
Array.prototype.arrCustom = Funktion () { };

lass iterierbar = [3, 5, 7];
iterable.foo = "hallo";

für (const key in iterable) {
    console.log(Schlüssel); // protokolliert 0, 1, 2, „foo“, „arrCustom“, „objCustom“
}
// 0, 1, 2, "foo", "arrCustom", "objCustom"

für (const Schlüssel des Iterables) {
    console.log(Schlüssel);
}
// 3, 5, 7

Verwenden Sie for...of, um die Map-Struktur zu durchlaufen:

let nodes = neue Map();
Knoten.set("Knoten1", "t1")
    .set("Knoten2", "t2")
    .set("node3", "t3");

für (const [Knoten, Inhalt] von Knoten) {
    Konsole.log(Knoten, Inhalt);
}
// Knoten1 t1
// Knoten2 t2
// Knoten3 t3

Es ist ersichtlich, dass es recht praktisch ist, for...of zu verwenden, um die Map-Struktur zu durchlaufen. Es wird empfohlen, es zu verwenden!

Zusammenfassen

1. Wenn Sie keine Lust mehr auf die Verwendung gewöhnlicher for-Schleifen haben, empfiehlt es sich, stattdessen for...of zu verwenden.
2. Alle drei Schleifentypen können das Schlüsselwort „break“ verwenden, um die Schleife zu beenden, oder das Schlüsselwort „continued“, um die aktuelle Schleife zu überspringen.
3. Die for...of-Schleife hat den breitesten Anwendungsbereich.

Damit ist dieser Artikel über die Verwendung von drei For-Loop-Anweisungen in JavaScript abgeschlossen. Weitere Informationen zu For-Loop-Anweisungen in JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!