Робота з масивами

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

У цій лекції ти потренуєшся читати окремі елементи, додавати нові елементи та видаляти елементи, які більше не потрібні.

Швидке повторення: читання за індексом

Елементи в масиві нумеруються, починаючи з 0. Це число називається індексом елемента.

Можна прочитати конкретний елемент, поставивши його номер індексу в квадратні дужки.

const favoriteFoods = ["pizza", "tacos", "sushi"];

console.log(favoriteFoods[0]);
console.log(favoriteFoods[1]);

У цьому прикладі favoriteFoods[0] читає перший елемент, а favoriteFoods[1] читає другий елемент.

Додавання елемента за допомогою push()

Можна використати push(), щоб додати новий елемент у кінець масиву.

push() змінює початковий масив, оновлюючи його вміст.

const inventory = ["sword", "shield", "health potion"];

inventory.push("magic ring");

console.log(inventory);

Видалення останнього елемента за допомогою pop()

Метод pop() видаляє останній елемент з масиву.

Він також повертає елемент, який було видалено.

Як і push(), pop() змінює початковий масив.

const todoList = ["buy groceries", "wash dishes", "pay bills"];

todoList.pop();

console.log(todoList);

Тепер подивімося на початок масиву.

Додавання елемента за допомогою unshift()

Можна використати unshift(), щоб додати новий елемент на початок масиву.

const queue = ["second", "third"];

queue.unshift("first");

console.log(queue);

Видалення першого елемента за допомогою shift()

Можна використати shift(), щоб видалити перший елемент з масиву.

Він також повертає елемент, який було видалено.

const tasks = ["wake up", "eat breakfast", "study JavaScript"];

tasks.shift();

console.log(tasks);

Пояснення коду

Ось базовий шаблон:

• array[index] читає один елемент за позицією.
• push() додає елемент у кінець.
• pop() видаляє останній елемент.
• unshift() додає елемент на початок.
• shift() видаляє перший елемент.
• Усі чотири методи змінюють початковий масив.

Коли ти натиснеш Запустити, оновлені масиви з'являться в секції виводу.

Міні-завдання

Подивися на блок коду tasks вище.

Перед тим як натиснути Запустити, як думаєш, що станеться, якщо додати ще один рядок tasks.shift(); під уже наявним?

Спробуй це в редакторі коду вище і перевір свою здогадку.

Короткий тест

Запитання 1: Який метод додає елемент у кінець масиву?

• A) pop()
• B) push()

Запитання 2: Який метод видаляє перший елемент з масиву?

• A) shift()
• B) unshift()

Запитання 3: Якщо в тебе є масив shoppingList, як отримати перший елемент?

• A) shoppingList[1]
• B) shoppingList[0]

Відповіді: 1. B, 2. A, 3. B

Малий виклик

Тепер твоя черга практикуватися.

1. Створи масив backpack, який містить "water" і "map".
2. Використай push(), щоб додати "flashlight" у кінець.
3. Використай unshift(), щоб додати "snack" на початок.
4. Використай pop(), щоб видалити останній елемент.
5. Використай shift(), щоб видалити перший елемент.
6. Використай console.log(), щоб вивести масив backpack.

// напиши свій код нижче

console.log()

Підсумок

• Читай елементи за позицією за допомогою квадратних дужок, наприклад items[0].
• push() додає елемент у кінець масиву.
• pop() видаляє останній елемент з масиву.
• unshift() додає елемент на початок масиву.
• shift() видаляє перший елемент з масиву.
• push(), pop(), unshift() і shift() змінюють початковий масив.