slice и splice

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

С массивом бывает так же. Часто нужна только его часть: первые три результата или всё, кроме первого элемента. Метод slice копирует такую часть в новый массив, а исходный оставляет прежним:

const nums = [10, 20, 30, 40, 50];

console.log(nums.slice(1, 3)); // [ 20, 30 ]
console.log(nums.slice(2)); // [ 30, 40, 50 ]
console.log(nums.length); // 5

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

1. nums.slice(1, 3) копирует элементы с индексами 1 и 2 и печатает [ 20, 30 ].
2. nums.slice(2) копирует всё от индекса 2 до конца.
3. nums.length по-прежнему 5: копии не тронули исходный массив.

slice копирует

slice(start, end) берёт элементы с индекса start до индекса end, не включая его. Поэтому nums.slice(1, 3) возвращает два элемента: с индексами 1 и 2. Без второго аргумента копия идёт до конца массива. Вызов slice() без аргументов копирует массив целиком.

Отрицательный индекс отсчитывается от конца: nums.slice(-2) возвращает два последних элемента. Те же правила действуют для slice у строк.

splice вырезает

Похожий по названию splice(start, count) работает иначе. Он вырезает count элементов, начиная с индекса start, из самого массива, то есть изменяет его на месте. Возвращает splice новый массив из вырезанных элементов:

const removed = nums.splice(1, 2);
console.log(removed); // [ 20, 30 ]
console.log(nums); // [ 10, 40, 50 ]

Здесь splice(1, 2) вырвал два элемента, начиная с индекса 1. Они вернулись в removed, а в nums осталось три элемента.

Тут аналогия с тетрадью перестаёт работать. После вырванных листов номера страниц в тетради не меняются, а у оставшихся элементов массива индексы сдвигаются: 40 теперь лежит под индексом 1.

После count можно перечислить значения, и splice вставит их на место вырезанных. При count, равном 0, ничего не вырезается, и splice только вставляет:

console.log(nums.splice(1, 0, 20, 30)); // []
console.log(nums); // [ 10, 20, 30, 40, 50 ]

Вызов вернул пустой массив, потому что вырезать было нечего. А 20 и 30 встали перед элементом с индексом 1, и массив снова стал прежним.

Второй аргумент у двух методов разный:

• у slice это индекс конца;
• у splice — сколько элементов вырезать.

Разницу между slice и splice часто спрашивают на собеседовании. Короткий ответ: slice копирует и не меняет массив, а splice вырезает из самого массива и возвращает вырезанное.

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

Часть массива взяли через splice с аргументами, как у slice:

const nums = [10, 20, 30, 40, 50];
const part = nums.splice(1, 3); // ✗

Ошибки нет, но part равен [ 20, 30, 40 ], а не [ 20, 30 ]: число 3 для splice — количество элементов. А в nums остались только 10 и 50.

Чтобы получить часть и не трогать массив, пишите nums.slice(1, 3).

Главное

• slice(start, end) копирует элементы от start до end, не включая end, и не меняет массив.
• splice(start, count) вырезает count элементов из самого массива и возвращает их новым массивом.
• splice(start, 0, x, y) вставляет значения, ничего не вырезая.
• Второй аргумент у slice — индекс конца, а у splice — сколько элементов вырезать.