Iterierbare Objekte sind Objekte, über die mit for..of
iteriert werden kann.
Technisch gesehen müssen Iterables die Methode Symbol.iterator
implementieren.
Sie können eine for..of
-Schleife verwenden, um die Elemente einer Zeichenfolge zu durchlaufen:
for (const x of "W3Schools") {
// code block to be executed
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over a String:</p>
<p id="demo"></p>
<script>
// Create a String
const name = "W3Schools";
// List all Elements
let text = ""
for (const x of name) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Sie können eine for..of
-Schleife verwenden, um die Elemente eines Arrays zu durchlaufen:
for (const x of [1,2,3,4,5]) {
// code block to be executed
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over an Array:</p>
<p id="demo"></p>
<script>
// Create aa Array
const letters = ["a","b","c"];
// List all Elements
let text = "";
for (const x of letters) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Das Iterator-Protokoll definiert, wie eine Wertefolge aus einem Objekt erzeugt wird.
Ein Objekt wird zu einem Iterator, wenn es eine next()
-Methode implementiert.
Die Methode next()
muss ein Objekt mit zwei Eigenschaften zurückgeben:
Wert (der nächste Wert)
erledigt (wahr oder falsch)
Der vom Iterator zurückgegebene Wert
(Kann weggelassen werden, wenn done wahr ist)
true, wenn der Iterator abgeschlossen ist
false, wenn der Iterator einen neuen Wert erzeugt hat
Diese iterierbare Funktion gibt nie endende Werte zurück: 10,20,30,40,.... Jedes Mal next()
heißt:
// Home Made Iterable
function myNumbers() {
let n = 0;
return {
next: function() {
n += 10;
return {value:n, done:false};
}
};
}
// Create Iterable
const n = myNumbers();
n.next(); // Returns 10
n.next(); // Returns 20
n.next(); // Returns 30
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Home Made Iterable:</p>
<p id="demo"></p>
<script>
// Home Made Iterable
function myNumbers() {
let n = 0;
return {
next: function() {
n += 10;
return {value:n, done:false};
}
};
}
// Create Iterable
const n = myNumbers();
n.next(); // 10
n.next(); // 20
n.next(); // 30
document.getElementById("demo").innerHTML = n.next().value;
</script>
</body>
</html>
Das Problem mit einem iterierbaren Haus:
Die JavaScript-Anweisung for..of
wird nicht unterstützt.
Ein JavaScript-Iterable ist ein Objekt, das über einen Symbol.iterator verfügt.
Der Symbol.iterator
ist eine Funktion, die eine next()
-Funktion zurückgibt.
Ein Iterable kann mit dem Code iteriert werden: for (const x of iterable) {
// Create an Object
myNumbers = {};
// Make it Iterable
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}
Jetzt können Sie for..of
verwenden
for (const num of myNumbers) {
// Any Code Here
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p id="demo"></p>
<script>
// Create an Object
myNumbers = {};
// Make it Iterable
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}
let text = ""
for (const num of myNumbers) {
text += num +"<br>"
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Die Methode Symbol.iterator wird automatisch von for..of
aufgerufen. <p>Aber wir können es auch „manuell“ machen
let iterator = myNumbers[Symbol.iterator]();
while (true) {
const result = iterator.next();
if (result.done) break;
// Any Code Here
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p id="demo"></p>
<script>
// Create an Object
myNumbers = {};
// Make it Iterable
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}
// Create an Iterator
let iterator = myNumbers[Symbol.iterator]();
let text = ""
while (true) {
const result = iterator.next();
if (result.done) break;
text += result.value +"<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>