17 KiB

Raw Blame History

Základy JavaScriptu: Pole a cykly

Sketchnote od Tomomi Imura

Kvíz před lekcí

Přemýšleli jste někdy, jak webové stránky sledují položky v nákupním košíku nebo zobrazují seznam vašich přátel? Právě zde přicházejí na řadu pole a cykly. Pole jsou jako digitální kontejnery, které uchovávají více informací, zatímco cykly vám umožňují efektivně pracovat s těmito daty bez opakovaného kódu.

Společně tyto dva koncepty tvoří základ pro práci s informacemi ve vašich programech. Naučíte se přejít od ručního psaní každého kroku k vytváření chytrého a efektivního kódu, který dokáže rychle zpracovat stovky nebo dokonce tisíce položek.

Na konci této lekce pochopíte, jak zvládnout složité úkoly s daty pomocí několika málo řádků kódu. Pojďme prozkoumat tyto základní programovací koncepty.

🎥 Klikněte na obrázky výše pro videa o polích a cyklech.

Tuto lekci si můžete projít na Microsoft Learn!

Pole

Představte si pole jako digitální kartotéku - místo toho, abyste ukládali jeden dokument do každé zásuvky, můžete organizovat více souvisejících položek v jednom strukturovaném kontejneru. V programování vám pole umožňují ukládat více informací do jednoho organizovaného balíčku.

Ať už vytváříte fotogalerii, spravujete seznam úkolů nebo sledujete nejvyšší skóre ve hře, pole poskytují základ pro organizaci dat. Podívejme se, jak fungují.

✅ Pole jsou všude kolem nás! Dokážete si představit příklad pole z reálného života, například pole solárních panelů?

Vytváření polí

Vytvoření pole je velmi jednoduché - stačí použít hranaté závorky!

// Empty array - like an empty shopping cart waiting for items
const myArray = [];

Co se zde děje? Právě jste vytvořili prázdný kontejner pomocí těchto hranatých závorek []. Představte si to jako prázdnou knihovnu - je připravena uchovávat jakékoliv knihy, které tam chcete uspořádat.

Pole můžete také naplnit počátečními hodnotami hned od začátku:

// Your ice cream shop's flavor menu
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// A user's profile info (mixing different types of data)
const userData = ["John", 25, true, "developer"];

// Test scores for your favorite class
const scores = [95, 87, 92, 78, 85];

Zajímavé věci, které si všimnout:

Můžete ukládat text, čísla nebo dokonce hodnoty true/false do stejného pole
Stačí oddělit každou položku čárkou - snadné!
Pole jsou ideální pro uchovávání souvisejících informací pohromadě

Indexování polí

Zde je něco, co se může zpočátku zdát neobvyklé: pole číslují své položky od 0, nikoliv od 1. Toto číslování od nuly má své kořeny v tom, jak funguje paměť počítače - je to programovací konvence od počátků programovacích jazyků jako C. Každé místo v poli dostane své vlastní číslo adresy nazývané index.

Index	Hodnota	Popis
0	"Čokoláda"	První prvek
1	"Jahoda"	Druhý prvek
2	"Vanilka"	Třetí prvek
3	"Pistácie"	Čtvrtý prvek
4	"Rocky Road"	Pátý prvek

✅ Překvapuje vás, že pole začínají na indexu nula? V některých programovacích jazycích začínají indexy na 1. Je zde zajímavá historie, kterou si můžete přečíst na Wikipedii.

Přístup k prvkům pole:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Access individual elements using bracket notation
console.log(iceCreamFlavors[0]); // "Chocolate" - first element
console.log(iceCreamFlavors[2]); // "Vanilla" - third element
console.log(iceCreamFlavors[4]); // "Rocky Road" - last element

Rozbor toho, co se zde děje:

Používá notaci hranatých závorek s číslem indexu pro přístup k prvkům
Vrací hodnotu uloženou na konkrétní pozici v poli
Začíná počítat od 0, což dělá první prvek indexem 0

Úprava prvků pole:

// Change an existing value
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "Butter Pecan"

// Add a new element at the end
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "Cookie Dough"

V uvedeném příkladu jsme:

Upravili prvek na indexu 4 z "Rocky Road" na "Butter Pecan"
Přidali nový prvek "Cookie Dough" na index 5
Automaticky rozšířili délku pole při přidání nad aktuální hranice

Délka pole a běžné metody

Pole mají vestavěné vlastnosti a metody, které usnadňují práci s daty.

Zjištění délky pole:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5

// Length updates automatically as array changes
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

Klíčové body k zapamatování:

Vrací celkový počet prvků v poli
Aktualizuje se automaticky při přidání nebo odebrání prvků
Poskytuje dynamický počet užitečný pro cykly a validaci

Základní metody pole:

const fruits = ["apple", "banana", "orange"];

// Add elements
fruits.push("grape");           // Adds to end: ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"]

// Remove elements
const lastFruit = fruits.pop();        // Removes and returns "grape"
const firstFruit = fruits.shift();     // Removes and returns "strawberry"

// Find elements
const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
const hasApple = fruits.includes("apple"); // Returns true

Porozumění těmto metodám:

Přidává prvky pomocí push() (na konec) a unshift() (na začátek)
Odstraňuje prvky pomocí pop() (z konce) a shift() (ze začátku)
Vyhledává prvky pomocí indexOf() a kontroluje existenci pomocí includes()
Vrací užitečné hodnoty jako odstraněné prvky nebo pozice indexů

✅ Vyzkoušejte si to sami! Použijte konzoli svého prohlížeče k vytvoření a manipulaci s polem podle svého výběru.

Cykly

Představte si slavný trest z románů Charlese Dickense, kde studenti museli opakovaně psát věty na tabulku. Představte si, že byste mohli jednoduše někomu říct "napiš tuto větu 100krát" a bylo by to automaticky hotovo. Přesně to dělají cykly pro váš kód.

Cykly jsou jako mít neúnavného asistenta, který může opakovat úkoly bez chyb. Ať už potřebujete zkontrolovat každou položku v nákupním košíku nebo zobrazit všechny fotografie v albu, cykly zvládnou opakování efektivně.

JavaScript nabízí několik typů cyklů, ze kterých si můžete vybrat. Podívejme se na každý z nich a pochopme, kdy je použít.

For cyklus

Cyklus for je jako nastavení časovače - přesně víte, kolikrát chcete, aby se něco stalo. Je velmi organizovaný a předvídatelný, což ho činí ideálním, když pracujete s poli nebo potřebujete něco počítat.

Struktura cyklu for:

Komponenta	Účel	Příklad
Inicializace	Nastaví počáteční bod	`let i = 0`
Podmínka	Kdy pokračovat	`i < 10`
Inkrementace	Jak aktualizovat	`i++`

// Counting from 0 to 9
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// More practical example: processing scores
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
  console.log(`Student ${i + 1}: ${testScores[i]}%`);
}

Krok za krokem, co se zde děje:

Inicializuje proměnnou počítadla i na 0 na začátku
Kontroluje podmínku i < 10 před každou iterací
Provádí blok kódu, když je podmínka pravdivá
Inkrementuje i o 1 po každé iteraci pomocí i++
Zastaví se, když se podmínka stane nepravdivou (když i dosáhne 10)

✅ Spusťte tento kód v konzoli prohlížeče. Co se stane, když provedete malé změny v počítadle, podmínce nebo výrazu iterace? Dokážete ho přimět, aby běžel pozpátku, vytvářející odpočet?

While cyklus

Cyklus while je jako říct "pokračuj v tom, dokud..." - možná nevíte přesně, kolikrát poběží, ale víte, kdy se zastaví. Je ideální pro věci jako požadování vstupu od uživatele, dokud vám nedá, co potřebujete, nebo prohledávání dat, dokud nenajdete, co hledáte.

Charakteristiky cyklu while:

Pokračuje v provádění, dokud je podmínka pravdivá
Vyžaduje ruční správu jakýchkoliv proměnných počítadla
Kontroluje podmínku před každou iterací
Riziko nekonečných cyklů, pokud se podmínka nikdy nestane nepravdivou

// Basic counting example
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // Don't forget to increment!
}

// More practical example: processing user input
let userInput = "";
let attempts = 0;
const maxAttempts = 3;

while (userInput !== "quit" && attempts < maxAttempts) {
  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
  attempts++;
}

if (attempts >= maxAttempts) {
  console.log("Maximum attempts reached!");
}

Porozumění těmto příkladům:

Spravuje proměnnou počítadla i ručně uvnitř těla cyklu
Inkrementuje počítadlo, aby se zabránilo nekonečným cyklům
Demonstruje praktické použití s uživatelským vstupem a omezením pokusů
Zahrnuje bezpečnostní mechanismy, aby se zabránilo nekonečnému provádění

Moderní alternativy cyklů

JavaScript nabízí moderní syntaxi cyklů, která může váš kód učinit čitelnějším a méně náchylným k chybám.

For...of cyklus (ES6+):

const colors = ["red", "green", "blue", "yellow"];

// Modern approach - cleaner and safer
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// Compare with traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

Klíčové výhody for...of:

Eliminuje správu indexů a potenciální chyby o jeden index
Poskytuje přímý přístup k prvkům pole
Zlepšuje čitelnost kódu a snižuje složitost syntaxe

Metoda forEach:

const prices = [9.99, 15.50, 22.75, 8.25];

// Using forEach for functional programming style
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach with arrow functions for simple operations
prices.forEach(price => console.log(`Price: $${price}`));

Co potřebujete vědět o forEach:

Provádí funkci pro každý prvek pole
Poskytuje hodnotu prvku i index jako parametry
Nelze ji předčasně zastavit (na rozdíl od tradičních cyklů)
Vrací undefined (nevytváří nové pole)

✅ Proč byste si vybrali cyklus for oproti cyklu while? 17 tisíc uživatelů mělo stejnou otázku na StackOverflow a některé názory by vás mohly zajímat.

Cykly a pole

Kombinace polí s cykly vytváří silné schopnosti zpracování dat. Toto spojení je základem mnoha programovacích úkolů, od zobrazování seznamů po výpočet statistik.

Tradiční zpracování pole:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Classic for loop approach
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// Modern for...of approach
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

Pojďme pochopit každý přístup:

Používá vlastnost délky pole k určení hranice cyklu
Přistupuje k prvkům podle indexu v tradičních cyklech for
Poskytuje přímý přístup k prvkům v cyklech for...of
Zpracovává každý prvek pole přesně jednou

Praktický příklad zpracování dat:

const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];

// Process all grades with a single loop
for (let i = 0; i < studentGrades.length; i++) {
  const grade = studentGrades[i];
  total += grade;
  
  if (grade > highestGrade) {
    highestGrade = grade;
  }
  
  if (grade < lowestGrade) {
    lowestGrade = grade;
  }
}

const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);

Jak tento kód funguje:

Inicializuje sledovací proměnné pro součet a extrémy
Zpracovává každou známku jedním efektivním cyklem
Akumuluje celkový součet pro výpočet průměru
Sleduje nejvyšší a nejnižší hodnoty během iterace
Vypočítává konečné statistiky po dokončení cyklu

✅ Experimentujte s iterací přes pole podle svého výběru v konzoli prohlížeče.

GitHub Copilot Agent Challenge 🚀

Použijte režim Agent k dokončení následující výzvy:

Popis: Vytvořte komplexní funkci pro zpracování dat, která kombinuje pole a cykly k analýze datové sady a generování smysluplných poznatků.

Zadání: Vytvořte funkci nazvanou analyzeGrades, která přijímá pole objektů s výsledky studentů (každý obsahuje vlastnosti name a score) a vrací objekt se statistikami, včetně nejvyššího skóre, nejnižšího skóre, průměrného skóre, počtu studentů, kteří prošli (score >= 70), a pole jmen studentů, kteří dosáhli nadprůměrného skóre. Ve svém řešení použijte alespoň dva různé typy cyklů.

Zjistěte více o režimu agent zde.

🚀 Výzva

JavaScript nabízí několik moderních metod pro práci s poli, které mohou nahradit tradiční cykly pro specifické úkoly. Prozkoumejte forEach, for-of, map, filter a reduce.

Vaše výzva: Přepracujte příklad se známkami studentů pomocí alespoň tří různých metod pro práci s poli. Všimněte si, jak se kód stává čistším a čitelnějším díky moderní syntaxi JavaScriptu.

Kvíz po lekci

Opakování a samostudium

Pole v JavaScriptu mají mnoho metod, které jsou velmi užitečné pro manipulaci s daty. Přečtěte si o těchto metodách a vyzkoušejte některé z nich (například push, pop, slice a splice) na poli podle svého výběru.

Úkol

Iterace přes pole

Prohlášení:
Tento dokument byl přeložen pomocí služby AI pro překlad Co-op Translator. I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.

17 KiB Raw Blame History