Вставка, удаление и замена элементов с помощью Array.splice()

Когда нужно произвести какие-то изменения в массиве, метод JavaScript splice может прийти на помощь. Он позволяет осуществлять вставку, удаление и замену элементов в массиве JavaScript.

Рассмотрим аргументы, передаваемые в метод splice().

Array.splice (start_index, number_of_elements_to_remove):

  • start_index — индекс в массиве, с которого начинается вставка или удаление элементов;
  • number_of_elements_to_remove — задает количество элементов, которое необходимо удалить, начиная со star_index.

Все элементы, следующие за number_of_elements_to_remove, будут вставлены в массив, начиная с start_index. Они могут быть любого типа, включая строки, числа, булевы значения, объекты, функции, NULL, undefined, и т.д.

Для более детального изучения параметров метода Array.prototype.splice() Javascript воспользуйтесь MDN.

Давайте начнем с простого примера, демонстрирующего, как вставить число в массив с помощью метода Array.splice().

Представьте, что у нас есть массив [1,3,4], и мы хотим вставить в него 2 между 1 и 3. Пример реализации:

var my_array = [1,3,4];
        var start_index = 1;
        var number_of_elements_to_remove = 0;
        my_array.splice(start_index, number_of_elements_to_remove, 2);
        console.log(my_array);
        //[1,2,3,4];

Обратите внимание, что JavaScript array splice воздействует непосредственно на массив. Таким образом, вызванный my_array метод splace() вместо того, чтобы вернуть новый массив, обновит my_array.

Пример удаления элемента из массива в JavaScript:

var my_array = ["a","b","c","k","d"];
        var start_index = 3
        var number_of_elements_to_remove = 1;
        var removed_elements = my_array.splice(start_index, number_of_elements_to_remove);
        console.log(removed_elements);
        //["k"]
        console.log(my_array);
        //["a","b","c","d"];

Обратите внимание, что в этом примере метод Array.splice() возвращает массив из удаленных элементов.

Взглянем на пример замены элементов в массиве JavaScript с помощью метода splice JavaScript:

var my_array = ["бейсбол", "баскетбол", "теннис", "гольф"];
        var start_index = 1
        var number_of_elements_to_remove = 2;
        var removed_elements = my_array.splice(start_index, number_of_elements_to_remove, "бокс", "боулоинг", "волейбол");
        console.log(removed_elements);
        //["теннис", "гольф"]
        console.log(my_array);
        //["бейсбол", "бокс", "боулинг", "волейбол", "гольф"];

Приведенный выше пример заменяет «баскетбол» и «теннис» на «бокс«, «боулинг» и «волейбол«. Он может показаться немного запутанным из-за всех проведенных операций. Разберем все операции шаг за шагом. Для начала мы сообщаем методу splace() начальную позицию my_array [1]. Затем number_of_elements_to_remove задаем 2, поэтому метод удаляет my_array [1] и my_array [2]. И, наконец, начиная со start_index my_array[1], вставляем в массив my_array элементы.

Метод JavaScript splace хорош, когда нужно вставить или удалить значения из массива t. Если массив уже отсортирован, метод splace() подходит, чтобы явно расположить новые значения в массиве. Он также хорошо работает, когда нужно удалить значения из массива по индексу. Обратите внимание на то, что метод splace() действует непосредственно на массив и возвращает только те значения, которые были удалены или вырезаны из массива.

Перевод статьи “Insert, Remove, and Replace elements with Array.splice()” был подготовлен дружной командой проекта Сайтостроение от А до Я.