Iterable JavaScript

Obsah

Iterovatelné objekty jsou objekty, které lze iterovat pomocí for..of.

Technicky musí iterable implementovat metodu Symbol.iterator.

Iterace přes řetězec

K iteraci prvků řetězce můžete použít smyčku for..of:

Příklad

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

Zkuste to sami →

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

Iterace přes pole

K iteraci prvků pole můžete použít smyčku for..of:

Příklad

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

Zkuste to sami →

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

Iterátory JavaScriptu

Protokol iterátoru definuje, jak vytvořit sekvenci hodnot z objektu.

Objekt se stane iterátorem, když implementuje metodu next().

Metoda next() musí vrátit objekt se dvěma vlastnostmi:

hodnota (další hodnota)
hotovo (pravda nebo nepravda)

value: Hodnota vrácená iterátorem
(Lze vynechat, pokud je hotovo pravdivé)
done: pravda, pokud byl iterátor dokončen
false, pokud iterátor vytvořil novou hodnotu

Home Made Iterable

Tato iterovatelná vrací nikdy nekončící: 10,20,30,40,.... Vždy next() se nazývá:

Příklad

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

Zkuste to sami →

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

Problém s podomácku vyrobeným iterovatelným:

Nepodporuje JavaScriptový příkaz for..of.

Iterovatelný JavaScript je objekt, který má Symbol.iterator.

Symbol.iterator je funkce, která vrací funkci next().

Iterovatelný lze iterovat pomocí kódu: for (const x of iterable) { }

Příklad

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

Nyní můžete použít for..of

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

Zkuste to sami →

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

Metoda Symbol.iterator je volána automaticky for..of. <p>Můžeme to ale udělat i „ručně“

Příklad

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

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

Zkuste to sami →

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