Java pole. Část 6 kurzu JavaScript od začátečníka po pokročilého v 10 blogových příspěvcích

Toto je část 6 série blogových příspěvků o JavaScriptu, která vás provede od začátečníka po pokročilého. Na konci této série budete znát všechny základy, které potřebujete k tomu, abyste začali programovat v JavaScriptu. Bez dalších okolků, pojďme začít s šestým tutoriálem.

Java pole – obsah:

1. Pole – základní informace
2. Přidávání položek do java pole
3. Odstraňování položek z pole
4. Zjištění délky v polích
5. Třídění polí
6. Obrácení prvků v polích
7. Pro každého
8. Zahrnuje v polích

Tento tutoriál předpokládá, že máte nastavené prostředí pro kódování. Pokud jste sledovali předchozí tutoriály, měli byste ho mít již otevřené. Pokud jste z nějakého důvodu zavřeli své nastavení, můžete najít úplné pokyny k nastavení v části 4 této série. V tomto tutoriálu projdeme, jak nastavit vaše prostředí Google Chrome Snippets pro kódování.

Pokud se cítíte trochu pohodlně při používání Google Chrome, zde je rychlý způsob, jak se nastavit pro tento tutoriál, jinak se můžete podívat na část 4 pro úplný soubor krok za krokem pokynů, jak nastavit vaše prostředí pro kódování.

Pokud používáte Mac, klávesová zkratka pro otevření konzole je stisknout “Option + Command + J”, poté co otevřete Chrome. Pokud používáte zařízení Windows, můžete použít klávesovou zkratku “Control + Shift + J” pro otevření JavaScript konzole, jakmile otevřete Chrome. Nebo můžete také přejít do nabídky nahoře a jít na Zobrazit -> Vývojář -> JavaScript konzole. Jakmile otevřete konzoli, můžete kliknout na kartu “Sources”, která je hned vedle “Console”. Nyní byste měli vidět Snippets. Můžete buď pokračovat v kódování v úryvku, který jste již dříve začali používat, nebo můžete vytvořit nový úryvek kliknutím na tlačítko “+ Nový úryvek”. Jakmile máte nastavené prostředí pro kódování pro tento tutoriál, jste připraveni začít.

Java pole – základní informace

Pole jsou široce používána v mnoha programovacích jazycích a JavaScript není výjimkou. A to z dobrého důvodu. Ale možná se ptáte, co je to pole? Pole jsou v podstatě kolekcí souvisejících dat, která lze přistupovat a manipulovat s nimi pomocí určitých definovaných metod. Podívejme se na několik příkladů pole, abychom měli úplnější pochopení.

const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const testAnswers = [true, true, false, false, true];
const pets = ["psi", "kočky", "ptáci", "ryby"];

Pomocí java pole můžeme ukládat různé druhy dat. Například v kódu výše jsme uložili některá čísla, booleany a také datový typ řetězce.

Pole v Javě můžeme vytvořit stejně jako jiné proměnné, s klíčovými slovy const nebo let na levé straně a obsahem polí na pravé straně rovnic. Jedna věc, na kterou byste měli dávat pozor, je, že když vytváříme pole, používáme hranaté závorky k obklopení položek, stejně jako jsme to udělali v kódu výše. Také oddělujeme každou položku čárkou, bez ohledu na jejich datový typ.

V tomto tutoriálu napíšeme kód tak, abyste mohli vše z tohoto tutoriálu zkopírovat a vložit sekvenčně, nebo napsat vše do úryvku JavaScriptu v Chrome, a mělo by to fungovat podle očekávání, pokud budete dodržovat pořadí. Například to znamená, že pokud definujeme proměnnou s klíčovým slovem const jednou v tutoriálu, obvykle nemůžete znovu definovat jinou proměnnou se stejným názvem. Proto pokud plánujete částečně zkopírovat a vložit nějaký kód, je dobrý nápad ujistit se, že tyto proměnné definujete ve svém kódu také. To by neměl být problém, pokud sledujete tutoriál v pořadí, v jakém je prezentován.

Jedna z prvních věcí, které byste měli vědět o java poli, je, že jakmile vytvoříte pole, musíte přistupovat k jeho prvkům. Pole mají něco, čemu se říká “číslované indexy”, a co to pro vás znamená v praxi, je, že každý prvek, který vytvoříte v JavaScriptu, má číslo, které je s ním spojeno zleva doprava, od nuly do délky java pole minus jedna.

Například v výše uvedeném kódu pro domácí zvířata můžeme přistupovat k prvnímu prvku “psů” tím, že napíšeme název proměnné, otevřeme hranaté závorky, vložíme index položky, ke které se chceme dostat, a zavřeme hranaté závorky:

alert(pets[0]);

Podobně, pokud zadáme vyšší čísla, spustí se zobrazení dalších prvků v okně upozornění, které zobrazuje.

alert(pets[1]);
alert(pets[2]);
alert(pets[3]);

Protože jsme měli 4 prvky v poli domácích zvířat a začali jsme indexy od 0, poslední položka v poli se přistupuje pomocí pets[3], což je o 1 méně než celková délka pole. V tuto chvíli se možná ptáte, nyní, když můžeme vytvořit pole a přistupovat k položce z tohoto pole, co takhle provádět úpravy tohoto pole? Co takhle přidávat nové položky, měnit existující položky nebo odstraňovat položky? No, pojďme to vzít krok za krokem a začněme přidáváním nových položek do pole.

Přidávání položek do java pole

Existuje několik způsobů, jak můžeme přidat různé položky do pole. Pokud víme, že chceme přidat novou položku na konec pole, můžeme použít metodu “push”. To se také nazývá přidání nové položky do pole. Všimněte si, že přidaná položka bude na konci pole. Například:

pets.push("hadí");
// ověřme, že máme hady jako poslední položku
// zobrazením obsahu pole
alert(pets);

Pokud víme, že konkrétně chceme přidat položku do java pole jako první prvek, můžeme použít klíčové slovo “unshift”. Podívejme se na to s příkladem:

// spuštění tohoto kódu posune všechny hodnoty
// na jednu stranu a přidá první domácí zvíře draka
pets.unshift(“draci”); 
// ověřme to zobrazením obsahu pole
alert(pets);

Je skvělé, že můžeme přidávat položky na konec pole nebo na začátek pole, ale co když z nějakého důvodu chci vkládat položky do pole na konkrétní pozice. Řekněme, že chci přidat želvy na třetí pozici. Je to vůbec možné? Ano, je. Abychom mohli vložit položku do pole, můžeme ji definovat stejně jako vytváření té části pole a přiřadit hodnotu konkrétní části pole. Také nezapomeňte použít indexové hodnoty při vkládání hodnot. Z praktického hlediska to vypadá takto:

pets[2] = "želvy";
// ověřme, že máme želvy jako třetí položku
// zobrazením obsahu pole
alert(pets);

Odstraňování položek z pole

V tuto chvíli se možná ptáte, co takhle odstraňování položek z pole? No, existuje také několik způsobů, jak to udělat. Pravděpodobně nejznámější je použití metody “pop”. Tato metoda v podstatě odstraní vaši poslední položku z pole. // to odstraní poslední položku v poli pets.pop(); // ověřme výsledky zobrazením obsahu pole alert(pets);

Jak vidíte, pomocí metody pop jsme odstranili poslední položku domácího zvířete, hady, z našeho pole domácích zvířat.

Další způsob, jak můžete odstranit položky z java pole, je použití klíčového slova “shift”. Když použijeme shift, první prvek bude smazán a zbytek indexových hodnot se přizpůsobí. Například:

// to odstraní první položku
// a posune ostatní položky do jejich nových indexových hodnot
// které budou o jednu nižší než předchozí indexové hodnoty
pets.shift();
// ověřme to také zobrazením pole
alert(pets);

Název “shift” vlastně pochází z toho, jak funguje alokace paměti v počítačové paměti. Takže pokud to na první pohled vypadá relativně neintuitivně, je to naprosto v pořádku. Prozatím byste měli vědět, že pomocí metody shift můžeme odstranit první položku z pole.

Zjištění délky v polích

Když se zabýváme poli v reálném životě, může být mnoho případů, kdy chceme spočítat počet položek v poli. To může být potřeba na různých místech, včetně seznamů úkolů, seznamů účastníků ve škole nebo v práci, a tak dále. Abychom toho dosáhli, máme vestavěný vlastnost pole nazvanou “length”, která nám řekne celkovou délku pole. Například:

alert(pets.length);

Třídění polí

Třídění polí je v JavaScriptu poměrně běžná operace. Existují různé specifické implementace pro třídění položek v JavaScriptu. Tyto specifické implementace se obecně nazývají třídící algoritmy. Různé třídící algoritmy mohou přinášet různé výhody a nevýhody. Například může být zvolen jeden třídící algoritmus před jiným, protože je jednoduše mnohem snazší implementovat v kódu, ve srovnání s jiným, i když mohou vykazovat mírně lepší výkon. Možná jste slyšeli o různých třídících algoritmech pro optimalizovaný výkon. V tomto tutoriálu využijeme vestavěnou metodu třídění poskytovanou JavaScriptem. Třídění je poměrně běžný problém, zejména ve webovém vývoji. Například, pokud vytváříte e-commerce web, musíte implementovat různé situace třídění, ze kterých si uživatel může vybrat. Ačkoli neexistují žádná přísná pravidla o tom, jaké možnosti a schopnosti byste měli svému publiku poskytnout, existují poměrně běžné standardy, které se od vás jako od tvůrce webu očekávají. Například jako uživatel je vysoká šance, že budete chtít seřadit některé položky obchodu jak vzestupně, tak sestupně podle ceny. Při implementaci třídění pro tyto úkoly byste měli mít na paměti, jak to implementovat, vzhledem k tomu, že uživatel může také omezit výsledky vyhledávání na určité další kategorie, jako jsou trička, čepice, tašky a tak dále. Můžeme seřadit pole přidáním “.sort()” na konec.

pets.sort();
alert(pets);

Obrácení prvků v polích

Obrácení pole je pravděpodobně častěji kombinováno se tříděním. V tomto případě, protože také provádíme tyto kódy shora dolů, také aplikujeme obrácení po seřazení pole. Můžeme obrátit pole přidáním “.reverse()” na konec. pets.reverse(); alert(pets);

Protože jsme pole seřadili v předchozím kroku, můžete vidět, že nyní máme pole, které je jak seřazené, tak obrácené.

Pro každého

Když pracujeme s poli, JavaScript nám poskytuje pohodlný způsob, jak procházet položkami pole pomocí “.forEach()”. Pokud opravdu chceme, můžeme stále použít běžný cyklus for k procházení pole. Vlastně se nejprve podívejme, jak vytvořit cyklus for pro procházení pole, poté se podíváme na použití forEach().

// to nás upozorní 4krát, abychom nakrmili naše domácí zvíře
for (let a = 0; a < pets.length; a++) {
    alert("Čas nakrmit mé domácí zvíře");
}

Stejného výsledku můžeme dosáhnout také pomocí forEach.

pets.forEach(alert("Čas nakrmit mé domácí zvíře"));

Když porovnáme použití cyklů for nebo forEach, v závislosti na vašich preferencích a vaší konkrétní situaci můžete preferovat použití jednoho z nich před druhým. V podstatě oba dosahují stejných výstupů s různými styly v kódu. ForEach může být relativně jednodušší a ušetří vám řádek kódu na čtení a psaní, ale nakonec to bude vaše volba. Nemusíte se rozhodovat hned a držet se toho. Jak píšete kód, můžete experimentovat s řešením stejného problému různými přístupy, jak se posouváte ve své programovací cestě.

Zahrnuje v polích

Můžeme také zkontrolovat, zda položka existuje uvnitř java pole. Jeden příklad reálného použití této metody by byl, zda soukromá akce zahrnuje jméno osoby na pozvánkovém seznamu. Skutečná implementace je také docela přímočará. Nejprve napíšeme název pole, v tomto případě pracujeme s polem domácích zvířat. Poté vložíme tečku, abychom přistupovali k různým vlastnostem a metodám pole, poté napíšeme “includes”, otevřeme a zavřeme závorky a napíšeme název položky, kterou chceme zkontrolovat uvnitř. Zde je příklad, který kontroluje položku, o které víme, že existuje v poli:

alert(pets.includes("psi"));

Pokud také zkusíme totéž s položkou, o které víme, že v java poli neexistuje, očekáváme, že dostaneme false jako odpověď. Podívejme se také na tento případ s příkladem:

alert(pets.includes("štěně")); [/code>

Protože jsme v poli domácích zvířat neměli žádné štěně, dostali jsme false, jak jsme očekávali. V dalším tutoriálu uvidíme další hlavní koncept jak ve světě programování, tak v JavaScriptu.