Iterovatelné objekty

Iterovatelné objekty jsou zobecnÄ›ním polí. Je to koncept, který nám umožňuje učinit kterýkoli objekt použitelným v cyklu for..of.

Jistě, pole jsou iterovatelná. Existuje však mnoho dalších vestavěných objektů, které jsou rovněž iterovatelné. Například řetězce jsou také iterovatelné.

Jestliže objekt není technicky pole, ale pÅ™edstavuje kolekci (seznam, množinu) nÄ›jakých prvků, pak je for..of skvÄ›lá syntaxe, jak tyto prvky procházet. Podívejme se tedy, jak ji zprovoznit.

Symbol.iterator

Koncept iterovatelných objektů můžeme snadno pochopit tak, že si vytvoříme vlastní.

Například máme objekt, který sice není pole, ale zdá se být vhodný pro for..of.

TÅ™eba objekt rozsah, který pÅ™edstavuje interval čísel:

let rozsah = {
  začátek: 1,
  konec: 5
};

// Chceme, aby for..of fungovalo:
// for(let číslo of rozsah) ... číslo=1,2,3,4,5

Abychom učinili objekt rozsah iterovatelným (a tím zprovoznili for..of), musíme do tohoto objektu pÅ™idat metodu nazvanou Symbol.iterator (speciální vestavÄ›ný symbol právÄ› pro tento účel).

1. Když for..of začne, jedenkrát tuto metodu zavolá (nebo ohlásí chybu, není-li nalezena). Metoda musí vracet iterátor – objekt obsahující metodu next.
2. Nadále for..of pracuje pouze s tímto vráceným objektem.
3. Když for..of chce další hodnotu, volá na tomto objektu next().
4. Výsledek next() musí mít tvar {done: Boolean, value: cokoli}, kde done=true znamená, že cyklus má skončit, v opačném případÄ› je value jeho další hodnotou.

Zde je úplná implementace objektu rozsah s komentáři:

let rozsah = {
  začátek: 1,
  konec: 5
};

// 1. volání for..of nejprve zavolá tuto funkci
rozsah[Symbol.iterator] = function() {

  // ...tato funkce vrátí objekt iterátoru:
  // 2. Od této chvíle for..of pracuje jen s níže uvedeným objektem iterátoru a ptá se ho na další hodnoty
  return {
    aktuální: this.začátek,
    poslední: this.konec,

    // 3. next() je volána cyklem for..of při každé iteraci
    next() {
      // 4. měla by vrátit hodnotu jako objekt {done:..., value :...}
      if (this.aktuální <= this.poslední) {
        return { done: false, value: this.aktuální++ };
      } else {
        return { done: true };
      }
    }
  };
};

// teď to funguje!
for (let číslo of rozsah) {
  alert(číslo); // 1, pak 2, 3, 4, 5
}

Prosíme všimněte si důležité vlastnosti iterovatelných objektů: jednotlivé záležitosti jsou odděleny.

• Sám objekt rozsah nemá metodu next().
• Místo toho se voláním rozsah[Symbol.iterator]() vytvoří jiný objekt, tzv. „iterátor“, a hodnoty pro iteraci generuje jeho metoda next().

Objekt iterátoru je tedy oddělen od objektu, nad nímž se iteruje.

Technicky je můžeme spojit a použít jako iterátor samotný rozsah, abychom kód zjednoduÅ¡ili.

Třeba takto:

let rozsah = {
  začátek: 1,
  konec: 5,

  [Symbol.iterator]() {
    this.aktuální = this.začátek;
    return this;
  },

  next() {
    if (this.aktuální <= this.konec) {
      return { done: false, value: this.aktuální++ };
    } else {
      return { done: true };
    }
  }
};

for (let číslo of rozsah) {
  alert(číslo); // 1, pak 2, 3, 4, 5
}

Nyní rozsah[Symbol.iterator]() vrátí samotný objekt rozsah: ten obsahuje potÅ™ebnou metodu next() a pamatuje si aktuální krok iterace v this.aktuální. Je to kratší? Ano. A nÄ›kdy je to i vhodné.

Nevýhodou je, že nyní nemůžeme mít dva cykly for..of, které budou nad tímto objektem probíhat současnÄ›: sdílely by stav iterace, protože iterátor je pouze jeden – samotný objekt. Ale dva paralelní cykly for..of jsou vzácností, dokonce i v asynchronních scénářích.

Řetězec je iterovatelný

Nejčastěji používané iterovatelné objekty jsou pole a řetězce.

U Å™etÄ›zce cyklus for..of prochází jeho znaky:

for (let znak of "test") {
  // spustí se 4-krát: pro každý znak jednou
  alert( znak ); // t, pak e, pak s, pak t
}

Funguje to korektně i se zástupnými páry!

let řetězec = '𝒳😂';
for (let znak of řetězec) {
    alert( znak ); // 𝒳, a pak 😂
}

Explicitní volání iterátoru

Abychom tomu hlouběji porozuměli, podíváme se, jak použít iterátor explicitně.

Budeme iterovat nad Å™etÄ›zcem pÅ™esnÄ› stejným způsobem jako for..of, ale přímými voláními. Tento kód vytvoří Å™etÄ›zcový iterátor a získá z nÄ›j hodnoty „ručně“:

let řetězec = "Ahoj";

// provádí totéž jako
// for (let znak of řetězec) alert(znak);

let iterator = řetězec[Symbol.iterator]();

while (true) {
  let výsledek = iterator.next();
  if (výsledek.done) break;
  alert(výsledek.value); // vypíše znaky jeden po druhém
}

Tento přístup potÅ™ebujeme jen vzácnÄ›, ale dává nám více kontroly nad procesem než for..of. Například můžeme proces iterace rozdÄ›lit: trochu iterovat, pak to pÅ™eruÅ¡it, udÄ›lat nÄ›co jiného a pak iteraci obnovit.

Iterovatelné objekty a objekty podobné polím

Tyto dva oficiální pojmy vypadají podobně, ale jsou zcela odlišné. Prosíme ujistěte se, že jim dobře rozumíte, abyste předešli zmatkům.

• Iterovatelné objekty jsou objekty, které implementují metodu Symbol.iterator, jak je popsáno výše.
• Objekty podobné polím (array-like) jsou objekty, které mají indexy a vlastnost length (délku), takže vypadají jako pole.

Když používáme JavaScript pro praktické úkoly v prohlížeči nebo v kterémkoli jiném prostředí, můžeme se setkat s objekty, které jsou iterovatelné, podobné polím, nebo obojí.

Například Å™etÄ›zce jsou jak iterovatelné (funguje na nich for..of), tak podobné polím (mají číselné indexy a vlastnost length).

Iterovatelný objekt však nemusí být podobný poli. A naopak, objekt podobný poli nemusí být iterovatelný.

Například rozsah ve výše uvedeném příkladu je iterovatelný, ale ne podobný poli, jelikož nemá indexované vlastnosti a length.

A zde je objekt, který je podobný poli, ale ne iterovatelný:

let objektPodobnýPoli = { // má indexy a length => je podobný poli
  0: "Ahoj",
  1: "světe",
  length: 2
};

// Chyba (objekt neobsahuje Symbol.iterator)
for (let prvek of objektPodobnýPoli) {}

Jak iterovatelné objekty, tak objekty podobné polím zpravidla nejsou pole, tedy nemají push, pop atd. To je ponÄ›kud nepohodlné, když takový objekt máme a chceme s ním pracovat jako s polem. Například bychom chtÄ›li pracovat s objektem rozsah pomocí metod polí. Jak toho docílit?

Array.from

Existuje univerzální metoda Array.from, která pÅ™ijímá iterovatelnou nebo poli podobnou hodnotu a vytvoří z ní „opravdové“ pole Array. Na tom pak můžeme volat metody polí.

Příklad:

let objektPodobnýPoli = {
  0: "Ahoj",
  1: "světe",
  length: 2
};

let pole = Array.from(objektPodobnýPoli); // (*)
alert(pole.pop()); // světe (metoda funguje)

Array.from na řádku (*) vezme objekt, prozkoumá, zda je iterovatelný nebo podobný poli, a pak vyrobí nové pole a zkopíruje do nÄ›j vÅ¡echny jeho prvky.

Pro iterovatelný objekt se děje totéž:

// předpokládáme, že rozsah vezmeme z výše uvedeného příkladu
let pole = Array.from(rozsah);
alert(pole); // 1,2,3,4,5 (konverze pole pomocí toString funguje)

Úplná syntaxe Array.from nám také umožňuje poskytnout nepovinnou „mapovací“ funkci:

Array.from(obj[, mapFn, thisArg])

Nepovinný druhý argument mapFn může být funkce, která bude aplikována na každý prvek, než bude pÅ™idán do pole, a thisArg nám umožňuje nastavit v této funkci this.

Příklad:

// předpokládáme, že rozsah vezmeme z výše uvedeného příkladu

// každé číslo umocníme na druhou
let pole = Array.from(rozsah, číslo => číslo * číslo);

alert(pole); // 1,4,9,16,25

Zde pomocí Array.from pÅ™etvoříme Å™etÄ›zec na pole znaků:

let řetězec = '𝒳😂';

// rozdělí řetězec na pole znaků
let znaky = Array.from(řetězec);

alert(znaky[0]); // 𝒳
alert(znaky[1]); // 😂
alert(znaky.length); // 2

Na rozdíl od řetězec.split tato metoda využívá iterovatelnost Å™etÄ›zce, a proto, stejnÄ› jako for..of, funguje korektnÄ› se zástupnými páry.

Technicky zde provádí totéž jako:

let řetězec = '𝒳😂';

let znaky = []; // Array.from interně vykonává stejný cyklus
for (let znak of řetězec) {
  znaky.push(znak);
}

alert(znaky);

…Ale je to kratší.

Můžeme na ní dokonce postavit metodu slice, která bude rozpoznávat zástupné páry:

function slice(řetězec, začátek, konec) {
  return Array.from(řetězec).slice(začátek, konec).join('');
}

let řetězec = '𝒳😂𩷶';

alert( slice(řetězec, 1, 3) ); // 😂𩷶

// nativní metoda nepodporuje zástupné páry
alert( řetězec.slice(1, 3) ); // nesmysly (dvě části z různých zástupných párů)

Shrnutí

Objekty, které lze použít ve for..of, se nazývají iterovatelné.

• Technicky musejí iterovatelné objekty implementovat metodu s názvem Symbol.iterator.
  • Výsledek metody obj[Symbol.iterator]() se nazývá iterátor. Řídí další iterační proces.
  • Iterátor musí obsahovat metodu jménem next(), která vrací objekt {done: Boolean, value: cokoli}, v nÄ›mž done:true oznamuje konec iteračního procesu, jinak value je další hodnota.
• Metoda Symbol.iterator je cyklem for..of volána automaticky, ale můžeme ji volat i přímo.
• Metodu Symbol.iterator implementují i vestavÄ›né iterovatelné objekty, napÅ™. Å™etÄ›zce nebo pole.
• ŘetÄ›zcový iterátor rozpoznává zástupné páry.

Objekty, které mají indexované vlastnosti a vlastnost length, se nazývají podobné polím. Takové objekty mohou mít i jiné vlastnosti a metody, ale postrádají vestavÄ›né metody polí.

Podíváme-li se do specifikace, uvidíme, že většina vestavěných metod předpokládá, že pracují s iterovatelnými nebo polím podobnými objekty místo „opravdových“ polí, protože je to abstraktnější.

Array.from(obj[, mapFn, thisArg]) vytvoří opravdové pole Array z iterovatelného nebo poli podobného objektu obj. Na nÄ› pak můžeme používat metody polí. Nepovinné argumenty mapFn a thisArg nám umožňují na každý prvek aplikovat funkci.