Array.forEach

První (a vlastně nejméně zajímavou funkcí) je forEach, a to zejména proto, že nám umožní pouze nahradit “for” cyklus. Takže místo obligátního:

for (var i = 0; i < items.length; i++) {
    item = items[0];
    //kód
}

můžeme použít toto:

items.forEach(function(item, i) {
    //kód
});

Zatím žádný zázrak a navíc malý kámen úrazu, a tím je kontext callback funkce, čili je si třeba ohlídat, aby reference this znamenala to, co chceme my (protože jinak je kontext window). To se dá zařídit druhým argumentem.

items.forEach(function(item, i) {
     //kód
}, context);

Array.forEach je ekvivalentem $().each(), ovšem proč standardizátoři Javascriptu nepoužili kratší each, je pro mě záhadou. Možná protože je tu přeci jen jeden rozdíl, a to v počtu parametrů callback funkce. Obsahuje totiž:

1. aktuální položku pole
2. index
3. referenci na procházené pole

jQuery v $().each() předává callbacku pouze první dva parametry. Druhým rozdílem je, že vrací vždy undefined na rozdíl od $().each(), která vždy vrací pole.

Malý příklad použití v praxi – dejme tomu, že chceme pro každý button zaregistrovat stejný handler. Pak kód v jQuery bude vypadat takto:

$('button').click(handler);

a čistém JavaScriptu takto:

document.querySelectorAll('button').forEach(function(element) {
    element.addEventListener('click', handler);
});

Uznávám, že proti jQuery je toto poněkud ukecané.

Nemohu se na tomto místě nezmínit o sadistických sklonech některých vývojářů, kteří vymýšlejí vtipné mozkolamy a variace na for cyklus, jako třeba:

for (var i = 0; i < items.length; ++i) {
    //kód
}

Čtení takového kódu bolí, a chudák dědic jejich kódu ještě večer usíná s otázkou: “Proboha proč?”

Array.map

Šikovnou funkcí je map, která je právě hojně využívaná v jQuery, zřejmě proto, že se s ní dá nadělat spousta parády.

Array.map na rozdíl od Array.forEach už cosi vrací, a to pole s hodnotami, které vrátíme v callback funkci.

Následující příklad neudělá nic lepšího než kopii pole:

var newItems = items.map(function(item) {
    return item;
}, context);

Pojďme se tedy podívat na něco užitečnějšího. Máme pole id elementů a chceme na základě tohoto pole dostat přímo pole elementů.

var ids= [
    '#name',
    '#lastname',
    '#age'
];

var els = ids.map(function(id) {
    return document.querySelectAll(id);
});

Array.filter

Array.filter je funkce na první pohled podobná Array.map s tím rozdílem, že vrací položky pole, pro které vyhověla podmínka v callbacku.

Následující kód vrátí nová pole, která nebudou obsahovat undefined hodnoty z pole items:

var newItems = items.filter(function(item) {
    return item !== undefined;
}, context);

Následující příklad slouží k odstranění duplicitních hodnot z pole (nechal jsem se inspirovat tímto příkladem):

var uniqueArray = duplicates.filter(function(elem, pos, duplicatesArray) {
    return duplicatesArray.indexOf(elem) == pos;
});

Šikovné, že?
Další užitečné využití funkce Array.filter je při hledání v poli objektů. Chceme-li například dostat seznam všech objektů, které jsou pouze pro čtení, provedeme to takhle:

var objectList = [
    {readonly: false},
    {readonly: true},
    {readonly: true}
];

var readonlyItems = objectList.filter(function(item) {
    return item.readonly;
});

Array.reduce

Array.reduce je prazvláštní funkce, jejíž dokumentaci jsem musel přečíst několikrát, než jsem pochopil, co vlastně dělá. Taktéž je zajímavá tím, že momentálně není implementována v jQuery (na rozdíl od filter a map).

Její callback funkce dostává tyto parametry:

1. výsledek vrácený při předchozím spuštění callback funkce
2. aktuální položku pole
3. index
4. procházené pole

a právě v první položce je kámen úrazu, jelikož na první pohled to vypadá, že vrací předchozí prvek pole, ale není tomu tak.
Vypadá to nějak takhle:

var newItems = items.reduce(function(previousItem, currentItem) {
    //kód
});

Na co tohle použít? Kupříkladu jsem již několikrát hledal elegantní způsob, jak sečíst všechny prvky v poli. S Array.reduce je to hračka:

var sum = itemToSum.reduce(function(previous, current) {
  return previous + current;
});

Zde je na místě otázka, jaká hodnota je v prvním parametru previous při prvním průchodu. Je to hodnota první položky, kterou však lze přednastavit jako parametr funkce Array.reduce.

var sum = [1,2,3].reduce(function(previous, current) {
  return previous + current;
}, 10);

Výsledek bude tudíž číslo 16.

Array.every

Další z fukcí pole, která vrací jednu hodnotu, je Array.every. Ta nad každou položkou pole provede test, a budou-li všechny vracet true, pak iArray.every vrací true.

Budeme-li chtít vědět, zda jsou všechny objekty (z výše uvedeného příkladu) pouze ke čtení, můžeme použít toto:

var objectList = [
    {readonly: true},
    {readonly: false},
    {readonly: true}
];

var readonly = objectList.every(function(item) {
    return item.readonly;
});

Při použítí této funkce je třeba myslet na to, že pokud jednou dostane false, už se dále nepokračuje, čili v tomto příkladě se třetí prvek pole netestuje.

Array.some

A když už máme funkci pro test na všechny položky pole, tak ještě přidáme test pro alespoň jednu. Je to tak, Array.some vrací true, pokud alespoň jeden test vrátí true.

var readonly = [
    {readonly: false},
    {readonly: true},
    {readonly: true}
].every(function(item) {
    return item.readonly;
});

A opět je třeba nezapomenout, že cyklus skončí ve chvíli, kdy bude rozhodnuto, tudíž na třetí položku opět nedojde.

Všechny výše zmíněné funkce jsou implementovány v Internet Exploreru 9+, tudíž, pokud nás IE8 netrápí, můžeme je zvesela používat.

Perlička na závěr

K povídání o “polních” funkcích v JavaScriptu přihodím malý trik. Často se stane, že je třeba ověřit funkce validátoru, konkrétně validaci délky, jenže kde honem vzít řetězec např. o délce 255 znaků.

Řešení vypadá takto:

Array(256).join('a');

Proč 256, proč ne 255? Pojďme se podívat na to, co taková konstrukce vlastně dělá.

Array(256);

Vytvoří pole o 256 prvcích undefined. Následně metoda join mezi tyto prvky vloží 255 krát “a”. A máme hotovo.

Další možné řešení je pomocí funkce Array.fill:

Array(255).fill('a').join('');

anebo ještě lépe pomocí String.repeat, což je přesně to, co hledáme:

'a'.repeat(255)

Jenže tyto funkce jsou součástí ES6 a momentálně si je můžete vyzkoušet pouze ve Firefoxu nebo z polyfillem.