⌛ Reading Time: 5 minutes

de Tiago Lopes Ferreira

Demitificarea ES6 Iterabile și Iteratoare

Demitificarea ES6 Iterabile si Iteratoare

ES6 introduce un nou mod de a interacționa cu structurile de date JavaScript – repetare. Să o demitizăm.

Există 2 concepte de bază:

Iterabil – descris de o structură de date care oferă o modalitate de a-și expune datele publicului. Acest lucru se realizează prin implementarea unei metode a cărei cheie este Symbol.iterator. Symbol.iterator este o fabrică de iteratori.
Iterator – descris de o structură care conține un pointer către următorul element din iterație.

Protocol

Atât iterabil, cât și iterator urmează un protocol care permite obiectelor să fie iterabile:

Un interabil trebuie să fie un obiect cu un iterator de funcții a cărui cheie este Symbol.iterator.

Un iterator trebuie să fie un obiect cu o funcție numită next care returnează un obiect cu tastele: value – elementul curent din iterație; și done– Adevărat dacă iterația s-a încheiat, fals in caz contrar.

Iterabilitate

Iterabilitatea urmează ideea de surse de date și consumatorii de date:

surse de date– sunt locul de unde consumatorii de date își obțin datele. De exemplu, un Array precum [1,2,3] este o structură de sursă de date care conține datele prin care va itera un consumator de date (de ex 1, 2, and 3). Mai sunt exemple String, Maps și Sets.
consumatorii de date – sunt cele care consumă datele din sursele de date. De exemplu, for-of loop este un consumator de date capabil să itereze peste un Array sursă de date. Mai multe exemple sunt spread operator și Array.from.

Pentru ca o structură să fie o sursă de date, trebuie să permită și să spună cum ar trebui consumate datele sale. Acest lucru se face prin iteratori. Prin urmare, a sursă de date trebuie să respecte protocolul iterator descris mai sus.

Cu toate acestea, nu este practic pentru fiecare consumator de date să-i susțin pe toți surse de date, mai ales că JavaScript ne permite să ne construim propriile surse de date. Deci ES6 introduce interfața Iterabil.

Consumatori de date consumă datele de la surse de date prin iterabile.

In practica

Să vedem cum funcționează acest lucru pe o sursă de date definită – Array.

Surse de date iterabile

Noi vom folosi for-of pentru a explora unele dintre sursele de date care implementează protocol iterabil.

Obiecte simple

În acest stadiu trebuie să spunem că obiectele simple nu sunt iterabile. Axel Rauschmayer face o treabă grozavă explicând de ce Explorarea ES6.

O scurtă explicație este că putem itera peste un obiect JavaScript la două niveluri diferite:

nivelul programului – ceea ce înseamnă iterația asupra unui obiect proprietăți care reprezintă structura acestuia. De exemplu, Array.prototype.length, Unde length este legat de structura obiectului și nu de date.
nivel de date – adică iterați asupra unei structuri de date și extrageți datele acesteia. De exemplu, pentru Array de exemplu, asta ar însemna iterarea asupra datelor matricei. Dacă array = [1,2,3,4], iterați peste valori 1, 2, 3 and 4.

Cu toate acestea, aducerea conceptului de iterație în obiecte simple înseamnă amestecarea programului și a structurilor de date – Axel

Problema cu obiectele simple este capacitatea tuturor oamenilor de a-și crea propriile obiecte.

În exemplul Hugo al nostru, cum ar face JavaScript distincția între nivelul de date, adică Hugo.fullName, și nivelul programului, adică Hugo.toString()?

Deși este posibil să se facă distincția între cele două niveluri de iterație pe structuri bine definite, cum ar fi Arrays, este imposibil să se facă acest lucru pentru orice obiect.

Acesta este motivul pentru care primim iterație gratuit pe Array (de asemenea pe String, Map, și Set) dar nu pe obiecte simple.

Cu toate acestea, putem implementa propriile noastre iterabile.

Implementați Iterables

1611507968 990 Demitificarea ES6 Iterabile si Iteratoare

Ne putem construi propriile iterabile, deși de obicei folosim generatoare pentru asta.

Pentru a ne construi propriul iterabil, trebuie să urmăm protocolul de iterație, care spune:

Un obiect devine un iterabil dacă implementează o funcție a cărei cheie este Symbol.iterator și returnează un iterator.
iterator în sine este un obiect cu o funcție numită next inauntru. next ar trebui să returneze un obiect cu două taste value și done. value conține următorul element al iterației și done un steag care spune dacă iterația s-a încheiat.

Exemplu

Implementarea noastră iterabilă este foarte simplă. Am urmat protocol iterabil și la fiecare iterație for-of bucla va cere iteratorului pentru next element.

Iteratorul nostru va reveni next un obiect care conține următoarele prin iterație:

Vă rugăm să rețineți că schimbăm ordinea proprietăților noastre next și done pentru confort. Având next în primul rând, ar rupe implementarea, deoarece vom afișa mai întâi un element și apoi vom conta elementele.

Este util să știi asta done este false implicit, ceea ce înseamnă că îl putem ignora atunci când este cazul. Același lucru este valabil și pentru value cand done este true.

Vom vedea asta într-un minut.

Iterator ca Iterabil

Am putea construi iteratorul nostru ca un iterabil.

Vă rugăm să rețineți că acesta este modelul urmat de iteratorii încorporați ES6.

De ce este util acest lucru?

Cu toate că for-of funcționează numai cu iterabile, nu cu iteratori, fiind același mijloc că putem întrerupe executarea for-of și continuați postfaces.

Reveniți și aruncați

Există două metode opționale de iterare pe care nu le-am explorat încă:

Întoarcere

return oferă iteratorului posibilitatea de a a curăța casa când se sparge pe neașteptate. Când sunăm return pe un iterator specificăm că nu intenționăm să sunăm next mai mult.

Arunca

throw se aplică numai generatoarelor. Vom vedea asta când ne jucăm cu generatoare.

Concluzie

ES6 aduce iterația ca o nouă modalitate de a itera peste structurile de date JavaScript.

Pentru ca iterația să fie posibilă există producători de date, care conțin datele și consumatori de date, care iau aceste date.

Pentru ca această combinație să funcționeze fără probleme, iterația este definită de un protocol, care spune:

Un iterable este un obiect care implementează o funcție a cărei cheie este Symbol.iterator și returnează un iterator.
Un iterator este un obiect cu o funcție numită next inauntru. next este un obiect cu două taste value și done. value conține următorul element al iterației și done un steag care spune dacă iterația s-a încheiat.