24 KiB

Raw Blame History Unescape Escape

Основи на JavaScript: Масиви и Цикли

Скетч от Tomomi Imura

Предварителен тест

Чудили ли сте се как уебсайтовете следят артикулите в пазарската количка или показват списъка с приятели? Тук идват масивите и циклите. Масивите са като дигитални контейнери, които съхраняват множество парчета информация, докато циклите ви позволяват да работите с тези данни ефективно, без да пишете повтарящ се код.

Заедно тези две концепции формират основата за обработка на информация във вашите програми. Ще се научите да преминавате от ръчно изписване на всяка стъпка към създаване на интелигентен, ефективен код, който може да обработва стотици или дори хиляди елементи бързо.

До края на този урок ще разберете как да изпълнявате сложни задачи с данни само с няколко реда код. Нека разгледаме тези основни програмни концепции.

🎥 Кликнете върху изображенията по-горе за видеа относно масиви и цикли.

Можете да вземете този урок на Microsoft Learn!

Масиви

Представете си масивите като дигитален шкаф за документи - вместо да съхранявате един документ в едно чекмедже, можете да организирате множество свързани елементи в един структуриран контейнер. В програмния контекст, масивите ви позволяват да съхранявате множество парчета информация в един организиран пакет.

Независимо дали изграждате фото галерия, управлявате списък със задачи или следите високите резултати в игра, масивите предоставят основата за организация на данни. Нека видим как работят.

✅ Масивите са навсякъде около нас! Можете ли да измислите реален пример за масив, като например масив от слънчеви панели?

Създаване на масиви

Създаването на масив е супер лесно - просто използвайте квадратни скоби!

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

Какво се случва тук? Току-що създадохте празен контейнер, използвайки тези квадратни скоби []. Представете си го като празен рафт в библиотека - готов е да съхранява каквито книги искате да организирате там.

Можете също така да запълните масива си с начални стойности още от самото начало:

// 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];

Интересни неща за забелязване:

Можете да съхранявате текст, числа или дори стойности истина/лъжа в един и същ масив
Просто разделете всеки елемент с запетая - лесно!
Масивите са идеални за съхраняване на свързана информация на едно място

Индексиране на масиви

Ето нещо, което може да ви се стори необичайно в началото: масивите номерират своите елементи, започвайки от 0, а не от 1. Това номериране, започващо от нула, има своите корени в начина, по който работи компютърната памет - това е програмна конвенция още от ранните дни на езици като C. Всяко място в масива получава свой собствен адресен номер, наречен индекс.

Индекс	Стойност	Описание
0	"Шоколад"	Първи елемент
1	"Ягода"	Втори елемент
2	"Ванилия"	Трети елемент
3	"Шамфъстък"	Четвърти елемент
4	"Роки Роуд"	Пети елемент

✅ Изненадва ли ви, че масивите започват от индекс нула? В някои програмни езици индексите започват от 1. Има интересна история за това, която можете да прочетете в Wikipedia.

Достъп до елементи на масив:

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

Какво се случва тук:

Използва квадратна нотация с номер на индекс за достъп до елементи
Връща стойността, съхранена на конкретната позиция в масива
Започва броенето от 0, което прави първия елемент с индекс 0

Модифициране на елементи в масив:

// 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"

В горния пример:

Модифицирахме елемента на индекс 4 от "Роки Роуд" на "Бътър Пекан"
Добавихме нов елемент "Куки Доу" на индекс 5
Автоматично разширихме дължината на масива, когато добавихме елемент извън текущите граници

Дължина на масив и основни методи

Масивите разполагат с вградени свойства и методи, които правят работата с данни много по-лесна.

Намиране на дължината на масив:

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

Основни точки за запомняне:

Връща общия брой елементи в масива
Актуализира се автоматично, когато се добавят или премахват елементи
Осигурява динамичен брой, полезен за цикли и проверки

Основни методи за масиви:

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

Разбиране на тези методи:

Добавя елементи с push() (в края) и unshift() (в началото)
Премахва елементи с pop() (в края) и shift() (в началото)
Намира елементи с indexOf() и проверява съществуването с includes()
Връща полезни стойности като премахнати елементи или индекси на позиции

✅ Опитайте сами! Използвайте конзолата на браузъра си, за да създадете и манипулирате масив по ваш избор.

Цикли

Представете си известното наказание от романите на Чарлз Дикенс, където учениците трябваше да пишат едни и същи изречения многократно на дъска. Представете си, че можете просто да кажете на някого "напиши това изречение 100 пъти" и то да бъде направено автоматично. Това е точно, което правят циклите за вашия код.

Циклите са като неуморен помощник, който може да повтаря задачи без грешка. Независимо дали трябва да проверите всеки артикул в пазарска количка или да покажете всички снимки в албум, циклите обработват повторенията ефективно.

JavaScript предлага няколко вида цикли, от които да избирате. Нека разгледаме всеки един и да разберем кога да го използваме.

Цикъл For

Цикълът for е като настройване на таймер - знаете точно колко пъти искате нещо да се случи. Той е супер организиран и предсказуем, което го прави идеален, когато работите с масиви или трябва да броите неща.

Структура на цикъл For:

Компонент	Цел	Пример
Инициализация	Задава начална точка	`let i = 0`
Условие	Кога да продължи	`i < 10`
Инкремент	Как да се актуализира	`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]}%`);
}

Стъпка по стъпка, ето какво се случва:

Инициализира променливата брояч i на 0 в началото
Проверява условието i < 10 преди всяка итерация
Изпълнява блока код, когато условието е вярно
Увеличава i с 1 след всяка итерация с i++
Спира, когато условието стане невярно (когато i достигне 10)

✅ Стартирайте този код в конзолата на браузъра. Какво се случва, когато направите малки промени в брояча, условието или израза за итерация? Можете ли да го накарате да работи обратно, създавайки обратно броене?

Цикъл While

Цикълът while е като да кажете "продължавай да правиш това, докато..." - може да не знаете точно колко пъти ще се изпълни, но знаете кога да спрете. Той е идеален за неща като искане на вход от потребителя, докато не получите това, което ви трябва, или търсене в данни, докато не намерите това, което търсите.

Характеристики на цикъл While:

Продължава изпълнението, докато условието е вярно
Изисква ръчно управление на всякакви променливи броячи
Проверява условието преди всяка итерация
Рискува безкрайни цикли, ако условието никога не стане невярно

// 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!");
}

Разбиране на тези примери:

Управлява променливата брояч i ръчно вътре в тялото на цикъла
Увеличава брояча, за да предотврати безкрайни цикли
Демонстрира практически случай на употреба с вход от потребителя и ограничаване на опитите
Включва механизми за безопасност за предотвратяване на безкрайно изпълнение

Съвременни алтернативи на цикли

JavaScript предлага съвременен синтаксис за цикли, който може да направи кода ви по-четим и по-малко податлив на грешки.

Цикъл For...of (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]}`);
}

Основни предимства на for...of:

Елиминира управлението на индекси и потенциални грешки
Осигурява директен достъп до елементите на масива
Подобрява четимостта на кода и намалява сложността на синтаксиса

Метод 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}`));

Какво трябва да знаете за forEach:

Изпълнява функция за всеки елемент от масива
Осигурява както стойността на елемента, така и индекса като параметри
Не може да бъде спрян преждевременно (за разлика от традиционните цикли)
Връща undefined (не създава нов масив)

✅ Защо бихте избрали цикъл for вместо цикъл while? 17 хиляди зрители имаха същия въпрос в StackOverflow, и някои от мненията може да ви бъдат интересни.

Цикли и масиви

Комбинирането на масиви с цикли създава мощни възможности за обработка на данни. Тази комбинация е основна за много програмни задачи, от показване на списъци до изчисляване на статистики.

Традиционна обработка на масиви:

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}`);
}

Нека разберем всеки подход:

Използва свойството за дължина на масива, за да определи границата на цикъла
Достъпва елементи чрез индекс в традиционните цикли for
Осигурява директен достъп до елементи в цикли for...of
Обработва всеки елемент от масива точно веднъж

Практически пример за обработка на данни:

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}`);

Ето как работи този код:

Инициализира променливи за проследяване на сума и екстремни стойности
Обработва всяка оценка с един ефективен цикъл
Натрупва общата сума за изчисление на средната стойност
Проследява най-високите и най-ниските стойности по време на итерацията
Изчислява крайните статистики след завършване на цикъла

✅ Експериментирайте с цикли върху масив, който сами сте създали, в конзолата на браузъра.

Предизвикателство с GitHub Copilot Agent 🚀

Използвайте режим Agent, за да завършите следното предизвикателство:

Описание: Създайте цялостна функция за обработка на данни, която комбинира масиви и цикли, за да анализира набор от данни и да генерира значими прозрения.

Задача: Създайте функция, наречена analyzeGrades, която приема масив от обекти с оценки на ученици (всеки съдържащ свойства name и score) и връща обект със статистики, включително най-висока оценка, най-ниска оценка, средна оценка, брой ученици, които са издържали (score >= 70), и масив с имената на учениците, които са получили над средната оценка. Използвайте поне два различни типа цикли в решението си.

Научете повече за режим Agent тук.

🚀 Предизвикателство

JavaScript предлага няколко съвременни методи за масиви, които могат да заменят традиционните цикли за специфични задачи. Разгледайте forEach, for-of, map, filter, и reduce.

Вашето предизвикателство: Преработете примера с оценките на учениците, използвайки поне три различни метода за масиви. Забележете колко по-чист и четим става кодът с модерния синтаксис на JavaScript.

Тест след лекцията

Преглед и самостоятелно обучение

Масивите в JavaScript имат много методи, които са изключително полезни за манипулация на данни. Прочетете за тези методи и опитайте някои от тях (като push, pop, slice и splice) върху масив, който сами сте създали.

Задание

Цикъл на масив

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

24 KiB Raw Blame History Unescape Escape