Erfahren Sie mehr über for...of-Schleifen in JS

Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis der for...of-Schleife in JavaScript. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Die von der for...of-Anweisung erstellte Schleife kann Objekte durchlaufen. Das in ES6 eingeführte for...of kann die beiden anderen Schleifenanweisungen for...in und forEach() ersetzen, und diese neue Schleifenanweisung unterstützt das neue Iterationsprotokoll. Mit for...of können Sie iterierbare Datenstrukturen wie Arrays, Strings, Karten, Mengen usw. durchlaufen. Syntax

Arrays

Arrays sind einfache Listen, die wie Objekte aussehen. Der Array-Prototyp verfügt über verschiedene Methoden, mit denen Operationen darauf ausgeführt werden können, z. B. Traversal. Im folgenden Beispiel wird for...of verwendet, um ein Array zu durchlaufen:

• for (variable of iterable) {
      statement
  }

  Das Ergebnis besteht darin, jeden Wert im iterable-Array auszugeben.

• Map

  
  

Map-Objekte enthalten Schlüssel-Wert--Paare. Objekte und Grundwerte können als Schlüssel oder Wert behandelt werden. Das Map-Objekt durchläuft Elemente gemäß der Einfügemethode. Mit anderen Worten: for...of gibt bei jeder Iteration ein Array von kay-value-Paaren zurück. Mit

const iterable = ['mini', 'mani', 'mo'];

for (const value of iterable) {
    console.log(value);
}

// Output:
// => mini
// => mani
// => mo

Set

Set-Objekten können Sie eindeutige Werte jedes Typs speichern, bei denen es sich um primitive Werte oder Objekte handeln kann. Ein Set-Objekt ist lediglich eine Sammlung von Werten. Die Iteration von Set-Elementen basiert auf der Einfügereihenfolge und kann für jeden Wert nur einmal erfolgen. Wenn Sie ein Set mit demselben Element mehr als einmal erstellen, wird es immer noch als einzelnes Element betrachtet.

const iterable = new Map([['one', 1], ['two', 2]]);

for (const [key, value] of iterable) {
    console.log(`Key: ${key} and Value: ${value}`);
}

// Output:
// => Key: one and Value: 1
// => Key: two and Value: 2

Obwohl das von uns erstellte Set mehrere 1 und 2 enthält, ist die Traversal-Ausgabe nur 1 und 2.

iterable数组中的每一个值。

Map

Map对象持有key-value对。对象和原始值可以当作一个key或value。Map对象根据插入的方式遍历元素。换句话说，for...of在每次迭代中返回一个kay-value对的数组。

const iterable = new Set([1, 1, 2, 2, 1]);

for (const value of iterable) {
    console.log(value);
}

// Output:
// => 1
// => 2

Set

Set对象允许你存储任何类型的唯一值，这些值可以是原始值或对象。Set对象只是值的集合。Set元素的迭代是基于插入顺序，每个值只能发生一次。如果你创建一个具有相同元素不止一次的Set，那么它仍然被认为是单个元素。

const iterable = 'javascript';

for (const value of iterable) {
    console.log(value);
}

// Output:
// => "j"
// => "a"
// => "v"
// => "a"
// => "s"
// => "c"
// => "r"
// => "i"
// => "p"
// => "t"

尽管我们创建的Set有多个1和2，但遍历输出的只有1和2。

String

字符串用于以文本形式存储数据。

function args() {
    for (const arg of arguments) {
        console.log(arg);
    }
}

args('a', 'b', 'c');

// Output:
// => a
// => b
// => c

在这里，对字符串执行迭代，并打印出每个索引上(index)的字符。

Arguments Object

把一个参数对象看作是一个类似数组的对象，与传递给函数的参数相对应。这是一个用例：

function fn(){
return 'functions';
}

args('a', 'w3cplus', 'c',{'name': 'airen'},['a',1,3],fn());

// Output:
// => "a"
// => "w3cplus"
// => "c"
// => Object {
// =>     "name": "airen"
// => }
// => Array [
// =>    "a",
// =>    1,
// =>    3
// => ]
// => "functions"

你可能在想，到底发生了什么？正如我前面说过的，当调用函数时，参数会接收传入args()函数的任何参数。因此，如果我们将20个参数传递给args()函数，我们将输出20个参数。

在上面的示例基础上做一些调整，比如给args()函数，传入一个对象、数组和函数：

function* generator(){ 
    yield 1; 
    yield 2; 
    yield 3; 
};

for (const g of generator()) { 
    console.log(g); 
}

// Output:
// => 1
// => 2
// => 3

Generators

生成器是一个函数，它可以退出函数，稍后重新进入函数。

const iterable = ['mini', 'mani', 'mo'];

for (const value of iterable) {
console.log(value);
break;
}

// Output:
// => mini

function* 定义一个生成器函数，该函数返回生成器对象。更多关于生成器相关的信息，可以点击这里。

关闭迭代器

JavaScript中提供了四种已知的终止循环的方法：break、continue、return和throw。来看一个示例：

const obj = { fname: 'foo', lname: 'bar' };

for (const value of obj) { // TypeError: obj[Symbol.iterator] is not a function
    console.log(value);
}

在这个例子中，我们使用break关键词来终止一个循环，并且只打印出一个mini。

普通对象不可迭代

for...of循环只能和迭代一起工作。但普通对象是不可迭代的。让我们看看：

const obj = { length: 3, 0: 'foo', 1: 'bar', 2: 'baz' };
const array = Array.from(obj);
for (const value of array) { 
    console.log(value);
}
// Output:
// => foo
// => bar
// => baz

在这里，我们定义了一个普通对象obj，当我们尝试for...of给obj进行操作时，会报错：TypeError: obj[Symbol.iterator] is not a function。

我们可以把一个类似数组的对象转找成一个数组。对象将具有length属性，它的元素可以被索引。来看一个示例：

Array.prototype.newArr = () => {};
Array.prototype.anotherNewArr = () => {};
const array = ['foo', 'bar', 'baz'];
for (const value in array) { 
    console.log(value);
}
// Outcome:
// => 0
// => 1
// => 2
// => newArr
// => anotherNewArr

Array.from()方法从类似数组（Array-lik）或迭代对象中创建了一个新的数组实例。

<span style="font-size: 20px;">for...of</span> vs. for...in

for...in在循环中将遍历对象中所有可枚举属性。

Array.prototype.newArr = function() {};
const array = ['foo', 'bar', 'baz'];
for (const value of array) { 
    console.log(value);
}
// Outcome:
// => foo
// => bar
// => baz

for...in不仅可以枚举数组里声明的值，它还可以从构造函数的原型中寻找继承的非枚举属性，比如上例中的newArr和anotherNewArrString

🎜🎜Strings werden zum Speichern von Daten in Textform verwendet. 🎜rrreee🎜Hier durchlaufen Sie die Zeichenfolge und geben die Zeichen an jedem Index aus (index). 🎜🎜🎜Argumentenobjekt🎜🎜🎜Stellen Sie sich ein Argumentobjekt als ein Array-ähnliches Objekt vor, das den an die Funktion übergebenen Argumenten entspricht. Hier ist ein Anwendungsfall: 🎜rrreee🎜Du denkst vielleicht: Was zum Teufel ist los? Wie ich bereits sagte, erhalten die Argumente beim Aufruf einer Funktion alle Argumente, die an die Funktion args() übergeben werden. Wenn wir also 20 Argumente an die Funktion args() übergeben, werden wir 20 Argumente ausgeben. 🎜🎜Nehmen Sie einige Anpassungen basierend auf dem obigen Beispiel vor, z. B. die Übergabe eines Objekts, eines Arrays und einer Funktion an die Funktion args(): 🎜rrreee🎜🎜Generatoren🎜🎜🎜Ein Generator ist eine Funktion, er Sie können eine Funktion verlassen und später erneut aufrufen. 🎜rrreee🎜function* definiert eine Generatorfunktion, die ein Generatorobjekt zurückgibt. Weitere Informationen zu Generatoren finden Sie hier. 🎜🎜🎜Iterator schließen🎜🎜🎜JavaScript bietet vier bekannte Methoden zum Beenden von Schleifen: break, continue, return und werfen. Schauen wir uns ein Beispiel an: 🎜rrreee🎜In diesem Beispiel verwenden wir das Schlüsselwort break, um eine Schleife zu beenden und nur einen mini auszugeben. 🎜🎜🎜Normale Objekte sind nicht iterierbar🎜🎜🎜for...ofSchleifen können nur mit Iteration funktionieren. Gewöhnliche Objekte sind jedoch nicht iterierbar. Mal sehen: 🎜rrreee🎜Hier definieren wir ein normales Objekt obj, wenn wir versuchen, for...of zu obj zu verwenden Es wird ein Fehler gemeldet: TypeError: obj[Symbol.iterator] ist keine Funktion. 🎜🎜Wir können ein Array-ähnliches Objekt in ein Array umwandeln. Das Objekt verfügt über eine length-Eigenschaft und seine Elemente können indiziert werden. Schauen wir uns ein Beispiel an: 🎜rrreee🎜 Die Methode Array.from() erstellt eine neue Array-Instanz aus einem Array-ähnlichen (Array-lik) oder iterierbaren Objekt. 🎜🎜🎜for...of🎜🎜 vs. for...in🎜🎜🎜for...inIn der Schleife werden alle aufzählbaren Eigenschaften im Objekt durchlaufen. 🎜rrreee🎜<code>for...in kann nicht nur die im Array deklarierten Werte aufzählen, sondern auch geerbte Nicht-Aufzählungseigenschaften vom Prototyp des Konstruktors finden, wie z. B. in das obige Beispiel newArr und anotherNewArr und drucken Sie sie aus. 🎜

for...of可以对数组和对象等做更具体的操作，但并不表示包括所有对象。

注意：任何具有Symbol.iterator属性的元素都是可迭代的。

Array.prototype.newArr = function() {};
const array = ['foo', 'bar', 'baz'];
for (const value of array) { 
    console.log(value);
}
// Outcome:
// => foo
// => bar
// => baz

for...of不考虑构造函数原型的不可枚举属性。它只需要查找可枚举属性并将其打印出来。

总结

理解for...of循环在开发过程中的用法，可以节省很多时间。希望本文能帮助您理解和编写JavaScript开发中的更好的循环结构。从而让你编码更快乐！

相关免费学习推荐：js视频教程

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über for...of-Schleifen in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!