Απομυθοποίηση ES6 Iterables & Iterators

Το ES6 εισάγει έναν νέο τρόπο αλληλεπίδρασης με δομές δεδομένων JavaScript - επανάληψη . Ας το απομυθοποιήσουμε.

Υπάρχουν 2 βασικές έννοιες:

  • Iterable - περιγράφεται από μια δομή δεδομένων που παρέχει έναν τρόπο έκθεσης των δεδομένων της στο κοινό. Αυτό γίνεται με την εφαρμογή μιας μεθόδου του οποίου το κλειδί είναι Symbol.iterator. Symbol.iteratorείναι ένα εργοστάσιο επαναληπτικών.
  • Iterator - περιγράφεται από μια δομή που περιέχει ένα δείκτη στο επόμενο στοιχείο στην επανάληψη.

Πρωτόκολλο

Τόσο η επαναληπτική όσο και η επανάληψη ακολουθούν ένα πρωτόκολλο που επιτρέπει στα αντικείμενα να είναι επαναλαμβανόμενα:

  • Μια διαλειτουργική πρέπει να είναι ένα αντικείμενο με επαναληπτικό συνάρτησης του οποίου το κλειδί είναι Symbol.iterator.
  • Ένας επαναληπτής πρέπει να είναι ένα αντικείμενο με μια συνάρτηση που ονομάζεται nextπου επιστρέφει ένα αντικείμενο με τα πλήκτρα: value- το τρέχον στοιχείο στην επανάληψη. και done- αληθές εάν η επανάληψη έχει ολοκληρωθεί, ψευδώς διαφορετικά

Επαναληψιμότητα

Η επαναληψιμότητα ακολουθεί την ιδέα των πηγών δεδομένων και των καταναλωτών δεδομένων :

  • πηγές δεδομένων - είναι ο τόπος από τον οποίο οι καταναλωτές δεδομένων λαμβάνουν τα δεδομένα τους. Για παράδειγμα, ένα Arrayτέτοιο [1,2,3]είναι μια δομή προέλευσης δεδομένων που συγκρατεί τα δεδομένα μέσω των οποίων ένας καταναλωτής δεδομένων θα επαναλάβει (π.χ. 1, 2, and 3). Περισσότερα παραδείγματα είναι String, Mapsκαι Sets.
  • καταναλωτές δεδομένων - είναι αυτά που καταναλώνουν τα δεδομένα από πηγές δεδομένων. Για παράδειγμα, ο for-ofβρόχος είναι ένας καταναλωτής δεδομένων που μπορεί να επαναλάβει μια Arrayπηγή δεδομένων. Περισσότερα παραδείγματα είναι το spread operatorκαι Array.from.

Για να είναι μια δομή πηγή δεδομένων , πρέπει να επιτρέπει και να λέει πώς πρέπει να καταναλώνονται τα δεδομένα της. Αυτό γίνεται μέσω επαναληπτών . Επομένως, μια πηγή δεδομένων πρέπει να ακολουθεί το πρωτόκολλο επαναλήψεως που περιγράφεται παραπάνω.

Ωστόσο, δεν είναι πρακτικό για κάθε καταναλωτή δεδομένων να υποστηρίζει όλες τις πηγές δεδομένων , ειδικά επειδή το JavaScript μας επιτρέπει να δημιουργήσουμε τις δικές μας πηγές δεδομένων. Έτσι το ES6 εισάγει τη διεπαφή Iterable .

Οι καταναλωτές δεδομένων καταναλώνουν τα δεδομένα από πηγές δεδομένων μέσω επαναληπτικών προγραμμάτων .

Στην πράξη

Ας δούμε πώς λειτουργεί σε μια καθορισμένη πηγή δεδομένων - Array.

Εναλλασσόμενες πηγές δεδομένων

Θα χρησιμοποιήσουμε for-ofγια να εξερευνήσουμε ορισμένες από τις πηγές δεδομένων που εφαρμόζουν το επαναλαμβανόμενο πρωτόκολλο .

Απλά αντικείμενα

Σε αυτό το στάδιο πρέπει να πούμε ότι τα απλά αντικείμενα δεν είναι επαναλαμβανόμενα. Ο Axel Rauschmayer κάνει εξαιρετική δουλειά εξηγώντας γιατί στην Εξερεύνηση του ES6.

Μια σύντομη εξήγηση είναι ότι μπορούμε να επαναλάβουμε αντικείμενα JavaScript σε δύο διαφορετικά επίπεδα:

  • επίπεδο προγράμματος - που σημαίνει επανάληψη ιδιοτήτων ενός αντικειμένου που αντιπροσωπεύουν τη δομή του. Για παράδειγμα, Array.prototype.lengthπού lengthσχετίζεται με τη δομή του αντικειμένου και όχι με τα δεδομένα του.
  • επίπεδο δεδομένων - που σημαίνει επανάληψη δομής δεδομένων και εξαγωγή δεδομένων. Για παράδειγμα, για Arrayπαράδειγμα, αυτό θα σήμαινε επανάληψη των δεδομένων του πίνακα. Εάν array = [1,2,3,4], επαναλάβετε τις τιμές 1, 2, 3 and 4.
Ωστόσο, η ενσωμάτωση της έννοιας της επανάληψης σε απλά αντικείμενα σημαίνει συνδυασμό προγραμμάτων και δομών δεδομένων - Axel

Το πρόβλημα με απλά αντικείμενα είναι η ικανότητα του καθενός να δημιουργήσει τα δικά του αντικείμενα.

Στο παράδειγμα του Hugo μας πώς θα μπορούσε η JavaScript να διακρίνει μεταξύ του επιπέδου δεδομένων, δηλαδή Hugo.fullName, και του επιπέδου προγράμματος, δηλαδή Hugo.toString();

Ενώ είναι δυνατόν να γίνει διάκριση μεταξύ των δύο επιπέδων επανάληψης σε καλά καθορισμένες δομές, όπως Arrays, είναι αδύνατο να γίνει για οποιοδήποτε αντικείμενο.

Γι 'αυτό επανάληψης πάρει για δωρεάν Array(επίσης String, Mapκαι Set), αλλά όχι σε απλό αντικείμενα.

Μπορούμε, ωστόσο, να εφαρμόσουμε τα δικά μας προγράμματα.

Εφαρμογή Iterables

Μπορούμε να δημιουργήσουμε τα δικά μας επαναληπτικά προγράμματα, αν και συνήθως χρησιμοποιούμε γεννήτριες για αυτό.

Για να δημιουργήσουμε το δικό μας επαναληπτικό πρέπει να ακολουθήσουμε το πρωτόκολλο επανάληψης, το οποίο λέει:

  • Ένα αντικείμενο γίνεται επαναληπτικό εάν εφαρμόζει μια συνάρτηση της οποίας το κλειδί είναι Symbol.iteratorκαι επιστρέφει ένα iterator.
  • Το iteratorίδιο είναι ένα αντικείμενο με μια λειτουργία που ονομάζεται nextμέσα του. nextθα πρέπει να επιστρέψει ένα αντικείμενο με δύο πλήκτρα valueκαι done. valueπεριέχει το επόμενο στοιχείο της επανάληψης και doneμια σημαία που λέει εάν η επανάληψη έχει ολοκληρωθεί.

Παράδειγμα

Η επαναληπτική εφαρμογή μας είναι πολύ απλή. Ακολουθήσαμε το επαναληπτικό πρωτόκολλο και σε κάθε επανάληψη ο for-ofβρόχος θα ζητήσει από τον επαναληπτή το nextστοιχείο.

Ο επαναληπτής μας θα επιστρέψει σε nextένα αντικείμενο που περιέχει τα εξής με επανάληψη

Λάβετε υπόψη ότι αλλάζουμε τη σειρά των ακινήτων μας nextκαι doneγια ευκολία. Έχοντας nextπρώτα, θα έπαυε την εφαρμογή, αφού πρώτα θα ανοίξουμε ένα στοιχείο και μετά θα μετρήσουμε τα στοιχεία.

Είναι χρήσιμο να γνωρίζετε ότι αυτό doneείναι falseαπό προεπιλογή, πράγμα που σημαίνει ότι μπορούμε να το αγνοήσουμε όταν συμβαίνει αυτό. Το ίδιο ισχύει για το valueπότε doneείναι true.

Θα το δούμε σε ένα λεπτό.

Ο επαναληπτής ως επαναληπτικός

Θα μπορούσαμε να δημιουργήσουμε τον επαναληπτικό μας ως επαναληπτικό.

Λάβετε υπόψη ότι αυτό είναι το μοτίβο που ακολουθούν οι ενσωματωμένοι επαναληπτές ES6.

Γιατί είναι χρήσιμο αυτό;

Αν και for-ofλειτουργεί μόνο με iterables, όχι με iterators, το ίδιο σημαίνει ότι μπορούμε να θέσουμε σε παύση την εκτέλεση for-ofκαι να συνεχίσουμε τους επόμενους.

Επιστροφή και ρίξτε

Υπάρχουν δύο προαιρετικές μέθοδοι επαναλήψεων που δεν έχουμε διερευνήσει ακόμη:

ΕΠΙΣΤΡΟΦΗ

returnδίνει στον επαναληπτή την ευκαιρία να καθαρίσει το σπίτι όταν σπάσει απροσδόκητα. Όταν καλούμε returnέναν επαναληπτή, καθορίζουμε ότι δεν σκοπεύουμε nextπλέον να καλέσουμε .

Βολή

throwεφαρμόζεται μόνο σε γεννήτριες. Θα το δούμε αυτό όταν παίζουμε με γεννήτριες.

συμπέρασμα

Το ES6 φέρνει την επανάληψη ως έναν νέο τρόπο επανάληψης των δομών δεδομένων JavaScript.

Για να είναι δυνατή η επανάληψη, υπάρχουν παραγωγοί δεδομένων , οι οποίοι περιέχουν τα δεδομένα και καταναλωτές δεδομένων, οι οποίοι λαμβάνουν αυτά τα δεδομένα.

Προκειμένου ο συνδυασμός αυτός να λειτουργεί ομαλά, η επανάληψη καθορίζεται από ένα πρωτόκολλο, το οποίο λέει:

  • Το An iterableείναι ένα αντικείμενο που εφαρμόζει μια συνάρτηση της οποίας το κλειδί είναι Symbol.iteratorκαι επιστρέφει ένα iterator.
  • Το An iteratorείναι ένα αντικείμενο με μια συνάρτηση που ονομάζεται nextμέσα του. nextείναι ένα αντικείμενο με δύο πλήκτρα valueκαι done. valueπεριέχει το επόμενο στοιχείο της επανάληψης και doneμια σημαία που λέει εάν η επανάληψη έχει ολοκληρωθεί.

Τα απλά αντικείμενα δεν είναι iterableεπειδή δεν υπάρχει εύκολος τρόπος διάκρισης μεταξύ επανάληψης επιπέδου προγράμματος και δεδομένων.

Αυτός είναι ο λόγος για τον οποίο το ES6 προσφέρει έναν τρόπο δημιουργίας των δικών μας επαναληπτικών ακολουθώντας το iteratorπρωτόκολλο.

Χάρη σε ?

  • Axel Rauschmayer για την Εξερεύνηση του ES6 - Επανάληψη
  • Nicolás Bevacqua για το PonyFoo - ES6 Iterators in Depth
  • Σε όλους τους οπαδούς των Simpsons

Φροντίστε να δείτε τα άλλα άρθρα μου στο ES6

Ας εξερευνήσουμε ES6 Generators

Οι γεννήτριες είναι μια υλοποίηση iterables. medium.freecodecamp.com