Kódím.cz

¶Funkcionální zpracování dat

Když při programování aplikací používáme cykly, brzy narazíme na často se opakující situace a konstrukce. Pro tyto situace máme na polích pomocné metody z funkcionálního světa. Jsou to metody

Array.forEach
Array.every
Array.some
Array.map
Array.filter

Vynechání returnu

Předtím, než se podíváme na samotné metody, ukážeme si, jak se dají zkrátit arrow fuknce. Pokud arrow fuknce pouze něco vrací na jednom řádku, je možné vynechat složené závorky a klíčové slovo return. Obě níže napsané fuknce budou fungovat a vrátí nám řetězec s pozdravem.

const greet = (name) => {
  return `Hi, ${name}`;
};

const conciseGreet = (name) => `Hi, ${name}`;

console.log(greet('Alex'));
console.log(conciseGreet('Alex'));

Dejte si ale pozor, aby kód zůstal čitelný. Pokud je fuknce jasná a jednoduchá, zkrácení se vyplatí, ale není potřeba všechny fuknce zkracovat na úkor čitelnosti kódu!

Metoda forEach()

Metoda forEach() nám nahrazuje for cyklus. Stejně jako for cyklus nám metoda defaultně nic nevrací. Do proměnné si uložíme pole čísel. Pomocí for cyklu si můžeme všechny položky vypsat do konzole:

const myArray = [4, 1, 6, 8, 16, -3, 9];

for (let i = 0; i < myArray.length; i += 1) {
  console.log(myArray[i]);
}

Další možností je rovnou na daném poli zavolat metodu forEach(). Metoda forEach() bere jeden parametr, a to funkci (tzv. callback funkce). Tato fuknce se zavolá na každé položce pole.

myArray.forEach((item) => {
  console.log(item);
});

Metoda some()

Řekněme si, že chceme zjistit, zda je alespoň jedno číslo v našem poli větší než deset. Můžeme si na to napsat cyklus, ale metoda some(), nám usnadní práci. Metoda some() jako parametr bere opět funkci, ve které se ptáme na podmínku. Funkce potom podmínku zkrontoluje pro každou položku pole a nakonec nám vrátí true nebo false, podle toho, zda alespoň jedna položka v poli naši podmínku splňuje. Výsledek volání metody si můžeme uložit do proměnné.

const biggerThanTen = myArray.some((item) => item > 10);

console.log(biggerThanTen);

Metoda every()

Metoda every() je podobná metodě some() v tom, že nám také vrací bool. Metoda every() nám však vrátí true, pouze pokud všechny položky pole splňují naši podmínku. Pokud bychom chtěli zjistit, zda všechna čísla v poli jsou kladná, tedy větší než nula, můžeme použít metodu every().

const allPositive = myArray.every((item) => item > 0);

console.log(allPositive);

¶Cvičení: Funkcionální zpracování dat

¶Funkcionální jednohubky 1

to dáš

Vytvořte si obyčejnou stránku s JavaScriptem a zkopírujte si do ní následující pole dat. Budeme s nimi pracovat v následujících cvičeních.

const numbers = [15, 6, 70, 41, 33, 27, 8, 16, 98, 60, 56];
const names = ['Petr', 'Jana', 'Pavel', 'Zuzana', 'Eva', 'Adam', 'Onyx'];
const osoby = [
  { name: 'Petr', age: 16, gender: 'male' },
  { name: 'Jana', age: 8, gender: 'female' },
  { name: 'Pavel', age: 34, gender: 'male' },
  { name: 'Zuzana', age: 41, gender: 'female' },
  { name: 'Eva', age: 13, gender: 'female' },
  { name: 'Adam', age: 22, gender: 'male' },
  { name: 'Adam', age: 22, gender: 'male' },
  { name: 'Onyx', age: 37, gender: 'intersex' },
];

Napište cyklus, který spočítá průměr čísel v poli numbers. Napište tento cyklus ve staré formě for a v nové formě forEach.
Pomocí metody forEach napište cyklus, který vypíše do konzole poslední písmeno z každného jména v poli names.
Pomocí funkce forEach vypište do konzole postupně věk každé osoby z pole osoby.
Pomocí metody some zjistěte, jestli jsou v poli numbers nějaká čísla dělitelná 11.
Pomocí metody every zjistěje, jestli v poli osoby platí, že každá osoba je vždy buď muž nebo žena.

Metoda filter()

U metody filter() vidíme ve funkci také podmínku. Tato metoda nám však nevrací bool, nýbrž nové pole. Toto nové obsahuje pouze ty položky, které podmínku splnily. Pokud bychom chtěli z pole myArray získat pouze čísla dělitelná třemi, použijeme metodu filter(). Získáme tak nové pole, které obsahuje jen čísla dělitelná třemi. To si můžeme uložit do proměnné. Naše původní pole myArray zůstane nezměněné.

const myArray = [4, 1, 6, 8, 16, -3, 9];
const filteredArray = myArray.filter((item) => item % 3 === 0);

console.log(filteredArray);

Metoda map()

Metodu map() použijeme především, pokud potřebujeme položky pole pozměnit, nebo z nich něco vytvořit. Metoda bere jako parametr opět fuknci. Tuto fuknci zavolá na každé položce pole a výsledek volání uloží do nově vytvořeného pole. Toto nové pole nám potom vrátí. Původní pole zůstane nezměněné. Pokud bychom chtěli každé číslo v našem poli myArray vynásobit dvěma, můžeme použít metodu map(). Dostaneme tak nové pole se zdvojnásobenými čísly. To si můžeme uložit do proměnné. Pole myArray zůstane nezměněné.

const myArray = [4, 1, 6, 8, 16, -3, 9];
const doubledArray = myArray.map((item) => item * 2);

console.log(doubledArray);

¶Cvičení: Funkcionální zpracování dat

¶Funkcionální jednohubky 2

zapni hlavu

Použijte pole numbers, names a osoby z předchozího cvičení.

Pomocí metody filter získejte z pole numbers pouze ta čísla, která jsou sudá.
Pomocí metody filter získejte z pole names pouze ta jména, která jsou delší než 4 znaky.
Pomocí metody filter získejte z pole osoby pouze dospělé lidi.
Pomocí metody filter získejte z pole osoby pouze dospělé muže.
Pomocí metody map vydělte všecha čísla v poli numbers třemi.
Pomocí metody map převeďte všechna čísla v poli numbers na řetězce.
Pomocí metody map vytvořte pole, ve kterém budou všechna jména z pole names zabalená do li tagu. Jméno Petr tak dopadne jako <li>Petr</li>.
Použijte pole osoby a pomocí metody map vytvořte pro každou osobu email ve formátu petr@gmail.com.

¶Úkolníček

to dáš

Založte si JavaScriptový program a vložte do něj následujicí datovou strukturu představující seznam úkolů. Každý objekt obsahuje tyto položky

name - název úkolu,
due - za jak dlouho má být úkol splněn,
notify - jako dlouho předem se má úkol připomenout,
done - jestli už byl úkol splněn.

Nad datovou strukturou uvedenou výše proveďte následující úkony.

Vytvořte pole, které obsahuje pouze názvy všech úkolů.
Vytvořte pole, které obsahuje objekty pouze těch úkolů, které již byly splněny.
Vytvořte pole, které obsahuje objekty pouze těch úkolů, které mají být splněný během následujících tří dnů.
Máme-li pole úkolů, které mají být splněny do tří dnů, zjistěte, zda jsou všechny úkoly z tohoto seznamu již splněny.