Методы массивов: push, pop, shift, unshift

push, pop, shift, unshift — мутирующие методы для добавления и удаления элементов с конца (push/pop) или начала (unshift/shift) массива.

Зачем нужно

Это фундаментальные операции для работы с массивом как со стеком (push/pop) или очередью (push/shift). Понимание этих методов и их возвращаемых значений необходимо для работы с коллекциями данных в JavaScript.

Где используется

  • Стек (LIFO): история навигации, undo/redo (push/pop)
  • Очередь (FIFO): очередь задач, буфер сообщений (push/shift)
  • Динамическое добавление элементов в список

Сводная таблица

Метод Где добавляет/удаляет Что возвращает Мутирует
push(...items) Конец — добавляет Новая длина Да
pop Конец — удаляет Удалённый элемент Да
unshift(...items) Начало — добавляет Новая длина Да
shift Начало — удаляет Удалённый элемент Да

Примеры

const arr = [1, 2, 3];

// push — добавить в конец
arr.push(4);       // arr = [1, 2, 3, 4]; вернул 4 (длина)
arr.push(5, 6);    // arr = [1, 2, 3, 4, 5, 6]; вернул 6

// pop — удалить из конца
const last = arr.pop(); // last = 6; arr = [1, 2, 3, 4, 5]

// unshift — добавить в начало
arr.unshift(0);    // arr = [0, 1, 2, 3, 4, 5]; вернул 6 (длина)

// shift — удалить из начала
const first = arr.shift(); // first = 0; arr = [1, 2, 3, 4, 5]

Стек (LIFO)

// Last In, First Out — браузерная история
const history = ;

function navigate(url) {
  history.push(url);
  console.log('Перешли на:', url);
}

function goBack() {
  history.pop(); // убрать текущую
  const prev = history[history.length - 1];
  console.log('Вернулись на:', prev || 'стартовую страницу');
}

navigate('/home');
navigate('/about');
navigate('/contact');
goBack; // Вернулись на: /about
goBack; // Вернулись на: /home

Очередь (FIFO)

// First In, First Out — очередь задач
const queue = ;

function enqueue(task) {
  queue.push(task); // в конец
}

function dequeue() {
  return queue.shift(); // с начала
}

enqueue('задача 1');
enqueue('задача 2');
enqueue('задача 3');

console.log(dequeue); // 'задача 1'
console.log(dequeue); // 'задача 2'

Иммутабельные аналоги

const arr = [1, 2, 3];

// Вместо push — создать новый массив
const withNew = [...arr, 4];

// Вместо pop — slice
const withoutLast = arr.slice(0, -1);

// Вместо unshift — spread
const withFirst = [0, ...arr];

// Вместо shift — slice
const withoutFirst = arr.slice(1);

// Оригинал не изменён
console.log(arr); // [1, 2, 3]

Частые ошибки

  • Не сохранять результат pop/shift — если удалённое значение нужно использовать, сохраните его в переменную до следующей операции.
  • push vs concat — push мутирует массив и возвращает длину; concat возвращает новый массив, подходит для иммутабельного стиля.
  • unshift медленнее push — unshift перестраивает индексы всех элементов; для частых вставок в начало большого массива рассмотрите другую структуру данных.

Связанные темы

Ресурсы