O cyklech a iterování v polích v JavaScriptu

(10. 1. 2019) Článek o cyklech a iterování v polích v JavaScriptu

Tento krátký článek se bude věnovat cyklům a funkcím pro iterování v polích v JS, kromě toho, že JavaScript obsahuje konvenční typy cyklů známé i z ostatních jazyků, tak dále máme typy cyklů, které se zapisují a chovají jako funkce.

Budeme si to ukazovat na jednom jednochém poli.

const array = [2, 3, -5, 20, 5]

Cykly, které mají stejnou sytaxi jako ostatní jazyky přeskočím.

for... in

Ukažme si jako první for... in, má velmi dobrou podporu v prohlížečích, vrací indexy.

const array = [2, 3, -5, 20, 5];
for (const item in array) {
    console.log(item)  // postupně se vypíše 0 až 4
}

for... of

Pak máme další typ foru s velmi podobnou syntaxí, ale místo klíčového slova in použijeme of, tento typ cyklu jíž nevrací indexy, ale přímo hodnoty.

const array = [2, 3, -5, 20, 5];
for (const item of array) {
    console.log(item)  // postupně se vypíší všechny hodnoty v poli
}

Array.prototype.forEach

Dále máme forEach, ten se již zapisuje jako funkce, věsíme na něj pole a přidáváme callback, ekvivalentem k předchozímu cyklu by mohlo být následující:

const array = [2, 3, -5, 20, 5];
array.forEach(item => console.log(item));

Pak máme funkci na mapování pole, jako callback tam dáváme to, co chceme udělat s každým prvkem, takto by mohl vypadat kód, kdybychom chtěli hodnoty nahradit náhodnými (0, 30) a odečteme původní číslo:

Array.prototype.map

let array = [2, 3, -5, 20, 5];
array = array.map(item => Math.round(Math.random() * 30) - item); // Může vrátit např. [8, 14, 34, -6, 2]

Mapování se může hodit na různé věci, např. jak vytvořit pole a naplnit ho náhodnými hodnotami na jednom řádku, lehkou úpravou minulé ukázky by to mohlo vypadat takto:

Array(20).fill().map(item => Math.round(Math.random() * 30)); // může vrátit např. [16, 4, 10, 24, 9, 18, 28, 13, 18, 4, 15, 23, 21, 9, 27, 7, 4, 29, 29, 25]

Array.prototype.some

Projede nám pole a vrátí boolean podle toho, jestli alespoň jeden prvek splňuje věc definovanou v callbacku:

const array = [2, 3, -5, 20, 5];
console.log(array.some(item => item > 10)); // true
console.log(array.some(item => item < -10)); // false

Array.prototype.filter

Filter nám vrátí pole prvků podle callbacku, např. kdybychom chtěli vyrbat všechny prvky větší než 2:

const array = [2, 3, -5, 20, 5];
console.log(array.filter(item => item > 2)); // vrátí [3, 20, 5]

Array.prototype.reduce

Reduce nám udělá něco s dvěma prvky podle callbacku, například součin všech našich čísel:

const array = [2, 3, -5, 20, 5];
console.log(array.reduce((item, nextItem) => item * nextItem)); // Vrátí -3000

Všechny tyto funkce mají dobrou podporu v prohlížečích (IE9+).

To by tedy pro dnešek bylo vše, jak je vidět, možností co dělat s prvky v polích v JavaScriptu je spoustu.

Volné pozice

O autorovi

Šimon Raichl Frontend developer

export default class Simon extends Person {
  constructor() {
    super("Simon", 20);
    super.skills = ["HTML", "CSS", "JS - ES6 in particular"];
  }

  introduction() {
    return `I can code in ${super.skills.join(", ")}`;
  }
}

V Pilulce se věnuji hlavně JavaScriptu, snažím se ho psát tak, aby přidávání dalších věcí, či nějaká změna nezpůsobovaly bolesti.