Разница методов splice и slice в JavaScript: когда использовать

Быстрый ответ

Метод .splice() выполняет модификацию исходного массива, позволяя удалять, добавлять или заменять элементы. Вот пример:

let nums = [1, 2, 3, 4];
nums.splice(2, 1, 'a'); // На позиции с индексом 2 произошло удаление элемента 3, а на его место была вставлена 'a'
// теперь nums выглядит так: [1, 2, 'a', 4]

С другой стороны, .slice() создаёт новый массив, содержащий определённый диапазон элементов исходного массива, не производя над ним изменений. Приведём пример:

let nums = [1, 2, 3, 4];
let newNums = nums.slice(1, 3); // Осуществили выборку элементов с индекса 1 до индекса 3 (последний не входит в диапазон)
// Таким образом, новый массив newNums включает в себя элементы [2, 3], при этом nums сохраняет свою первоначальную форму

Механизм работы

Описание параметров

Метод .splice() принимает параметры start, deleteCount (необязательный) и элементы, которые необходимо добавить (также необязательный параметр). Для .slice() параметры start и end (необязательный) определяют начальную и конечную точки выборки элементов. При этом следует помнить, что end в этом контексте не включается.

• Применяйте splice для удаления элементов: array.splice(start, deleteCount)
• Используйте splice для добавления новых элементов, не производя удаления существующих: array.splice(start, 0, newItem1, newItem2, ...)
• Для создания копии участка массива подойдёт slice: array.slice(start, end)

Обратите внимание: параметр deleteCount в методе splice означает количество элементов для удаления, а не конечный индекс.

Подробнее об этом расскажет наш спикер на видео

Практические советы

Выбор метода определяется поставленной задачей:

• Хотите создать копию массива, оставив исходный массив нетронутым? Отлично подойдёт .slice().
• Необходимо удалить ненужные элементы или вставить новые? Тогда выбор за .splice().

Профессиональным подходом будет проверка исходного массива после применения этих методов для предотвращения возможных сюрпризов.

Как избежать типичных ошибок

1. Не путайте deleteCount у splice c end index у slice.
2. Помните, что splice производит как добавление элементов, так и их удаление.
3. Запомните, что slice создаёт копии объектов, оставляя исходные объекты в неизменном виде.

Для контроля корректности работы методов рекомендуется использовать console.log.

Визуализация

Демонстрация работы методов splice и slice в контексте времени:

Поток времени    : [🕒, 🕕, 🕙, 🕛, 🕒, 🕕, 🕙]

Модификация истории (splice): производится изменение событий:

timeStream.splice(3, 2); // 🕛 и следующий 🕒 были изъяты из временной шкалы!

Поток времени    : [🕒, 🕕, 🕙, 🕕, 🕙]

Сохранение событий (slice): фиксация момента без привнесения изменений:

let snapshot = timeStream.slice(1, 4); // Создан "снимок" времени от 🕕 до 🕛

Моментальный снимок: [🕕, 🕙, 🕛]

Если с помощью splice производится коррекция истории, то slice предоставляет возможность наблюдения без вмешательства.

Разбор компонентов

Удаление и добавление: ваш сценарий

Выбор метода зависит от ваших потребностей:

• Удаление элементов: splice поможет "проститься" с нежелательными элементами.
• Добавление элементов: splice будет полезен для "приема на борт" новых элементов на любую позицию.
• Копирование участков: если нужно зафиксировать какую-то часть событий, используйте slice.

От теории к практике

Рассмотрим в контексте склада: нужно списать товар, который никому не нужен – используйте splice. Прибыла новая партия товара – splice снова пригодится для добавления товара на склад. Хотите провести инвентуризацию без лишнего шума? Используйте slice.

Баланс производительности

Не забывайте:

• splice может потребовать дополнительной памяти из-за внесенных изменений в массив.
• slice, оперируя клонированием, часто демонстрирует лучшую производительность, так как не затрагивает оригинальный массив.

Учёт этих аспектов поможет оптимизировать ваш подход к написанию кода.

Полезные материалы

1. Array.prototype.splice() – JavaScript | MDN — подробное освещение работы метода splice().
2. Array.prototype.slice() – JavaScript | MDN — всё, что вам нужно знать о slice().
3. Как использовать методы массива в JavaScript: Методы-мутаторы | DigitalOcean — обзор методов-мутаторов массива, включая splice().
4. JavaScript Slice vs Splice – Medium — сравнение методов slice() и splice().
5. Методы массива JavaScript: Splice() против Slice() – YouTube — наглядное видео, объясняющее различия между методами slice() и splice().