Демистификација ЕС6 интерактивних компонената и итератора

ЕС6 уводи нови начин интеракције са ЈаваСцрипт структурама података - итерација . Демистификујмо то.

Постоје 2 основна концепта:

  • Итератибилно - описано структуром података која пружа начин излагања својих података јавности. То се постиже применом методе чији је кључ Symbol.iterator. Symbol.iteratorје фабрика итератора.
  • Итератор - описује га структура која садржи показивач на следећи елемент у итерацији.

Протокол

И итератив и итератор следе протокол који омогућава објектима да буду итерабилни:

  • Интерабле мора бити објекат са функцијом итератору чији кључ Symbol.iterator.
  • Итератора мора бити објекат са функцијом по имену nextкоји враћа објекат са кључевима: value- тренутни тачка у итерацији; и done- тачно ако је итерација завршена, нетачно у супротном.

Интерабилити

Итерабилити прати идеју извора података и потрошача података :

  • извори података - су место одакле потрошачи података добијају своје податке. На пример, такав Arrayкао што [1,2,3]је структура извора података која садржи податке кроз које ће се корисник поновити (нпр. 1, 2, and 3). Остали примери су String, Mapsи Sets.
  • потрошачи података - су оно што троши податке из извора података. На пример, for-ofпетља је потрошач података који може да изврши итерацију над Arrayизвором података. Још примера су spread operatorи Array.from.

Да би структура била извор података , она мора да дозволи и каже како њени подаци треба да се троше. То се ради преко итератора . Због тога извор података треба да следи горе описани протокол итератора.

Међутим, није практично да сваки потрошач података подржава све изворе података , поготово што нам ЈаваСцрипт омогућава да изградимо сопствене изворе података. Тако ЕС6 уводи интерфејс Итерабле .

Потрошачи података троше податке из извора података кроз итерабле .

У пракси

Погледајмо како ово функционише на дефинисаном извору података - Array.

Извори података који се могу поновити

Користићемо for-ofза истраживање неких извора података који примењују итерабилни протокол .

Обични објекти

У овој фази морамо рећи да обични објекти нису поновљиви. Акел Раусцхмаиер сјајно ради објашњавајући зашто у истраживању ЕС6.

Кратко објашњење је да можемо прелазити преко ЈаваСцрипт објеката на два различита нивоа:

  • програмски ниво - што значи понављање својстава објекта које представљају његову структуру. На пример, Array.prototype.lengthгде lengthје повезано са структуром објекта, а не са подацима.
  • ниво података - што значи понављање структуре података и издвајање њених података. На пример, за наш Arrayпример, то би значило понављање података низа. Ако array = [1,2,3,4], прелистајте вредности 1, 2, 3 and 4.
Међутим, довођење концепта итерације у обичне објекте значи мешање програма и структура података - Акел

Проблем обичних предмета је способност свих да креирају сопствене објекте.

У нашем Хугоовом примеру, како би ЈаваСцрипт разликовао ниво података, тј. Hugo.fullName, И ниво програма, тј Hugo.toString().

Иако је могуће разликовати два нивоа итерације на добро дефинисаним структурама, као што Arraysје то немогуће учинити за било који објекат.

То је разлог зашто смо итерација добити бесплатно на Array(и на String, Map, и Set), али не и на обичним објектима.

Међутим, можемо применити сопствене итерабле-ове.

Имплемент Итераблес

Можемо да направимо сопствене итерабле, иако за то обично користимо генераторе.

Да бисмо направили сопствени итерабилно, морамо следити итерацијски протокол који каже:

  • Објект постаје итерабилан ако имплементира функцију чији је кључ Symbol.iteratorи враћа ан iterator.
  • Сам iteratorпо себи је објекат са функцијом која се зове nextунутар њега. nextтреба да врати објекат са два кључа valueи done. valueсадржи следећи елемент итерације и doneзаставицу која говори да ли је итерација завршена.

Пример

Наша итерабилна имплементација је врло једноставна. Пратили смо итерабилни протокол и на свакој итерацији for-ofпетља ће од итератора тражити nextелемент.

Наш итератор ће се nextитерацијом вратити на објекат који садржи следеће:

Имајте на уму да мењамо редослед наших некретнина nextи doneради погодности. Имајући nextпрво, то би прекинуло имплементацију, јер ћемо прво искочити елемент, а затим пребројати елементе.

Корисно је знати да doneје falseто подразумевано, што значи да га можемо игнорисати када је то случај. Исто важи и valueкада doneјесте true.

То ћемо видети за минут.

Итератор као итерабил

Могли бисмо да направимо свој итератор као итерабилан.

Имајте на уму да је ово образац који следе ЕС6 уграђени итератори.

Зашто је ово корисно?

Иако for-ofради само са итерабилима, а не са итераторима, то исто значи да можемо паузирати извршавање for-ofи наставити поговорне речи.

Повратак и бацање

Постоје две опционалне методе итератора које још увек нисмо истражили:

Повратак

returnдаје итератору могућност да очисти кућу када се неочекивано сломи. Када позивамо returnитератор, прецизирамо да више не планирамо да зовемо next.

Баци

throwпримењује се само на генераторе. То ћемо видети када се играмо са генераторима.

Закључак

ЕС6 доноси итерацију као нови начин понављања ЈаваСцрипт структура података.

Да би итерација била могућа постоје произвођачи података који садрже податке и потрошачи података који узимају те податке.

Да би ова комбинација несметано радила, итерација је дефинисана протоколом који каже:

  • Ан iterableје објекат који имплементира функцију чији је кључ Symbol.iteratorи враћа ан iterator.
  • Ан iteratorје објекат са функцијом која се зове nextунутар њега. nextје објекат са два кључа valueи done. valueсадржи следећи елемент итерације и doneзаставицу која говори да ли је итерација завршена.

Обични објекти нису, iterableјер не постоји једноставан начин за разликовање итерације програма и нивоа података.

Због тога ЕС6 нуди начин за изградњу властитих итератора пратећи iteratorпротокол.

Захваљујући ?

  • Акел Раусцхмаиер за своје истраживање ЕС6 - Итерација
  • Ницолас Бевацкуа за свој ПониФоо - ЕС6 итератори у дубини
  • Свим навијачима Симпсонових

Обавезно погледајте моје остале чланке о ЕС6

Истражимо ЕС6 генераторе

Генератори су имплементација итераблеа. медиум.фреецодецамп.цом