Robert Whitney
Toto je část 9 série blogových příspěvků o JavaScriptu, která vás provede od začátečníka po pokročilého. Tentokrát prozkoumáme následující témata: metody JavaScriptu, výchozí hodnoty parametrů, objekt Date v JavaScriptu a šipkovou funkci. Na konci této série budete znát všechny základy, které potřebujete k tomu, abyste mohli začít programovat v JavaScriptu. Pokud jste nečetli předchozí blogový příspěvek o objektech JavaScriptu, můžete to udělat zde. Bez dalších okolků, pojďme začít s devátým tutoriálem.
Metody JavaScriptu a další – obsah:
Do této doby jsme viděli mnoho konceptů a témat v JavaScriptu, ale stále existují některé běžně používané, které jsme neobjevili. V tomto tutoriálu uvidíme, o co se jedná. Prvním tématem jsou výchozí hodnoty parametrů v JavaScriptu.
Výchozí hodnoty parametrů
Funkce se v programování používají velmi často, a když se něco používá tak často, existují nejen frameworky jako React, které využívají funkce JavaScriptu, ale byly vyvinuty i další optimalizace, které umožňují získat ještě více z funkcí JavaScriptu. Jednou z hlavních funkcí, které máme ve funkcích, jsou výchozí hodnoty parametrů. Výchozí parametry nám umožňují psát bezpečnější kód, který může bezpečně předpokládat vstup uživatele. To také prospívá uživateli tím, že mu poskytuje výchozí nastavení, které může usnadnit výběr z jeho možností. Pojďme se podívat na několik příkladů.
// předpokládejme, že vyvíjíte webovou stránku pro kavárnu
// a většina lidí chce dostat střední velikost americana
// vědoucí to, chcete lidem usnadnit
// objednávání jejich kávy s menším úsilím
function orderCoffee(typeOfCoffee="americano", sizeOfCoffee="medium", numberOfCoffee=1){
return (numberOfCoffee + " " + sizeOfCoffee + " velikost " + typeOfCoffee + " se připravuje. ");
}
console.log("Výchozí objednávka:");
console.log(orderCoffee());
// tímto způsobem, když průměrný zákazník objednává online,
// bude pro něj mnohem snazší objednat si svou denní kávu
// natolik, že si ji bude moci objednat jedním tlačítkem
// alternativně si lidé mohou také přizpůsobit svou kávu
// změnou vstupů
console.log("Vlastní objednávka:");
console.log(orderCoffee("latte", "large", 2));
console.log("Další vlastní objednávka:");
console.log(orderCoffee("macchiato", "small", 1));
// je také možné změnit pouze část vstupů
// a využít výchozí parametry
// pro zbytek vstupních polí
console.log("Částečně přizpůsobená objednávka:");
console.log(orderCoffee("iced coffee"));
Spuštění výše uvedeného kódu nám dává následující výstup:
Objekt Date v JavaScriptu
Objekt Date v JavaScriptu se používá poměrně běžně, zejména ve webovém vývoji. Můžeme použít objekt Date k provádění časově citlivých funkcí, jako je změna nastavení zobrazení na tmavý režim, světlý režim nebo jakýkoli jiný režim, který by uživatel mohl preferovat. Můžeme také použít informace o datu podle potřeby uvnitř projektu, na kterém pracujeme. Zde je několik příkladů objektu Date v akci:
// prvním krokem je vytvořit instanci objektu date
// můžeme to udělat napsáním následujícího a
// nastavením na proměnnou nebo konstantu podle našeho výběru
let today = new Date();
console.log("Jsme v roce: " + today.getFullYear());
console.log("Můžeme také získat měsíc v čísle:");
console.log(today.getMonth());
console.log("Také můžeme získat hodinu dne takto:");
console.log(today.getHours());
console.log("Můžeme také získat přesné minuty spolu se sekundami");
console.log(today.getMinutes());
console.log(today.getSeconds());
// jakmile máme tato čísla, můžeme je použít podle libosti
// pokud chceme, můžeme je zobrazit nebo na jejich základě učinit rozhodnutí.
// pokud chceme zobrazit měsíc s názvem
// místo čísla, můžeme to také dosáhnout
// následujícím způsobem
const months = ["Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad", "Prosinec"];
console.log("Jsme v měsíci " + months[today.getMonth()]);
// co jsme právě udělali, bylo vytvořit pole pro uložení názvů měsíců
// a poté vybrat správný měsíc pomocí indexové hodnoty
// poskytnuté metodou .getMonth().
// pokud bychom chtěli zapnout tmavý režim po 20:00,
// mohli bychom to udělat následujícím kódem
// jednou z prvních věcí, které bychom si měli pamatovat, je, že
// hodiny jsou udávány ve 24hodinovém formátu
// to znamená, že 20:00 bude znamenat 20 jako hodiny
// můžeme také použít zkrácený způsob
// a kombinovat vytvoření nového objektu data
// s metodou get hours
let timeOfDay = new Date().getHours();
if (timeOfDay >= 20) {
console.log("Přepínám na tmavý režim...");
} else {
console.log("Nepřepínejte na tmavý režim");
}
// protože aktuální čas je po 20:00,
// v tomto případě očekáváme, že se zapne tmavý režim.
// což je také výsledek, který dostáváme, jak vidíme z
// výstupu konzole.
Spuštění výše uvedeného kódu nám dá následující výstupy v konzoli:
Metoda Map()
Metoda map je velmi užitečná metoda, která vám může ušetřit mnoho řádků kódu, a v závislosti na tom, jak ji používáte, může učinit váš kód mnohem čistším. V podstatě nahrazuje použití cyklu for, když ji používáte k procházení pole. Zde je několik příkladů metody map().
// vytvořme pole, které použijeme pro mapování
let someNumbers = [1, 2, 3, 4, 5];
// vytvořme také funkce, které poskytneme metodě map
function doubleNums(num1){
return num1 * 2;
}
function squareNums(num1){
return num1 * num1;
}
function add100(num1){
return num1 + 100;
}
console.log("Pole zdvojených čísel:");
console.log(someNumbers.map(doubleNums));
console.log("Pole umocněných čísel:");
console.log(someNumbers.map(squareNums));
console.log("100 přidáno k každému prvku v poli čísel:");
console.log(someNumbers.map(add100));
// metoda map() projde každým z
// položek v daném poli a aplikuje
// poskytnutou funkci
// poznamenejte si, že nezahrnujeme závorky
// za názvy funkcí, to by zavolalo funkci
// místo toho předáváme název funkce,
// a metoda map() je volá, když je potřebuje
Spuštění výše uvedeného kódu nám dá následující výstupy v konzoli:
Metoda Filter()
Metoda filter(), spolu s metodou map(), jsou obě poměrně běžné metody JavaScriptu. Jsou velmi podobné metodě map(), kterou jsme právě viděli. S metodou map() můžeme předat jakoukoli funkci, a ta se aplikuje na každý z prvků v poli. S metodou filter() předáme kritérium filtru a metoda filter projde všechny položky v poli a vrátí nové pole, ve kterém zůstanou pouze položky, které splňují kritéria. Pojďme se podívat na několik příkladů:
// nejprve vytvořme pole
// pro aplikaci metody filter()
let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
function checkEven(num1){
if (num1 % 2 == 0){
return num1;
}
}
function checkOdd(num1){
if (num1 % 2 == 1){
return num1;
}
}
function over13(num1){
if (num1 > 13){
return num1;
}
}
function divisibleByFive(num){
if (num % 5 == 0){
return num;
}
}
console.log("Párová čísla ze seznamu:");
console.log(someNumbers.filter(checkEven));
console.log("Nepárová čísla ze seznamu:");
console.log(someNumbers.filter(checkOdd));
console.log("Čísla nad 13 z pole:");
console.log(someNumbers.filter(over13));
console.log("Čísla dělitelná 5 z pole:");
console.log(someNumbers.filter(divisibleByFive));
Spuštění výše uvedeného kódu nám dá následující výstupy v konzoli:
Šipková funkce
Pamatujete si, když jsme říkali, že funkce jsou v JavaScriptu extrémně běžné a že se na nich provádí mnoho optimalizací, aby byl kód ještě výkonnější nebo čistší? No, šipkové funkce jsou jednou z nich. Šipkové funkce se někdy také nazývají tlusté šipky. V podstatě poskytují mnohem kratší způsob, jak psát vaše funkce. Jsou také velmi běžně používány s metodami JavaScriptu, které jsme právě viděli. Pojďme se na ně podívat s několika příklady:
// JavaScript poskytuje více úrovní // zkracování kódu pomocí šipkových funkcí v závislosti na vašem přesném kódu // V podstatě nejdelší způsob, jak můžeme napsat funkci, je // způsob, jakým je vždy píšeme bez použití šipkových funkcí // začněme s polem, na které aplikujeme šipkové funkce let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]; console.log("Původní pole:"); console.log(someNumbers); // v předchozích příkladech jsme aplikovali mnoho funkcí // po jejich vytvoření jako běžné pojmenované funkce // V tomto příkladu aplikujeme přesné transformace // abyste viděli obě extrémy v délce kódu // zdvojnásobte každé číslo v poli: console.log("Zdvojnásobte každé číslo v poli:") console.log(someNumbers.map(num => num * 2)); // umocněte každé číslo v poli: console.log("Umocněte každé číslo v poli:") console.log(someNumbers.map(num => num * num)); // přidejte 100 k každému číslu v poli: console.log("Přidejte 100 k každému číslu v poli:") console.log(someNumbers.map(num => num + 100)); // Zachovejte pouze párová čísla v poli: console.log("Zachovejte pouze párová čísla v poli:") console.log(someNumbers.filter(num => num % 2 == 0)); // Zachovejte pouze nepárová čísla v poli: console.log("Zachovejte pouze nepárová čísla v poli:") console.log(someNumbers.filter(num => num % 2 == 1)); // Zachovejte pouze čísla, která jsou dělitelná 5: console.log("Zachovejte pouze čísla, která jsou dělitelná 5:") console.log(someNumbers.filter(num => num % 5 == 0)); // Zachovejte pouze čísla, která jsou nad 13: console.log("Zachovejte pouze čísla, která jsou nad 13:") console.log(someNumbers.filter(num => num > 13));
Spuštění výše uvedeného kódu nám dá následující výstupy v konzoli:
V dalším tutoriálu budeme mít přehled toho, co jsme viděli, a uvidíme, co bude dál.
Robert Whitney
Odborník na JavaScript a lektor, který školí IT oddělení. Jeho hlavním cílem je zvýšit produktivitu týmu tím, že učí ostatní, jak efektivně spolupracovat při programování.
