Demistificiranje ES6 kompatibilnih i iteratora

Programiranje

ES6 uvodi novi način interakcije s JavaScript podatkovnim strukturama - iteracija . Demistificirajmo ga.

Postoje 2 temeljna koncepta:

  • Iterable - opisuje ga struktura podataka koja pruža način izlaganja svojih podataka javnosti. To se postiže primjenom metode čiji je ključ Symbol.iterator. Symbol.iteratorje tvornica iteratora.
  • Iterator - opisuje ga struktura koja sadrži pokazivač na sljedeći element u iteraciji.

Protokol

I iterable i iterator slijede protokol koji omogućava objektima da budu iterabilni:

  • Interable mora biti objekt sa funkcija iteratora čiji je ključ Symbol.iterator.
  • Iteratora mora biti objekt sa funkciju pod nazivom nextkoji se vraća objekt s tipkama: value- Dosadašnja točka u iteraciji; i done- true ako je iteracija završila, false false u suprotnom.

Interabilnost

Iterability slijedi ideju izvora podataka i potrošača podataka :

  • izvori podataka - mjesto su odakle potrošači podataka dobivaju svoje podatke. Na primjer, Arraytakav kao što [1,2,3]je struktura izvora podataka koja sadrži podatke kroz koje će se korisnik ponoviti (npr 1, 2, and 3.). Više primjeri su String, Mapsi Sets.
  • potrošači podataka - jesu ono što troši podatke iz izvora podataka. Na primjer, for-ofpetlja je potrošač podataka koji može prelaziti preko Arrayizvora podataka. Još primjera su spread operatori Array.from.

Da bi struktura bila izvor podataka , ona mora dopustiti i reći kako se njezini podaci trebaju trošiti. To se radi putem iteratora . Stoga izvor podataka treba slijediti gore opisani protokol iteratora.

Međutim, nije praktično da svaki potrošač podataka podržava sve izvore podataka , pogotovo jer nam JavaScript omogućuje stvaranje vlastitih izvora podataka. Tako ES6 uvodi sučelje Iterable .

Potrošači podataka troše podatke iz izvora podataka putem iterablea .

U praksi

Pogledajmo kako ovo funkcionira na definiranom izvoru podataka - Array.

Izvori podataka koji se mogu ponoviti

Upotrijebit ćemo for-ofza istraživanje nekih izvora podataka koji implementiraju iterabilni protokol .

Obični objekti

U ovoj fazi moramo reći da obični objekti nisu ponovljivi. Axel Rauschmayer sjajno radi objašnjavajući zašto na istraživanju ES6.

Kratko objašnjenje je da možemo prelaziti preko JavaScript objekata na dvije različite razine:

  • programska razina - što znači ponavljanje svojstava objekta koja predstavljaju njegovu strukturu. Na primjer, Array.prototype.lengthwhere lengthje povezano sa strukturom objekta, a ne s podacima.
  • razina podataka - što znači ponavljanje strukture podataka i izdvajanje njezinih podataka. Na primjer, za naš Arrayprimjer, to bi značilo ponavljanje podataka niza. Ako array = [1,2,3,4], prelistajte vrijednosti 1, 2, 3 and 4.
Međutim, dovođenje koncepta iteracije u obične objekte znači miješanje programa i struktura podataka - Axel

Problem običnih predmeta je sposobnost svih da kreiraju vlastite predmete.

U našem Hugovom primjeru, kako bi JavaScript mogao razlikovati razinu podataka, tj. Hugo.fullName, I razinu programa, tj. Hugo.toString()?

Iako je moguće razlikovati dvije razine iteracije na dobro definiranim strukturama, kao što je Arraysto nemoguće učiniti za bilo koji objekt.

To je razlog zašto smo dobili inačicu za besplatno Array(također String, Mapi Set), ali ne na obične predmete.

Međutim, možemo implementirati vlastite iterable.

Provedite interaktivne proizvode

Možemo izgraditi vlastite iterable, iako za to obično koristimo generatore.

Da bismo stvorili vlastiti iterable, moramo slijediti iteracijski protokol koji kaže:

  • Objekt postaje iterabilan ako implementira funkciju čiji je ključ Symbol.iteratori vraća iterator.
  • iteratorSama je objekt s funkcijom zove nextunutar njega. nexttreba vratiti objekt s dva ključa valuei done. valuesadrži sljedeći element iteracije i donezastavicu koja govori je li iteracija završena.

Primjer

Naša iterabilna implementacija vrlo je jednostavna. Slijedili smo iterabilni protokol i na svakoj iteraciji for-ofpetlja će od iteratora tražiti nextelement.

Naš iterator će se iteracijom vratiti na nextobjekt koji sadrži sljedeće:

Imajte na umu da mijenjamo redoslijed naših nekretnina nexti doneradi praktičnosti. Imajući nextprvo, to bi prekinulo implementaciju, jer ćemo prvo iskočiti element, a zatim prebrojati elemente.

Korisno je znati da doneje to falsezadano, što znači da ga možemo ignorirati kada je to slučaj. Isto vrijedi i valuekad donejest true.

To ćemo vidjeti za minutu.

Iterator kao iterabilan

Svoj iterator mogli bismo izgraditi kao iterabilan.

Imajte na umu da je ovo obrazac koji slijede ugrađeni ES6 ugrađeni iteratori.

Zašto je ovo korisno?

Iako for-ofradi samo s iterabilima, a ne s iteratorima, budući da je isto znači da možemo zaustaviti izvršavanje for-ofi nastaviti pogovorne riječi.

Povratak i Bacanje

Postoje dvije neobavezne metode iteratora koje još nismo istražili:

Povratak

returndaje iteratoru mogućnost da očisti kuću kad se neočekivano slomi. Kada pozivamo returniterator, preciziramo da više ne planiramo pozivati next.

Bacanje

throwprimjenjuje se samo na generatore. To ćemo vidjeti kad se igramo s generatorima.

Zaključak

ES6 donosi iteraciju kao novi način ponavljanja JavaScript struktura podataka.

Da bi iteracija bila moguća postoje proizvođači podataka koji sadrže podatke i potrošači podataka koji uzimaju te podatke.

Da bi ova kombinacija nesmetano radila, iteracija je definirana protokolom koji kaže:

  • An iterableje objekt koji implementira funkciju čiji je ključ Symbol.iteratori vraća an iterator.
  • An iteratorje objekt u kojem se zove funkcija next. nextje objekt s dva ključa valuei done. valuesadrži sljedeći element iteracije i donezastavicu koja govori je li iteracija završena.

Obični objekti nisu iterablejer ne postoji jednostavan način za razlikovanje iteracije programa i razine podataka.

Zato ES6 nudi način za izgradnju vlastitih iteratora slijedeći iteratorprotokol.

Zahvaljujući ?

  • Axel Rauschmayer za svoje istraživanje ES6 - Iteracija
  • Nicolás Bevacqua za svoj PonyFoo - ES6 iteratori u dubini
  • Svim obožavateljima Simpsonovih

Svakako pogledajte moje ostale članke o ES6

Istražimo ES6 generatore

Generatori su implementacija iterablea. medium.freecodecamp.com