Методы добавления и удаления элементов массива

Технический фундамент мутаций массива

Методы этого урока изменяют исходный массив на месте (мутация).
Важно понимать не только новый массив, но и возвращаемое значение каждого метода.

const list = ['x'];
const len = list.push('y');
const last = list.pop();

console.log(len); // 2
console.log(last); // y
console.log(list); // ['x']

Ключевой момент: мутационные методы меняют состояние массива, поэтому их нужно использовать осознанно.

Добавление в конец и начало: `push` и `unshift`

push добавляет элемент в конец массива и возвращает новую длину.

const cart = ['book'];
cart.push('pen');

console.log(cart); // ['book', 'pen']

unshift добавляет в начало.

const queue = ['task-2', 'task-3'];
queue.unshift('task-1');

console.log(queue); // ['task-1', 'task-2', 'task-3']

Удаление с конца и начала: `pop` и `shift`

pop удаляет последний элемент и возвращает его.

const notifications = ['n1', 'n2', 'n3'];
const removed = notifications.pop();

console.log(removed); // n3
console.log(notifications); // ['n1', 'n2']

shift удаляет первый элемент.

const first = notifications.shift();
console.log(first); // n1
console.log(notifications); // ['n2']

Проверь себя: что вернет pop() у пустого массива?

Подсказка: undefined.

Точечное изменение: `splice`

splice(start, deleteCount, ...items) может удалить, вставить и заменить элементы.

const users = ['Ann', 'Max', 'Leo'];

users.splice(1, 1, 'Kate');
console.log(users); // ['Ann', 'Kate', 'Leo']

Здесь удалили 1 элемент с индекса 1 и вставили 'Kate'.

Смотри, что важно: splice возвращает массив удаленных элементов (даже если удалили один).

const users2 = ['Ann', 'Max', 'Leo'];
const removed = users2.splice(1, 1, 'Kate');

console.log(removed); // ['Max']
console.log(users2); // ['Ann', 'Kate', 'Leo']

Анти-провал: splice меняет исходный массив. Если нужна неизменяемость, используй slice/filter/map в следующих уроках.

Что будет, если менять вход

const arr = [1, 2, 3];
arr.splice(1, 0, 99);

console.log(arr); // [1, 99, 2, 3]

deleteCount = 0 ничего не удаляет, только вставляет.

Микро-сценарии

Добавление нового сообщения в чат.

messages.push(newMessage);

Удаление первой задачи из очереди обработки.

const currentTask = taskQueue.shift();

Замена элемента в списке избранного.

favorites.splice(index, 1, updatedItem);

Типичные ошибки

Путать slice и splice.
Не учитывать, что push/unshift возвращают длину, а не массив.
Вызывать shift часто на очень больших массивах без необходимости.
Удалять элемент по неправильному индексу.

Краткий итог

push/unshift добавляют элементы (конец/начало).
pop/shift удаляют элементы (конец/начало).
splice — универсальный метод для вставки, удаления и замены.
Эти методы меняют исходный массив.
Перед изменением массива всегда проверяй индекс и ожидаемый результат.

Методы добавления и удаления элементов массива