forEach () vs for-of vs for-in loop

Zde je stručné shrnutí rozdílů mezi forEach (), for-in a for-of loop, abyste byli po ruce jako reference.

pro každého()

Metoda prototypu forEach (), představená v ES5, vykonává poskytovanou funkci zpětného volání (funkce předanou jiné funkci jako argument) jednou pro každou hodnotu v Array, Map (sestávající z párů klíč-hodnota), Set, NodeList ( objekt typu pole často vrácený Document.querySelectorAll ()) nebo HTMLCollection (objekt typu pole často vrácený objekty Document.getElementsByClassName ()), ve vzestupném pořadí.

myArray.forEach (function (value) {
    // Dělat věci
});

Jako parametr bere zpětné volání funkce, přičemž jako argument se zpracovává aktuální hodnota v poli. (Existují také tři volitelné argumenty: aktuální hodnota indexu, pole forEach () se použije a hodnota, která se má použít jako tento [referenční objekt].)

Je to o něco stručnější než klasika pro smyčku (která je už mnohem déle). Přerušení příkazů však nemůžete použít k opuštění smyčky, k pokračování v přeskočení iterace nebo návratu k vrácení hodnoty (a opuštění smyčky). Vrací nedefinované.

Chcete-li použít forEach () ke smyčce přes objekt NodeList nebo HTMLCollection, musíte jej nejprve převést na objekt Array pomocí Array.from ().

* Prototyp je něco, co všechny objekty JavaScript dědí vlastnosti (proměnné v objektu) a metody (funkce v objektu). Například objekty Array zdědí od Array.prototype.

Přečtěte si více
Array.prototype.forEach ()
Set.prototype.forEach ()
Map.prototype.forEach ()
NodeList.prototype.forEach ()

for-in

Příkaz for-in vytvoří smyčku, která iteruje všechny nesčíselné vlastnosti objektu bez symbolu, někdy v libovolném pořadí.

pro (proměnná v objektu) {
  // Dělat věci
}

Co jsou enumerovatelné vlastnosti?
Objekty jsou kolekce vlastností a každá vlastnost má svou vlastní sadu interních vlastností, které nejsou uživatelsky přístupné, ale jsou používány modulem JavaScript. Jsou označeny dvojitými hranatými závorkami: [[Property]].

Každý objekt má atribut vlastnosti [[Enumerable]], který obsahuje booleovskou hodnotu true nebo false, kterou můžete určit pomocí metody propertyIsEnumerable (). Pokud je hodnota true, je objekt vyčíslitelný, a proto (za předpokladu, že nejde o Symbol) bude iterován v smyčce for-in.

Kromě enumerovatelných vlastností s [[Enumerable]] hodnotou falešných stínovaných vlastností, což znamená, že ty, které jsou potlačeny stejnými jmény vlastností potomků (vlastnosti blíže k objektu v prototypovém řetězci mají přednost před vlastnostmi prototypů), nebudou opakoval.

Použít případy zahrnují…

  • Vlastnosti objektu řetězce. To je to, pro co bylo navrženo.
  • Objekty pole, ale pravděpodobně to není dobrý nápad: Za prvé, může se to někdy opakovat v libovolném pořadí. Za druhé, hodnota přiřazená indexu bude řetězec; pokud byste chtěli dělat aritmetiku, měli byste dělat řetězcovou aritmetiku (např. 5 + “5” = “55”).
  • Řetězcové * objekty. Každý znak v řetězci má index, což je enumerovatelná vlastnost ve formě celého čísla.

* JavaScript automaticky převádí mezi objekty String a primitivy řetězců; můžete tedy zavolat libovolnou pomocnou metodu objektu String na primitivní řetězec.

Přečtěte si více
pro… v
Object.prototype.propertyIsEnumerable ()

for-of

Příkaz for-of zavedený v ES6 vytváří smyčku, která iteruje iterovatelné objekty (objasnění viz níže) v iterovatelném pořadí. Běžné použití je opakování hodnot v poli, ale funguje také na většině objektů podobných poli.

pro (proměnná iterable) {
  // Dělat věci
}

Má značné výhody v porovnání se vstupem a výstupem ():

  • Na rozdíl od forEach () můžete použít break, pokračovat a vrátit se
  • Dvě klíčové výhody oproti předcházejícímu: jedna navštíví indexy pole v číselném (vzestupném) pořadí a dva indexy polí nejsou převedeny na řetězce, takže můžete provádět aritmetiku

Pokud chcete opakovat vlastnosti objektu, použijte buď pro-in (to je jeho účel), nebo můžete použít metodu Object.keys ().

Co je to vyměnitelný objekt?

Nejste si jisti, co je „iterovatelný objekt“? ES6 přidal dva protokoly: iterovatelné a iterační protokoly, které jsou klíčem k pochopení tohoto.

Výměnný protokol
Iterovatelný protokol umožňuje objektům JavaScript definovat nebo přizpůsobit jejich iterační chování.

Aby byl objekt považován za iterovatelný, musí implementovat metodu @@ iterator: buď on, nebo jeden z objektů v jeho prototypovém řetězci musí obsahovat vlastnost s klíčem @@ iterator, který je k dispozici prostřednictvím konstantního Symbol.iterator.

Na začátku provádění smyčky for-of se metoda @@ iterátoru objektu volá s nulovými argumenty a vrací objekt iterátoru, který se používá k získání hodnot, které mají být iterovány.

Protokol Iterátoru
Protokol iterátoru definuje standardní způsob, jak vytvořit posloupnost hodnot (konečných nebo nekonečných).

Iterátor je objekt, který odpovídá protokolu iterátoru. Toho je dosaženo poskytnutím metody next (), která má nulové argumenty a vrací objekt se dvěma vlastnostmi:

  1. value: data představující další hodnotu v posloupnosti hodnot v objektu
  2. hotovo: boolean představující, zda iterátor dokončil procházení posloupností hodnot

Proměnné objekty

  • Vestavěné iterables: String, Array, TypedArray, Map a Set objekty (tyto jsou vestavěny, protože každý z jejich prototypových objektů implementuje metodu @@ iterator)
  • Objekty NodeList
  • Objekty generátoru (všechny iterátory vytvořené generátory jsou také iterable, protože generátory ve výchozím nastavení přiřazují vlastnost Symbol.iterator)
  • Argumenty podobné polím
  • Uživatelem definované iterable (ty lze vytvořit definováním metody s klíčem Symbol.iterator, aby vyhovovaly iterovatelnému protokolu a aby vyhovovaly i iteračnímu protokolu, a to tak, že vrátí objekt metodou nazvanou next () s dvě vlastnosti, hodnota a hotovo)

Přečtěte si více
pro ... z
Symbol.iterator
Iterační protokoly