JavaScript Iterables

Πίνακας περιεχομένων

Τα επαναληπτικά αντικείμενα είναι αντικείμενα που μπορούν να επαναληφθούν με για..of.

Τεχνικά, τα iterables πρέπει να εφαρμόζουν τη μέθοδο Symbol.iterator.

Επανάληψη σε μια χορδή

Μπορείτε να χρησιμοποιήσετε έναν βρόχο for..of για να επαναλάβετε τα στοιχεία μιας συμβολοσειράς:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Επανάληψη σε έναν πίνακα

Μπορείτε να χρησιμοποιήσετε έναν βρόχο for..of για να επαναλάβετε τα στοιχεία ενός πίνακα:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Το πρωτόκολλο επαναλήπτη ορίζει τον τρόπο παραγωγής μιας ακολουθίας τιμών από ένα αντικείμενο.

Ένα αντικείμενο γίνεται επαναληπτικός όταν εφαρμόζει μια μέθοδο next().

Η μέθοδος next() πρέπει να επιστρέψει ένα αντικείμενο με δύο ιδιότητες:

τιμή (η επόμενη τιμή)
έγινε (αληθές ή ψευδές)

value: Η τιμή που επιστρέφεται από τον επαναλήπτη
(Μπορεί να παραλειφθεί εάν είναι αληθές)
done: true εάν ο επαναλήπτης έχει ολοκληρωθεί
false εάν ο επαναλήπτης έχει δημιουργήσει μια νέα τιμή

Home Made Iterable

Αυτό το επαναλαμβανόμενο δεν τελειώνει ποτέ: 10,20,30,40,.... Κάθε φορά next() ονομάζεται:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Το πρόβλημα με ένα σπίτι που έγινε επαναλαμβανόμενο:

Δεν υποστηρίζει τη δήλωση JavaScript για..of.

Ένα επαναληπτικό JavaScript είναι ένα αντικείμενο που έχει Symbol.iterator.

Το Symbol.iterator είναι μια συνάρτηση που επιστρέφει μια συνάρτηση next().

Ένας επαναληπτικός μπορεί να επαναληφθεί με τον κώδικα: for (const x του 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};
    }
  };
}

Τώρα μπορείτε να χρησιμοποιήσετε το για...από

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

Δοκιμάστε το μόνοι σας →

<!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 καλείται αυτόματα από το για..of. <p>Αλλά μπορούμε να το κάνουμε και "χειροκίνητα"

Παράδειγμα

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

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

Δοκιμάστε το μόνοι σας →

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