Массивы: индексация, методы push, pop, shift, unshift, slice, splice и др.
🔍 Что такое массив и как с ним работать?
Массив — это упорядоченная коллекция элементов, доступ к которым осуществляется по индексу. В JavaScript массивы динамические: можно добавлять и удалять элементы на лету, изменять их размер.
const fruits = ['Яблоко', 'Банан', 'Апельсин'];
console.log(fruits[0]); // 'Яблоко' (индексация с нуля!)
📍 Индексация элементов
Каждый элемент массива имеет числовой индекс, начинающийся с 0. Важные нюансы:
- Отрицательные индексы не работают (arr[-1] вернёт undefined).
- Обращение к несуществующему индексу тоже даст undefined.
const colors = ['Красный', 'Зелёный', 'Синий'];
console.log(colors[1]); // 'Зелёный'
console.log(colors[5]); // undefined
🛠 Основные методы для работы с массивами
🔹 push() и pop() — работа с концом массива
push()добавляет элемент в конец.pop()удаляет последний элемент и возвращает его.
const stack = [1, 2, 3];
stack.push(4); // [1, 2, 3, 4]
const lastItem = stack.pop(); // 4, массив: [1, 2, 3]
💡 Совет:
pushиpopработают быстро, потому что не требуют переиндексации всего массива.
🔹 shift() и unshift() — работа с началом массива
shift()удаляет первый элемент и возвращает его.unshift()добавляет элемент в начало.
const queue = ['A', 'B', 'C'];
queue.unshift('X'); // ['X', 'A', 'B', 'C']
const firstItem = queue.shift(); // 'X', массив: ['A', 'B', 'C']
⚠️ Важно!
shiftиunshiftмедленнее, так как двигают все остальные элементы.
🔹 slice() — копирование части массива
Создаёт новый массив, копируя выбранные элементы:
const nums = [10, 20, 30, 40, 50];
const subArray = nums.slice(1, 4); // [20, 30, 40] (индекс 4 не включается!)
🔥 Фишка: Если не передать аргументы — скопируется весь массив (
arr.slice()).
🔹 splice() — удаление и вставка элементов
Мощный метод для изменения массива на месте:
const letters = ['a', 'b', 'c', 'd'];
letters.splice(1, 2, 'x', 'y'); // Удаляем 2 элемента с индекса 1, вставляем 'x' и 'y'
console.log(letters); // ['a', 'x', 'y', 'd']
Параметры:
1. Стартовый индекс
2. Количество удаляемых элементов
3. Элементы для вставки (опционально)
📊 Сравнение методов
| Метод | Изменяет исходный массив? | Возвращает значение | Скорость |
|---|---|---|---|
push() |
✅ Да | Новую длину массива | ⚡ Быстро |
pop() |
✅ Да | Удалённый элемент | ⚡ Быстро |
shift() |
✅ Да | Удалённый элемент | 🐢 Медленно |
unshift() |
✅ Да | Новую длину массива | 🐢 Медленно |
slice() |
❌ Нет | Новый массив | ⚡ Быстро |
splice() |
✅ Да | Массив удалённых элементов | 🚀 Средне |
💡 Практический пример: управление списком задач
let tasks = ['Позвонить маме', 'Купить хлеб'];
// Добавляем задачу в конец
tasks.push('Заправить машину');
// Удаляем первую задачу
const urgentTask = tasks.shift();
// Вставляем "важную задачу" в начало
tasks.unshift('Срочно: отчёт!');
console.log(tasks); // ['Срочно: отчёт!', 'Купить хлеб', 'Заправить машину']
🚀 Закрепляем знания
-
Почему
push/popбыстрееshift/unshift?
Потому что они не перестраивают индексы всех элементов. -
Как создать копию массива?
Использоватьslice()или современный синтаксис[...arr]. -
Чем опасен
splice?
Он изменяет исходный массив, что может привести к неожиданным последствиям, если массив используется в нескольких местах.
Попробуйте сами:
const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1);
console.log(arr); // Что выведет?