Pole a objekty

Pole (Array)

Pole je seřazený seznam hodnot. Zapisuje se do hranatých závorek, hodnoty se oddělují čárkou:

let barvy = ['červená', 'zelená', 'modrá'];
let cisla = [10, 20, 30, 40];
let smisene = ['text', 42, true, null]; // pole může mít různé typy

Každá položka má svůj index – číselnou pozici začínající od nuly. K položce přistupuješ přes hranatou závorku s indexem:

console.log(barvy[0]); // 'červená'
console.log(barvy[1]); // 'zelená'
console.log(barvy[2]); // 'modrá'

// Počet položek
console.log(barvy.length); // 3

Nejdůležitější metody pole

Pole má celou řadu zabudovaných metod pro práci s daty:

Přidávání a odebírání

let seznam = ['a', 'b', 'c'];

seznam.push('d');       // přidá na konec → ['a','b','c','d']
seznam.pop();           // odebere z konce → ['a','b','c']
seznam.unshift('z');    // přidá na začátek → ['z','a','b','c']
seznam.shift();         // odebere ze začátku → ['a','b','c']

Procházení a transformace

let cisla = [1, 2, 3, 4, 5];

// forEach – spustí funkci pro každý prvek
cisla.forEach(function (n) {
  console.log(n * 2);
});

// map – vrátí nové pole s transformovanými hodnotami
let zdvojene = cisla.map(n => n * 2);
// zdvojene = [2, 4, 6, 8, 10]

// filter – vrátí nové pole jen s prvky splňujícími podmínku
let suda = cisla.filter(n => n % 2 === 0);
// suda = [2, 4]

// find – vrátí první prvek splňující podmínku
let prvniVetsiNez3 = cisla.find(n => n > 3);
// prvniVetsiNez3 = 4

Hledání a kontrola

let ovoce = ['jablko', 'hruška', 'švestka'];

console.log(ovoce.includes('hruška')); // true
console.log(ovoce.indexOf('švestka')); // 2 (index)
console.log(ovoce.indexOf('banán'));   // -1 (nenalezeno)
console.log(ovoce.join(', '));         // 'jablko, hruška, švestka'

Objekt (Object)

Kde pole ukládá seznam hodnot přístupných přes číslo (index), objekt ukládá hodnoty přístupné přes pojmenovaný klíč. Zapisuje se do složených závorek jako páry klíč: hodnota:

let uzivatel = {
  jmeno: 'Zdeněk',
  vek: 40,
  jeMemberem: true,
  email: 'zdenek@example.cz'
};

K hodnotám přistupuješ přes tečku nebo hranatou závorku:

console.log(uzivatel.jmeno);        // 'Zdeněk'
console.log(uzivatel['vek']);       // 40

// Změna hodnoty
uzivatel.vek = 41;

// Přidání nové vlastnosti
uzivatel.web = 'crazy-mac.cz';

// Ověření existence vlastnosti
console.log('email' in uzivatel);  // true

Procházení objektu

Objekt nemá indexy jako pole – prochází se pomocí for…in nebo statických metod:

let nastaveni = {
  tema: 'tmave',
  jazyk: 'cs',
  velikostPisma: 16
};

// for...in – prochází klíče objektu
for (let klic in nastaveni) {
  console.log(klic + ': ' + nastaveni[klic]);
}
// tema: tmave
// jazyk: cs
// velikostPisma: 16

// Object.keys() – pole klíčů
console.log(Object.keys(nastaveni));
// ['tema', 'jazyk', 'velikostPisma']

// Object.values() – pole hodnot
console.log(Object.values(nastaveni));
// ['tmave', 'cs', 16]

// Object.entries() – pole párů [klíč, hodnota]
Object.entries(nastaveni).forEach(([klic, hodnota]) => {
  console.log(`${klic} = ${hodnota}`);
});

Pole objektů – nejběžnější datová struktura

V praxi se nejčastěji pracuje s polem objektů – to jsou data, která dostaneš z API, databáze nebo si je sám připravíš. Na tomto webu tak vypadá banka otázek pro test:

let otazky = [
  {
    kategorie: 'html',
    otazka: 'Který tag označuje nadpis první úrovně?',
    moznosti: ['<h1>', '<h2>', '<title>'],
    spravna: 0
  },
  {
    kategorie: 'css',
    otazka: 'Jak se připojí CSS soubor?',
    moznosti: ['<link>', '<style src>', '<css>'],
    spravna: 0
  }
];

// Přístup k datům
console.log(otazky[0].otazka);     // 'Který tag označuje...'
console.log(otazky[1].moznosti[0]); // '<link>'

// Filtrování – jen HTML otázky
let htmlOtazky = otazky.filter(o => o.kategorie === 'html');

// Procházení všech otázek
otazky.forEach(function (otazka, index) {
  console.log(`Otázka ${index + 1}: ${otazka.otazka}`);
});

Destrukturace – pohodlné rozbalení hodnot

Moderní JavaScript nabízí zkrácený zápis pro vytažení hodnot z pole nebo objektu:

// Destrukturace pole
let barvy = ['červená', 'zelená', 'modrá'];
let [prvni, druha] = barvy;
console.log(prvni); // 'červená'
console.log(druha); // 'zelená'

// Destrukturace objektu
let uzivatel = { jmeno: 'Zdeněk', vek: 40, web: 'crazy-mac.cz' };
let { jmeno, web } = uzivatel;
console.log(jmeno); // 'Zdeněk'
console.log(web);   // 'crazy-mac.cz'

// Přejmenování při destrukturaci
let { jmeno: jmenoUzivatele } = uzivatel;
console.log(jmenoUzivatele); // 'Zdeněk'

JSON – výměnný formát dat

JSON (JavaScript Object Notation) je textový formát pro přenos dat. Vypadá téměř jako JavaScriptový objekt, ale má přísnější pravidla – klíče musejí být v uvozovkách a hodnoty mohou být jen string, číslo, boolean, null, pole nebo objekt.

// Objekt → JSON řetězec (pro uložení nebo odeslání)
let data = { jmeno: 'Zdeněk', vek: 40 };
let jsonText = JSON.stringify(data);
console.log(jsonText); // '{"jmeno":"Zdeněk","vek":40}'

// JSON řetězec → objekt (po přijetí nebo načtení)
let zpetNaObjekt = JSON.parse(jsonText);
console.log(zpetNaObjekt.jmeno); // 'Zdeněk'

JSON se používá všude – v localStorage, při komunikaci s API i v konfiguračních souborech. Proto je důležité obě metody dobře znát.

Tip od Zdeňka

Zdeněk radí: Pole a objekty používám na každé stránce tohoto webu. Oblíbené lekce jsou pole objektů uložené v localStorage, banka testových otázek je pole objektů v JavaScriptu, nastavení webu je objekt. Jakmile pochopíš, jak pole a objekty fungují, začneš vidět kód kolem sebe úplně jinak – všechno dává větší smysl. Doporučuji si zapamatovat tři metody, které používám denně: push() pro přidání do pole, filter() pro výběr podmnožiny a JSON.stringify() / JSON.parse() pro práci s localStorage.