Demisztifikáló ES6 Iterables és Iterators

Az ES6 új módszert vezet be a JavaScript adatszerkezeteivel való interakcióra - az iterációt . Demisztifikáljuk.

Két alapvető fogalom létezik:

  • Iterálható - egy olyan adatstruktúra írja le, amely lehetőséget nyújt adatainak nyilvánosság elé terjesztésére. Ez egy olyan módszer megvalósításával történik, amelynek kulcsa az Symbol.iterator. Symbol.iteratoriterátorgyár.
  • Iterátor - egy olyan szerkezet írja le, amely mutatót tartalmaz az iteráció következő elemére.

Jegyzőkönyv

Az iterálható és az iterátor is olyan protokollt követ, amely lehetővé teszi az objektumok iterálhatóságát:

  • Az interable- nek olyan objektumnak kell lennie, amelynek a funkciója iterátorral rendelkezik, amelynek kulcsa Symbol.iterator.
  • Az iterátornak olyan objektumnak kell lennie, amelynek neve olyan funkció, nextamely egy objektumot ad vissza a következő kulcsokkal: value- az iteráció aktuális eleme; és done- igaz, ha az iteráció befejeződött, hamis egyébként.

Iterilitás

Iterability következik az elképzelést, adatforrások és adatok a fogyasztók :

  • adatforrások - azok a helyek, ahonnan az adatfogyasztók megszerzik adataikat. Például, egy Array, például [1,2,3]egy adatforrás szerkezet, amely rendelkezik az adatokat, amelyen keresztül egy adat fogyasztó iterate (pl 1, 2, and 3). További példák String, Mapsés Sets.
  • adatfogyasztók - azok fogyasztják az adatokat az adatforrásokból. Például a for-ofhurok olyan adatfogyasztó, amely képes iterálni egy Arrayadatforráson. További példa a spread operatorés Array.from.

Ahhoz, hogy a struktúra adatforrás legyen , meg kell engednie és meg kell mondania, hogyan kell felhasználni az adatait. Ez iterátorokon keresztül történik . Ezért egy adatforrásnak követnie kell a fent leírt iterátor protokollt.

Nem célszerű azonban, hogy minden adatfogyasztó támogassa az összes adatforrást , különösen azért, mert a JavaScript lehetővé teszi számunkra, hogy saját adatforrásainkat építsük fel. Tehát az ES6 bevezeti az Iterable interfészt .

Az adatfogyasztók az adatforrásokból származó adatokat iterable-eken keresztül fogyasztják .

Gyakorlatban

Lássuk, hogyan működik ez egy meghatározott adatforráson - Array.

Ismételhető adatforrások

for-ofNéhány, az iterálható protokollt megvalósító adatforrás feltárására használjuk fel .

Sima objektumok

Ebben a szakaszban azt kell mondanunk, hogy a sima objektumok nem iterálhatók. Axel Rauschmayer nagyszerű munkát végez az ES6 felfedezése miértjének magyarázatában.

Rövid magyarázat az, hogy a Java-objektumokat két különböző szinten ismételhetjük:

  • programszint - ami azt jelenti, hogy egy objektum tulajdonságai között iterálunk, amelyek a struktúráját reprezentálják. Például Array.prototype.length, ahol lengthaz objektum felépítésével van összefüggésben, és nem az adatokkal.
  • adatszint - vagyis az adatszerkezet ismétlése és annak kinyerése. Például Arrayez azt jelentené, hogy a tömb adatait iterálni kell. Ha array = [1,2,3,4], ismételje meg az értékeket 1, 2, 3 and 4.
Az iteráció fogalmának egyszerű objektumokba vétele azonban összekeveri a programot és az adatstruktúrákat - Axel

A sima objektumokkal az a probléma, hogy mindenki képes saját objektumokat létrehozni.

Hugo példánkban hogyan különböztetné meg a JavaScript az adatszintet, azaz Hugo.fullNamea programszintet, azaz Hugo.toString()?

Míg jól meghatározott struktúrákon meg lehet különböztetni az iteráció két szintjét Arrays, ezt lehetetlen megtenni egyetlen objektum esetében sem.

Ezért kapjuk meg az iterációt ingyen Array(a ,, és ) -eken is String, de sima objektumokon nem.MapSet

Megvalósíthatjuk azonban saját iterable programjainkat.

Iterables megvalósítása

Készíthetünk saját iterable-eket, bár ehhez általában generátorokat használunk.

Saját iterálhatóságunk felépítéséhez be kell tartanunk az iterációs protokollt, amely azt mondja:

  • Az objektum akkor válik iterálhatóvá, ha olyan funkciót valósít meg, amelynek kulcsa egy, Symbol.iteratorés visszaad egy iterator.
  • A iteratormaga is egy objektum függvényét nextbenne. nextvissza kell adnia egy tárgyat két kulccsal valueés done. valuetartalmazza az iteráció következő elemét és doneegy zászlót, amely szerint az iteráció befejeződött.

Példa

Iterálható megvalósításunk nagyon egyszerű. Követtük az iterálható protokollt, és minden egyes iterációnál a for-ofhurok megkéri az iterátortól az nextelemet.

Az iterátorunk nextegy objektummal tér vissza iterációval:

Felhívjuk figyelmét, hogy a sorrendet az ingatlanunk nextés donea kényelem. Miután nextaz első, akkor megtörje a végrehajtás hiszen először jelenik elemet, majd számolni az elemeket.

Hasznos tudni, hogy doneez falsealapértelmezés szerint, ami azt jelenti, hogy figyelmen kívül hagyhatjuk, amikor ez a helyzet. Ugyanez vonatkozik a valuemikorra doneis true.

Ezt egy perc múlva meglátjuk.

Iterátor mint iterable

Megépíthetjük iterátorunkat iterálhatóként.

Felhívjuk figyelmét, hogy ezt a mintát követik az ES6 beépített iterátorai.

Miért hasznos ez?

Habár for-ofcsak iterátorokkal működik, nem az iterátorokkal, ugyanez azt jelenti, hogy szüneteltethetjük az for-ofutószavak végrehajtását és folytathatjuk.

Visszatérés és dobás

Két választható iterációs módszer létezik, amelyeket még nem vizsgáltunk:

Visszatérés

returnlehetőséget ad az iterátornak a ház megtisztítására, ha az váratlanul összetörik. Amikor returniterátort hívunk , megadjuk, hogy nem tervezzük nexttovább a hívást .

Dobás

throwcsak a generátorokra vonatkozik. Ezt látni fogjuk, amikor generátorokkal játszunk.

Következtetés

Az ES6 az iterációt új módként hozza létre a JavaScript adatstruktúráin.

Az iteráció lehetővé tételéhez vannak olyan adatok előállítói , akik tartalmazzák az adatokat, és az adatok fogyasztói, akik ezeket az adatokat veszik fel.

Annak érdekében, hogy ez a kombináció zökkenőmentesen működjön, az iterációt egy protokoll határozza meg, amely azt mondja:

  • Az iterableegy olyan objektum, amely olyan függvényt valósít meg, amelynek kulcsa egy, Symbol.iteratorés visszaad egy iterator.
  • Az iteratorobjektum egy olyan objektum, amelynek nextbenne nevezett függvénye van. nextobjektum két kulccsal valueés done. valuetartalmazza az iteráció következő elemét és doneegy zászlót, amely szerint az iteráció befejeződött.

A sima objektumok nem, iterablemivel nincs egyszerű módja a program és az adatszint iterációjának megkülönböztetésére.

Ezért kínálja az ES6 a saját iterátoraink felépítésének módját a iteratorprotokoll követésével .

Köszönet ?

  • Axel Rauschmayer az ES6 felfedezéséért - iterációért
  • Nicolás Bevacqua a PonyFoo - ES6 Iterators mélységéért
  • Minden The Simpsons rajongónak

Feltétlenül nézze meg az ES6-ról szóló többi cikkemet

Fedezzük fel az ES6 generátorokat

A generátorok az iterable megvalósítását jelentik. medium.freecodecamp.com