Seznamy v JavaScriptu: pole a cykly

Dosud jsme pracovali s jednou hodnotou v proměnné. Na webu ale často potřebujete celý seznam: služby, jména nebo odkazy v menu. Na to slouží pole (array).

Vytvoření pole

const sluzby = ["Web", "E-shop", "Aplikace"];

Položky jsou očíslované od nuly. První položka má index 0, druhá 1 a tak dál. Pole zapíšete do hranatých závorek a položky oddělíte čárkou.

Čtení a délka

console.log(sluzby[0]);      // "Web"
console.log(sluzby[2]);      // "Aplikace"
console.log(sluzby.length);  // 3

Vlastnost length říká, kolik položek pole má. Poslední položku získáte jako sluzby[sluzby.length - 1].

Přidání a odebrání

sluzby.push("Hosting");  // přidá položku na konec
sluzby.pop();            // odebere poslední položku

Procházení celého seznamu

Místo ručního psaní každé položky použijte metodu forEach. Pro každou položku se spustí funkce, kterou jí předáme:

sluzby.forEach(function (sluzba) {
  console.log("Nabízím: " + sluzba);
});

V konzoli se objeví tři řádky: Nabízím: Web, Nabízím: E-shop a Nabízím: Aplikace.

Seznam jako odkazy na stránce

Stejný princip funguje i na stránce. Z pole uděláte seznam odkazů, který se připojí na konec stránky:

const odkazy = ["Domů", "Služby", "Kontakt"];
odkazy.forEach(function (text) {
  const a = document.createElement("a");  // vytvoří nový odkaz
  a.href = "#";                           // adresa odkazu
  a.textContent = text;                   // nastaví jeho text
  document.body.appendChild(a);           // přidá ho na stránku
});

Časté chyby

• Počítání od jedničky. První položka je pole[0]. Zápis pole[1] vrátí druhou položku.
• Přístup za konec pole. U tříprvkového pole vrátí pole[10] hodnotu undefined, tedy nic. Hodnotu proto vždy ověřte.
• Záměna textu a pole. "Web" je text, ["Web"] je pole. Chovají se jinak.

Teď umíte držet seznam hodnot a projít ho jednu po druhé. V dalším návodu to použijeme u formuláře, kde kontrolujeme víc polí najednou.