Удаление элемента массива в JavaScript

Как известно, JavaScript не является строго типизированным языком. Это говорит о том, что массивы могут хранить разные по типу значения. Однако, как и везде в любом языке, в массивы можно добавлять элементы динамически и удалять их. Динамически — значит во время выполнения программы.

Для этого есть ряд функций в JS, которые не только удаляют элементы в массиве, но и очищают память. Новые версии языка предоставляют больше функций для оперирования с массивами и позволяют удалить даже несколько элементов.

Подводные камни удаления элементов из массива

Удаляя элементы с помощью операторов «delete», «arr=undefined/null» — память массива не освободится! При создании массива, через оператор new, или коротким способом, у него есть определенная длина, которую можно узнать с помощью оператора свойства length, хранящееся в Array.prototype.

Присвоение массиву нового элемента через оператор «=» добавляет элемент в конец массива и увеличивает его length на 1, если для нового элемента указан индекс на 1 больше последнего.

Но, что будет, если принудительно удалить элемент с помощью оператора delete или поставить ему значение undefined? Оказывается, что его длина так и останется прежней. Удаленный элемент сохранится, а его значение будет равно undefined.

Пример:

let arr_1 = [«a», «b», «c», «d»];
let arr_2 = [new Object(), 2, 3, 4];

arr_1.length; \\ количество элементов 4
arr_2.length; \\ 4

delete arr_1[0]; \\ удаляем первый элемент
arr_2[0] = null; \\ удаляем объект в первом элементе

arr_1[0]; \\ undefined
arr_2[0] \\ null

arr_1.length; \\ 4 ???
arr_2.length; \\ 4 ???

Казалось бы, первые элементы обеих массивов были удалены, но длина осталась прежней. В arr_1 мы удалили лишь значение элемента, память он все еще занимает, но его значение стало undefined. В arr_2 был удален пустой объект, даже если он и пустой, arr_2[0] ссылается на память где он расположен. Присвоив ему значение null, мы лишь удалили пустой объект, ссылка осталась в массиве.

Функции для полного удаления элементов с массива

В Array.prototype есть ряд функций, которые позволяют оперировать с памятью массива. При удалении первого элемента, его память полностью освобождается, а массив сдвигается назад. Таким образом после удаления, второй элемент становится первым, а length становится на 1 меньше.

При удалении последнего элемента, массив не сдвигается, но длина становится также меньше на 1. Рассмотрим несколько функций, дающих такой результат.

Функция pop()

Данная функция убирает последний элемент из массива и возвращает удаленный элемент. Длина массива становится меньше на 1.

Пример:

let arr = [«England», «USA», «France»];
arr.length; \\ 3
arr.pop();
arr.length; \\ 2
alert(arr); \\ England, USA

Функция не принимает никаких параметров.

Функция shift()

Удаляет первый элемент и возвращает его. Массив сдвигается влево, делая второй элемент первым. Длина становится меньше на 1.

Пример:

let arr = [«apple», «orange», «strawberry»]; \\ length = 3
arr.shift(); \\ length = 2
alert(arr[0]); \\ orange, но в начале было apple

Параметры для функции не требуются.

Функция splice()

В зависимости от установленных параметров, функция как удаляет элементы, так и добавляет. Может удалить и добавить одновременно несколько элементов. Возвращает массив удаленных элементов.
Формат функции: splice(index, num_of_elements, item1, item2, inemn…).

Первый параметр указывает с какого индекса нужно начинать удаление\добавление элементов. Второй параметр равен количеству элементов, третий (item1, item2, inemn..) заменяет элементы или добавляет новые и сохраняет в них значения, указанных в параметрах.

Пример:

let animasl = [«lion», «cat», «wolf», «horse»];
animals.splice(3, 0, «mouse», «tiger»);\\ добавляем в конец массива новые элементы
alert(animals); \\ lion, cat, wolf, horse, mouse, tiger

animals.splice(1,4); Удаляем все элементы, начиная со второго, третий параметр не требуется
alert(animals); \\ lion

Как видно, функция обладает высокой гибкостью и позволяет оперировать как с одним, так и несколькими элементами.

Удаление элементов в разброс

Часто случается так, что необходимо удалить из массива несколько элементов, стоящих не один за другим, а в разных местах. Однако в JavaScript не предусмотрено таких функций. Но выход есть — использование функции map(func), добавленной в версии EcmaScript 6.

Данная функция что-то делает с каждым элементом массива и возвращает новый измененный массив, который можно сохранить в переменную исходного массива. Чтобы понять, как удалить несколько элементов массива, стоящих в разных его частях, следует понять это на примере.

Пример использования map():

let arr = [2, 3, 4, 5];

function check_odd(num){ \\ функция как аргумент функции map()
if(num % 2 == 0) return; \\ если число делится без остатка, то оно считается четным и остается в массиве
arr.splice(arr.indexOf(num), 1); \\ в ином случае элемент удаляется

}

arr.map(check_odd); \\выполняем функцию check_odd для каждого элемента массива
alert(arr); \\ выводим измененный массив, равный 2, 4

Как видно из выше приведенного примера, функция map(fun) запускает для каждого элемента по очереди функцию в своем аргументе fun. Данная функция проверяет каждое числовое значение массива на деление без остатка, что равно четному числу и сохраняет это число в массиве.

Нечетные числа удаляются с помощью функции splice(). Из этого следует, что, используя условия и перебор массива, можно удалить элементы не в порядке очереди, а в разброс.

Итог

Массив представляет собой статическую структуру хранения данных. Удаление элемента без функции невозможно — значение сотрется, а элемент останется. Удаление элемента с помощью функций shift() сдвигает массив влево — второй элемент становится первым, а индексы остальных на 1 меньше.

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