Как использовать метод array.splice() в JavaScript для изменения массивов

Метод array.splice() - мощный инструмент для изменения массивов в JavaScript. Он позволяет удалять, заменять и добавлять элементы прямо в исходный массив. В этой статье мы подробно разберем, как использовать все возможности splice для эффективной работы с массивами.

Основы работы метода array.splice()

Для начала давайте разберемся в синтаксисе метода splice() и его аргументах.

Вот полный синтаксис вызова метода:

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

Рассмотрим каждый аргумент:

• start - начальный индекс, с которого начинаются изменения;
• deleteCount - количество элементов для удаления (по умолчанию удаляются все элементы до конца массива);
• itemN - элементы для вставки на место удаленных (необязательный параметр).

Давайте посмотрим, как удалять элементы с помощью array.splice().

Количество удаляемых элементов

Количество удаляемых элементов задается вторым параметром deleteCount. Если этот параметр не указан, удаляются все элементы до конца массива:

let fruits = ["Яблоко", "Апельсин", "Манго", "Груша"]; let removed = fruits.splice(1); // fruits = ["Яблоко"] // removed = ["Апельсин", "Манго", "Груша"] 

Чтобы удалить строго определенное количество элементов, просто укажем это число:

let fruits = ["Яблоко", "Апельсин", "Манго", "Груша"]; let removed = fruits.splice(1, 2); // fruits = ["Яблоко", "Груша"] // removed = ["Апельсин", "Манго"] 

Сохранение удаленных значений

Обратите внимание, что метод splice возвращает массив удаленных элементов. Это позволяет сохранить их в переменной для дальнейшего использования.

Помимо удаления, splice умеет вставлять новые элементы в массив.

Чтобы просто добавить элементы, не удаляя старые, нужно передать 0 в качестве количества удаляемых элементов:

let fruits = ["Яблоко", "Апельсин"]; fruits.splice(1, 0, "Манго", "Груша"); // fruits = ["Яблоко", "Манго", "Груша", "Апельсин"] 

Замещение старых элементов новыми

A еще splice умеет заменять старые значения в массиве на новые. Для этого сначала укажем количество элементов для удаления, а затем перечислим новые элементы:

let fruits = ["Яблоко", "Апельсин", "Манго"]; fruits.splice(1, 1, "Груша", "Киви"); // fruits = ["Яблоко", "Груша", "Киви", "Манго"] 

Возвращаемое значение

Метод splice() возвращает массив удаленных элементов. Если элементы не удалялись, вернется пустой массив:

let removed = fruits.splice(1, 0, "Лимон"); // removed = [], fruits = ["Яблоко", "Лимон", "Апельсин"] 

Работа со свойством length

При удалении элементов splice автоматически корректирует длину массива в свойстве length. А при добавлении элементов длина, наоборот, увеличивается.

Сравнение splice() и slice()

Не путайте array.splice() и array.slice(). Главное отличие в том, что splice изменяет исходный массив, а slice возвращает его копию, не мутируя оригинал.

Также в slice нельзя вставлять элементы, она умеет только вырезать фрагмент массива.

Решение распространенных задач

Теперь разберемся, как использовать array.splice() на практике для решения типовых задач по работе с массивами.

Удаление элемента по индексу

Часто бывает нужно удалить конкретный элемент по его индексу в массиве. Делается это так:

let fruits = ["Яблоко", "Груша", "Манго", "Апельсин"]; let removed = fruits.splice(2, 1); // fruits = ["Яблоко", "Груша", "Апельсин"] // removed = ["Манго"] 

Здесь мы нашли элемент с индексом 2 (это "Манго") и удалили ровно 1 элемент.

Вставка элемента по индексу

Аналогично можно вставлять данные на любую позицию:

let fruits = ["Яблоко", "Груша", "Апельсин"]; fruits.splice(1, 0, "Манго"); // fruits = ["Яблоко", "Манго", "Груша", "Апельсин"] 

Замена элемента в массиве

Чтобы заменить элемент в массиве, сначала удаляем старое значение, а затем добавляем новое. Рассмотрим пример:

let fruits = ["Яблоко", "Банан", "Апельсин"]; fruits.splice(1, 1, "Груша"); // fruits = ["Яблоко", "Груша", "Апельсин"] 

Здесь мы нашли элемент с индексом 1 (это "Банан") и заменили его на "Грушу", удалив 1 элемент и добавив "Груша" на эту позицию.

Обрезка массива

Иногда нужно обрезать массив, оставив только первые N элементов. Делается это за один вызов splice():

let fruits = ["Яблоко", "Банан", "Апельсин", "Манго", "Киви"]; fruits.splice(3); // fruits = ["Яблоко", "Банан", "Апельсин"] 

Здесь мы удалили все элементы, начиная с индекса 3. В результате остались только первые 3 фрукта.

Объединение массивов

Чтобы объединить 2 массива, можно воспользоваться splice():

let fruits = ["Яблоко", "Груша"]; let vegetables = ["Огурец", "Помидор"]; // Объединяем массивы fruits.splice(fruits.length, 0, ...vegetables); // fruits = ["Яблоко", "Груша", "Огурец", "Помидор"] 

Сперва находим позицию в конце первого массива с помощью свойства length. Затем вставляем элементы второго массива, распаковав их оператором spread.

Разделение массива на части

On the other hand, splice позволяет разбить один большой массив на несколько частей:

let array = [1, 2, 3, 4, 5, 6]; let first = array.splice(0, 3); let second = array; // first = [1, 2, 3] // second = [4, 5, 6] 

Здесь из исходного массива мы вырезали первые 3 элемента в отдельный массив. В итоге получили 2 новых массива с разбиением данных.

Лучшие практики и рекомендации

После изучения базовой работы splice() давайте рассмотрим несколько полезных советов для более эффективного применения этого метода.