Добавление и удаление

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

Для такой работы у массива есть методы. Метод push добавляет элемент в конец массива, а pop удаляет последний элемент и возвращает его:

const cart = ["milk", "bread"];

console.log(cart.push("eggs")); // 3
console.log(cart.join(" ")); // milk bread eggs
console.log(cart.pop()); // eggs
console.log(cart.join(" ")); // milk bread

Давайте разберём по строкам:

1. В cart два пункта: "milk" и "bread".
2. cart.push("eggs") дописывает "eggs" в конец и печатает 3 — новую длину.
3. cart.join(" ") показывает, что пунктов стало три.
4. cart.pop() убирает последний пункт и печатает его: eggs.
5. Последняя строка печатает milk bread: массив снова такой, как в начале.

Аналогия со списком неполная. В бумажном списке вычеркнутый пункт остаётся виден, а pop убирает элемент из массива совсем и отдаёт его вам.

Конец массива

push

Вызов push возвращает не добавленный элемент, а новую длину массива. Поэтому вторая строка примера печатает 3. Об этом часто спрашивают на собеседовании: ответ «push возвращает элемент» неверен.

В один вызов push можно передать и несколько элементов: cart.push("tea", "jam") добавит оба по порядку.

pop

pop ничего не принимает. Он удаляет последний элемент и возвращает его, так что удалённое значение можно сразу сохранить в переменную или напечатать.

Сборка нового массива

Чаще всего push собирает новый массив в цикле. Массив начинают с [] и добавляют в него подходящие элементы по одному:

const nums = [3, -1, 4, -5];
const positive = [];

for (const n of nums) {
    if (n > 0) {
        positive.push(n);
    }
}

console.log(positive.join(" ")); // 3 4
console.log(nums.length); // 4

Цикл проходит по nums и кладёт в positive только положительные числа. Исходный массив nums не меняется: в нём по-прежнему четыре элемента.

Начало массива

С началом массива работают два похожих метода с теми же правилами:

• unshift добавляет элементы в начало и возвращает новую длину;
• shift удаляет первый элемент и возвращает его.

Индексы остальных элементов при этом сдвигаются на единицу. Правило для всех четырёх методов одно: добавляющие возвращают новую длину, а удаляющие — удалённый элемент.

const queue = ["Ann", "Bob"];

console.log(queue.unshift("Eve")); // 3
console.log(queue.join(" ")); // Eve Ann Bob
console.log(queue.shift()); // Eve
console.log(queue.shift(), queue.length); // Ann 1

Из пустого массива удалять нечего. Тогда pop и shift возвращают undefined, а массив остаётся пустым.

Изменение на месте

Все четыре метода изменяют массив на месте: новый массив не создаётся, меняется тот, у которого метод вызвали. Поэтому их можно вызывать у массива в константе: const не защищает содержимое массива.

Со строками так не бывает. Строка неизменяемая, и её методы, например toUpperCase, возвращают новую строку. Методы массива push, pop, shift и unshift, наоборот, меняют сам массив.

Присвоить константе новый массив по-прежнему нельзя. Строка cart = [] остановит программу с TypeError: Assignment to constant variable., как любое присваивание константе.

Частая ошибка

Результат push положили обратно в переменную массива:

let names = ["Ann"];
names = names.push("Bob"); // ✗
names.push("Eve");

TypeError: names.push is not a function

Ошибка приходит на третьей строке, а причина — во второй. push вернул длину 2, и теперь в names лежит число, а у числа нет метода push.

Массив уже изменился на месте, поэтому результат push присваивать не нужно: пишите names.push("Bob");.

Главное

• push и unshift добавляют элементы в конец и в начало и возвращают новую длину.
• pop и shift удаляют последний и первый элемент и возвращают его, а для пустого массива — undefined.
• Все четыре метода меняют массив на месте, даже если он лежит в константе.
• Новый массив собирают так: начинают с [] и вызывают push в цикле.