JavaScript Iterables

Indholdsfortegnelse

Iterable objekter er objekter, der kan itereres over med for..of.

Teknisk set skal iterables implementere Symbol.iterator metoden.

Iteration over en streng

Du kan bruge en for..of-løkke til at iterere over elementerne i en streng:

Eksempel

for (const x of "W3Schools") {
  // code block to be executed
}

Prøv det selv →

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

Iteration over et array

Du kan bruge en for..of-løkke til at iterere over elementerne i et array:

Eksempel

for (const x of [1,2,3,4,5]) {
  // code block to be executed
}

Prøv det selv →

<!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 iteratorer

iterator-protokollen definerer, hvordan man producerer en sekvens af værdier fra et objekt.

Et objekt bliver en iterator, når det implementerer en next() metode.

Metoden next() skal returnere et objekt med to egenskaber:

værdi (den næste værdi)
udført (sandt eller falsk)

value: Værdien returneret af iteratoren
(Kan udelades, hvis det er sandt)
done: sand hvis iteratoren er fuldført
false hvis iteratoren har produceret en ny værdi

Hjemmelavet Iterable

Denne iterable returnerer uendelig: 10,20,30,40,... Hver gang next() hedder:

Eksempel

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

Prøv det selv →

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

Problemet med en hjemmelavet iterabel:

Det understøtter ikke JavaScript-sætningen for..of.

En JavaScript iterable er et objekt, der har en Symbol.iterator.

Symbol.iterator er en funktion, der returnerer en next() funktion.

En iterabel kan gentages med koden: for (const x of iterable) { }

Eksempel

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

Nu kan du bruge for..of

for (const num of myNumbers) {
  // Any Code Here
}

Prøv det selv →

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

Symbol.iterator-metoden kaldes automatisk af for..of. <p>Men vi kan også gøre det "manuelt"

Eksempel

let iterator = myNumbers[Symbol.iterator]();

while (true) {
  const result = iterator.next();
  if (result.done) break;
  // Any Code Here
}

Prøv det selv →

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