Pole (Array) - základy

Pole jsou obvykle definována jako sbírka položek, často stejného typu, s možností přístupu ke každému prvku podle jeho čísla indexu. V mnoha programovacích jazycích najdete typ pole jako nejzákladnější datový typ pro ukládání sbírek, často s dalšími pokročilými sbírkami postavenými na polích, ale v JavaScriptu většinou používáme pole, když potřebujeme uchovávat několik položek ve stejném seznamu.

Naštěstí pro nás přichází JavaScript s velmi pěkným vestavěným objektem nazvaným Array pro práci s poli a trochou syntaktického sladidla, aby to bylo ještě snazší a přirozenější. V tomto článku se podrobně podíváme na to, jak pole v JavaScriptu fungují a na všechny možnosti, které nám nabízejí.

Vytváření pole

Pokud chcete vytvořit pole, existují dvě cesty. První, obsáhlejší způsob:

let array = new Array();

A pak je tu zkrácená verze, která používá trochu syntaktického sladidla k dosažení stejného výsledku jako u prvního příkladu:

let array = [];

Druhý přístup je nejčastěji používaný, takže ho budeme odteď používat. Samozřejmě obě verze nám poskytují pouze prázdné pole bez jakýchkoli prvků. Pokud chceme, můžeme to snadno změnit, takže do pole dáme několik položek, například takto:

let fruits = ["Apple", "Pineapple", "Banana"];

Klíče pole

Buďte si vědomi, že pole v JavaScriptu NEJSOU asociativní pole, což v podstatě znamená, že klíče použité k ukládání položek jsou vždy nezáporná celá čísla (0, 1, 2...) a nikdy nic jiného, jako jsou řetězce.

Pokud můžete použít jakýkoli typ objektu jako klíč pro položky pole, nazývá se to asociativní pole, protože můžete hodnotu "asociovat" s relevantním klíčem místo pouhého čísla indexu. To s poli v JavaScriptu není možné, ale může to být ve skutečnosti realizováno použitím objektů JavaScriptu. Tuto možnost probereme později v tutoriálu, až se dostaneme k objektům.

Typy položek pole

V některých programovacích jazycích, kde typy nejsou tak dynamické jako v JavaScriptu, jste nuceni vytvářet pole na základě toho, jaký druh dat mají obsahovat. Takže byste typicky měli pole řetězců nebo pole celých čísel a tak dále.

Avšak v JavaScriptu, který je vždy dynamický, může pole obsahovat prakticky cokoli, například řetězce, čísla, objekty a dokonce funkce, a můžete libovolně kombinovat jakýkoli způsob, jaký chcete. Zde je příklad:

let array = ["Apple", 42, new Date()];
alert(array[2]); 

Délka pole

Počet položek v poli můžete vždy zjistit kontrolou vlastnosti length:

let fruits = ["Apple", "Pineapple", "Banana"];
alert("Fruit count: " + fruits.length); // 3

Buďte ale opatrní! Vlastnost length je ve skutečnosti interně používána polem k řízení toho, kolik položek může obsahovat. To se většinou děje v pozadí, protože pole se automaticky přizpůsobí počtu položek, které potřebujete, aby obsahovalo, pokud specificky nepožadujete pole určité délky. To můžete udělat vytvořením objektu Array takto, kde v podstatě vytvoříme pole s 6 prázdnými položkami:

let arr = new Array(6);
alert(arr.length); // 6

Délku ale můžete také změnit ručně, takto:

let fruits = ["Apple", "Pineapple", "Banana"];
fruits.length = 6;
alert("Array length: " + fruits.length); // 6

I když naše pole obsahuje pouze 3 ovoce, vlastnost length vrátí 6, protože jsme přepsali vlastnost length. Nicméně to není něco, co byste obvykle dělali, takže ve většině situací se můžete spolehnout na vlastnost length.

Přístup k položkám

S definovaným polem můžeme teď dělat všechny možné věci. Jedna z nejzákladnějších operací by byla jednoduše přistoupit k položce na základě indexu. Zde si musíte pamatovat, že v programování se počítání téměř vždy začíná od 0 místo od 1, takže první položka by byla na pozici 0, druhá na pozici 1 a tak dále. S tím na mysli, pojďme zkusit přistoupit k položce pole, která obsahuje "Ananas":

let fruits = ["Apple", "Pineapple", "Banana"];
alert(fruits[1]); 

Všimněte si použití hranatých závorek, jak při vytváření pole, tak při přístupu k položce. V JavaScriptu jsou hranaté závorky velmi úzce spojeny s poli.

Procházení pole v cyklu

Již jsme hovořili o procházení pole v cyklu, když jsme diskutovali o cyklech obecně, ale myslím si, že si zde zaslouží být diskutováno také. Vzhledem k tomu, že pole jsou sbírky položek, dává naprostý smysl, že můžete procházet tyto položky a postupně přistupovat ke každé položce. Můžeme použít všechny typy cyklů, které nám JavaScript poskytuje, ale zejména cykly for a for..of jsou zde velmi relevantní.

Začneme s cyklem for, který existoval ve všech verzích JavaScriptu, na rozdíl od cyklu for..in, který je poměrně novějším přídavkem:

let fruits = ["Apple", "Pineapple", "Banana"];
for(let i = 0; i < fruits.length; i++)
	alert("Fruit @ index " + i + ": " + fruits[i]);

Používáme několik konceptů, o kterých jsme již zde hovořili: vlastnost length pole, kterou používáme k instrukci cyklu for, kolik iterací potřebujeme, a schopnost přistupovat k položce podle jejího indexu v rámci sady hranatých závorek.

Pokud ale nepotřebujete čítač z cyklu for a nezajímají vás indexy pole, můžete místo toho použít cyklus for..of:

let fruits = ["Apple", "Pineapple", "Banana"];
for(let fruit of fruits)
	alert(fruit);

Jak vidíte, cyklus for..of je mnohem rychlejší na psaní a snadněji čitelný. Pokud chcete vědět více o různých typech cyklů obecně, jen se vraťte zpět v tomto tutoriálu - máme několik článků, které se jim věnují podrobněji.

Přidávání/odstraňování položek

Právě jsme viděli několik příkladů, jak můžeme vytvořit pole s již obsaženými položkami, ale také jsme hovořili o tom, jak lze pole vytvořit bez jakýchkoli položek. Ať už to uděláte jakkoli, brzy se ocitnete v situaci, kdy budete potřebovat po vytvoření pole přidávat nebo odebírat položky.

push()

Pro přidání položek do pole je nejběžnějším přístupem použití metody push(). Tato metoda přidá položku na konec pole, takto:

let fruits = ["Apple", "Pineapple", "Banana"];
fruits.push("Pear");
alert(fruits);

A můžete dokonce specifikovat tolik nových položek, kolik chcete - stačí je oddělit čárkou, takto:

let fruits = ["Apple", "Pineapple", "Banana"];
fruits.push("Pear", "Mango", "Orange");
alert(fruits);

Metoda push() vrátí novou délku pole, takže v případě, že potřebujete o tomto vědět, můžete ji snadno použít, například takto:

let fruits = ["Apple", "Pineapple", "Banana"];
let fruitCount = fruits.push("Pear", "Mango", "Orange");
alert("Total fruit count: " + fruitCount);

pop()

Pokud potřebujete z pole odebrat položku, může vám pomoci metoda pop(). Jednoduše odstraní poslední položku z pole a vrátí vám ji, pokud potřebujete vědět, co bylo právě odstraněno. Zde je příklad použití metody pop():

let fruits = ["Apple", "Pineapple", "Banana"];
let removedFruit = fruits.pop();
alert("Removed fruit: " + removedFruit);
alert("Remaining fruits: " + fruits);

Pro odebrání více položek jednoduše zavolejte metodu pop() tolikrát, kolik je potřeba.

unshift() / shift()

Zatímco push() a pop() fungují na konci pole, můžete použít metody unshift() a shift() k dosažení přesně toho samého, ale na začátku pole. Nebudu se zabývat mnoha podrobnostmi, ale zde je příklad, kde můžete vidět obě metody v akci:

let fruits = ["Apple", "Pineapple", "Banana"];
fruits.shift();
alert(fruits); // Pineapple,Banana

fruits.unshift("Mango");
alert(fruits); // Mango,Pineapple,Banana

Vícedimenzionální pole

Jak jsme právě viděli, pole mohou obsahovat jakýkoli typ hodnot, jako jsou čísla, řetězce, data a tak dále. Ale mohou také obsahovat další pole, čímž vytváří vícedimenzionální pole. To je užitečné pro mnoho situací - jeden příklad by mohl být, když chceme uchovávat nějaká tabulková data, kde naše pole by drželo řádky dat, přičemž každý řádek by se skládal z několika hodnot buněk:

let tableData = 
[
	["Name", "Age", "E-mail"],
	["John Doe", 42, "john@doe.com"],
	["Jane Doe", 39, "jane@doe.com"]
];

V tomto příkladu každá položka prvního pole (tableData) drží řádek v tabulce a každý řádek obsahuje pole dat, která reprezentují buňky tabulky. Když chceme tabulku vygenerovat, můžeme použít cyklus pro generování řádků a cyklus uvnitř prvního cyklu pro generování buněk tabulky, takto:

let tableData = 
[
	["Name", "Age", "E-mail"],
	["John Doe", 42, "john@doe.com"],
	["Jane Doe", 39, "jane@doe.com"]
];

document.write("<table style=\"width: 50%;\">");
for(let row of tableData)
{
	document.write("<tr>");
	for(let cell of row)
	{
		document.write("<td>" + cell + "</td>");
	}
	document.write("</tr>");
}
document.write("</table>");

Docela jednoduché, že? A samozřejmě, neexistují žádná skutečná omezení: vaše pole může obsahovat pole, která mohou obsahovat pole, která mohou obsahovat pole a tak dále - mohou být vícedimenzionální, jak potřebujete.

Shrnutí

V tomto článku jste byli seznámeni s vestavěným objektem Array a hovořili jsme o tom, jak vytvořit pole, přistupovat k jeho položkám a dokonce přidávat nebo odebírat položky. Ale v objektu Array je k nalezení mnohem více funkcionalit, jak zjistíme v dalším článku, kde se podrobněji podíváme na všechny metody Array.