JavaScript-Iterables


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Iterierbare Objekte sind Objekte, über die mit for..of iteriert werden kann.

Technisch gesehen müssen Iterables die Methode Symbol.iterator implementieren.

Iterieren über einen String

Sie können eine for..of-Schleife verwenden, um die Elemente einer Zeichenfolge zu durchlaufen:

Beispiel

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>

Iterieren über ein Array

Sie können eine for..of-Schleife verwenden, um die Elemente eines Arrays zu durchlaufen:

Beispiel

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>

JavaScript-Iteratoren

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)

value

Der vom Iterator zurückgegebene Wert
(Kann weggelassen werden, wenn done wahr ist)

done

true, wenn der Iterator abgeschlossen ist
false, wenn der Iterator einen neuen Wert erzeugt hat



Selbstgemacht, iterierbar

Diese iterierbare Funktion gibt nie endende Werte zurück: 10,20,30,40,.... Jedes Mal next() heißt:

Beispiel

// 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) {

Beispiel

// 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

Beispiel

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>