10 KiB

Raw Permalink Blame History Unescape Escape

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

Скетчноут від Tomomi Imura

Тест перед лекцією

Цей урок охоплює основи JavaScript, мови, яка забезпечує інтерактивність у вебі. У цьому уроці ви дізнаєтеся про масиви та цикли, які використовуються для обробки даних.

🎥 Натисніть на зображення вище, щоб переглянути відео про масиви та цикли.

Ви можете пройти цей урок на Microsoft Learn!

Масиви

Робота з даними — це поширене завдання для будь-якої мови програмування, і це завдання стає набагато простішим, коли дані організовані у структурованому форматі, наприклад, у масивах. У масивах дані зберігаються у структурі, схожій на список. Однією з головних переваг масивів є те, що ви можете зберігати різні типи даних в одному масиві.

✅ Масиви оточують нас всюди! Чи можете ви придумати реальний приклад масиву, наприклад, масив сонячних панелей?

Синтаксис масиву — це пара квадратних дужок.

let myArray = [];

Це порожній масив, але масиви можуть бути оголошені вже заповненими даними. Значення в масиві розділяються комами.

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

Значення масиву отримують унікальне значення, яке називається індексом, ціле число, яке присвоюється залежно від його відстані від початку масиву. У наведеному вище прикладі рядкове значення "Chocolate" має індекс 0, а індекс "Rocky Road" дорівнює 4. Використовуйте індекс із квадратними дужками, щоб отримати, змінити або вставити значення масиву.

✅ Вас дивує, що індекси масивів починаються з нуля? У деяких мовах програмування індекси починаються з 1. Це цікава історія, яку ви можете прочитати на Wikipedia.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

Ви можете використовувати індекс, щоб змінити значення, ось так:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

Або вставити нове значення за певним індексом, ось так:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ Більш поширений спосіб додавання значень до масиву — використання операторів масиву, таких як array.push()

Щоб дізнатися, скільки елементів у масиві, використовуйте властивість length.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ Спробуйте самі! Використовуйте консоль вашого браузера, щоб створити та змінити масив власного створення.

Цикли

Цикли дозволяють виконувати повторювані або ітеративні завдання, що може значно заощадити час і код. Кожна ітерація може відрізнятися змінними, значеннями та умовами. У JavaScript є різні типи циклів, які мають невеликі відмінності, але по суті виконують те саме: проходять через дані.

Цикл For

Цикл for вимагає 3 частини для ітерації:

counter Змінна, яка зазвичай ініціалізується числом і рахує кількість ітерацій
condition Вираз, який використовує оператори порівняння, щоб зупинити цикл, коли він стає false
iteration-expression Виконується наприкінці кожної ітерації, зазвичай використовується для зміни значення лічильника

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ Запустіть цей код у консолі браузера. Що станеться, якщо ви внесете невеликі зміни до лічильника, умови або виразу ітерації? Чи можете ви змусити його працювати у зворотному напрямку, створюючи зворотний відлік?

Цикл While

На відміну від синтаксису циклу for, цикл while вимагає лише умови, яка зупинить цикл, коли умова стане false. Умови в циклах зазвичай залежать від інших значень, таких як лічильники, і повинні керуватися під час виконання циклу. Початкові значення для лічильників повинні бути створені поза циклом, а будь-які вирази для виконання умови, включаючи зміну лічильника, повинні підтримуватися всередині циклу.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ Чому ви обрали б цикл for замість while? 17 тисяч користувачів мали те саме питання на StackOverflow, і деякі думки можуть бути цікавими для вас.

Цикли та Масиви

Масиви часто використовуються з циклами, оскільки більшість умов вимагають довжини масиву для зупинки циклу, а індекс також може бути значенням лічильника.

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

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ Експериментуйте з проходженням через масив власного створення у консолі вашого браузера.

🚀 Виклик

Існують інші способи проходження через масиви, окрім циклів for і while. Це forEach, for-of і map. Перепишіть ваш цикл масиву, використовуючи один із цих методів.

Тест після лекції

Огляд та Самостійне Вивчення

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

Завдання

Цикл через Масив

Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматизовані переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.

10 KiB Raw Permalink Blame History Unescape Escape