Пошук уроків, статей та іншого контенту
Навчитеся додавати та видаляти елементи на початку й у кінці масиву методами push, pop, shift і unshift.
Масив у JavaScript зберігає елементи в певному порядку. Іноді потрібно додати новий елемент або видалити вже наявний.
Для роботи з початком і кінцем масиву використовують чотири методи:
push() — додає елемент у кінець;
pop() — видаляє елемент із кінця;
unshift() — додає елемент на початок;
shift() — видаляє елемент із початку.
Ці методи змінюють початковий масив.
push()Метод push() додає один або кілька елементів у кінець масиву.
const fruits = ["яблуко", "банан"];
fruits.push("апельсин");
console.log(fruits);
// ["яблуко", "банан", "апельсин"]До push() можна передати кілька елементів:
const numbers = [1, 2];
numbers.push(3, 4, 5);
console.log(numbers);
// [1, 2, 3, 4, 5]Метод push() повертає нову довжину масиву:
const colors = ["червоний", "синій"];
const newLength = colors.push("зелений");
console.log(newLength); // 3
console.log(colors); // ["червоний", "синій", "зелений"]pop()Метод pop() видаляє останній елемент масиву.
const fruits = ["яблуко", "банан", "апельсин"];
const removedFruit = fruits.pop();
console.log(removedFruit); // "апельсин"
console.log(fruits); // ["яблуко", "банан"]Метод pop() повертає елемент, який було видалено.
Якщо масив порожній, метод повертає undefined:
const items = [];
const removedItem = items.pop();
console.log(removedItem); // undefinedunshift()Метод unshift() додає один або кілька елементів на початок масиву.
const fruits = ["банан", "апельсин"];
fruits.unshift("яблуко");
console.log(fruits);
// ["яблуко", "банан", "апельсин"]Можна додати кілька елементів:
const numbers = [3, 4];
numbers.unshift(1, 2);
console.log(numbers);
// [1, 2, 3, 4]Метод unshift() повертає нову довжину масиву:
const tasks = ["прочитати книгу"];
const newLength = tasks.unshift("прокинутися");
console.log(newLength); // 2
console.log(tasks); // ["прокинутися", "прочитати книгу"]shift()Метод shift() видаляє перший елемент масиву.
const fruits = ["яблуко", "банан", "апельсин"];
const removedFruit = fruits.shift();
console.log(removedFruit); // "яблуко"
console.log(fruits); // ["банан", "апельсин"]Якщо масив порожній, shift() повертає undefined:
const messages = [];
const firstMessage = messages.shift();
console.log(firstMessage); // undefined| Дія | Метод | Що повертає | |---|---|---| | Додати в кінець | push() | Нову довжину масиву | | Видалити з кінця | pop() | Видалений елемент | | Додати на початок | unshift() | Нову довжину масиву | | Видалити з початку | shift() | Видалений елемент |
Розглянемо список покупок:
const shoppingList = ["хліб", "молоко"];
// Додаємо товар у кінець списку
shoppingList.push("яблука");
// Додаємо терміновий товар на початок списку
shoppingList.unshift("вода");
console.log(shoppingList);
// ["вода", "хліб", "молоко", "яблука"]
// Видаляємо перший товар
const firstProduct = shoppingList.shift();
// Видаляємо останній товар
const lastProduct = shoppingList.pop();
console.log(firstProduct); // "вода"
console.log(lastProduct); // "яблука"
console.log(shoppingList); // ["хліб", "молоко"]Методи pop() і shift() безпечно викликати для порожнього масиву. Вони не спричиняють помилку, але повертають undefined.
const queue = [];
const person = queue.shift();
if (person === undefined) {
console.log("Черга порожня");
}Перед видаленням елемента також можна перевірити довжину масиву:
const queue = [];
if (queue.length > 0) {
queue.shift();
} else {
console.log("Немає елементів для видалення");
}push(), pop(), shift() і unshift() змінюють початковий масив. Це називається мутацією.
const numbers = [1, 2, 3];
const anotherNumbers = numbers;
numbers.push(4);
console.log(anotherNumbers);
// [1, 2, 3, 4]Змінна anotherNumbers посилається на той самий масив, тому зміни видно через обидві змінні.
push() поверне масивpush() повертає нову довжину масиву, а не сам масив:
const numbers = [1, 2];
const result = numbers.push(3);
console.log(result); // 3
console.log(numbers); // [1, 2, 3]Якщо потрібно отримати масив, використовуйте саму змінну numbers.
pop() поверне масивpop() повертає видалений елемент:
const names = ["Олена", "Андрій"];
const result = names.pop();
console.log(result); // "Андрій"
console.log(names); // ["Олена"]push() і pop() працюють із кінцем масиву;
unshift() і shift() працюють із початком масиву.
Запам'ятати можна так:
push — додати в кінець
pop — видалити з кінця
unshift — додати на початок
shift — видалити з початкуНазви методів чутливі до регістру:
const items = [];
items.push("книга"); // правильно
// items.Push("книга"); // помилкаУ JavaScript потрібно писати саме push, pop, shift і unshift з маленької літери.
push() додає елементи в кінець масиву.
pop() видаляє останній елемент і повертає його.
unshift() додає елементи на початок масиву.
shift() видаляє перший елемент і повертає його.
push() і unshift() повертають нову довжину масиву.
pop() і shift() повертають видалений елемент.
Усі чотири методи змінюють початковий масив.
Для порожнього масиву pop() і shift() повертають undefined.