Массивы: индексация, методы 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); // ['Срочно: отчёт!', 'Купить хлеб', 'Заправить машину']

🚀 Закрепляем знания

  1. Почему push/pop быстрее shift/unshift?
    Потому что они не перестраивают индексы всех элементов.

  2. Как создать копию массива?
    Использовать slice() или современный синтаксис [...arr].

  3. Чем опасен splice?
    Он изменяет исходный массив, что может привести к неожиданным последствиям, если массив используется в нескольких местах.

Попробуйте сами:

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1);
console.log(arr); // Что выведет?
Скрыть рекламу навсегда

🧠 Учёба без воды и зубрёжки

Закрытый Boosty с наработками опытного преподавателя.

Объясняю сложное так, чтобы щелкнуло.

🚀 Забрать доступ к Boosty