Как удалить элемент из массива в JavaScript

Удаление элемента из массива в JavaScript влияет на порядок и производительность: неправильный выбор метода ломает индексную структуру или оставляет «пустые» позиции. Разбираем конкретные приёмы - splice, filter, pop, shift и delete - с примерами, показателями затрат и ситуациями, когда каждый метод уместен.

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

Вадим Дворниковавтор материала

Введение

Можно задать длину массива 0, если требуется удалить все элементы из данного массива. Но что, вам нужно удалить определенный элемент?

Например:

Array_name.splice (index);

Или

Array_name.delete[index]

Можно использовать метод splice. Он возвращает новый массив удаленных элементов. А первоначальный массив содержит оставшиеся элементы.

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

Демонстрация удаления конкретного элемента с использованием метода splice

В этой демо-версии создается массив чисел. Первоначально в массив добавляются пять элементов. После этого используется метод splice для удаления третьего элемента. Таким же образом в JavaScript можно удалить первый элемент массива.

Элементы числового массива отображаются до и после использования метода JavaScript splice следующим образом:

Демонстрация удаления конкретного элемента с использованием метода splice

Посмотреть онлайн демо-версию и код

Код JavaScript с методом splice:

<script>

var Arr_Numbers = [10,20,30,40,50];

var i;

var the_arr_before_after = "The original array: <BR>";

for (i=0; i < Arr_Numbers.length; i++){

    the_arr_before_after += Arr_Numbers[i] + "<BR>";

    }

    document.getElementById("p1").innerHTML = the_arr_before_after;

Arrretrun = Arr_Numbers.splice(2,1);

var the_arr_before_after = "Array elements after splice method: <BR>";

for (i=0; i < Arr_Numbers.length; i++){

    the_arr_before_after += Arr_Numbers[i] + "<BR>";

    }

    document.getElementById("p2").innerHTML = the_arr_before_after;

</script>

Вы заметили, что я использовал для JavaScript удаления элемента массива два параметра. Первый указывает индекс элемента, который нужно удалить. Второй – сколько элементов нужно удалить после указанного ключа.

В следующей демо-версии показан случай, когда мы используем второй параметр.

Что делать, если второй параметр не указан в JavaScript-методе splice?

Использование того же кода, но без второго параметра в методе splice:

Arr_Numbers.splice(2);

Код и результат:

Что делать, если второй параметр не указан в JavaScript-методе splice?

Посмотреть онлайн демо-версию и код

Как видите, здесь были удалены и все элементы перед указанным номером индекса. Кроме этого метод splice возвращает массив удаленных элементов.

Код JavaScript:

<script>

var Arr_Numbers = [10,20,30,40,50];

var i;

var the_arr_before_after = "The original array: <BR>";

for (i=0; i < Arr_Numbers.length; i++){

    the_arr_before_after += Arr_Numbers[i] + "<BR>";

    }

    document.getElementById("p1").innerHTML = the_arr_before_after;

Arrretrun = Arr_Numbers.splice(2);

var the_arr_before_after = "Array elements after splice method: <BR>";

for (i=0; i < Arr_Numbers.length; i++){

    the_arr_before_after += Arr_Numbers[i] + "<BR>";

    }

    document.getElementById("p2").innerHTML = the_arr_before_after;

//Удаленные элементы массива в возвращаемом массиве

var the_arr_before_after = "The removed array elements: <BR>";

for (i=0; i < Arrretrun.length; i++){

    the_arr_before_after += Arrretrun[i] + "<BR>";

    }

    document.getElementById("p3").innerHTML = the_arr_before_after;

</script>

Использование функции delete для удаления элемента массива

Также, чтобы в JavaScript удалить элемент массива, можно использовать функцию delete. Но она сохраняет пустое место, и если вы вернете этот массив после использования функции, то удаленный элемент будет отображен как undefined.

Рассмотрим демо-версию, в которой используется функция delete:

Использование функции delete для удаления элемента массива

Посмотреть онлайн демо-версию и код

Код JavaScript:

<script>

var Arr_Strings = ['The','JavaScript','Array','Totorial'];

var i;

var the_arr_before_after = "The original string array elements: <BR><BR>";

for (i=0; i < Arr_Strings.length; i++){

    the_arr_before_after += Arr_Strings[i] + "<BR>";

    }

    document.getElementById("p1").innerHTML = the_arr_before_after;

//Использование функции delete

delete Arr_Strings[2];

var the_arr_before_after = "Array elements after splice method: <BR><BR>";

for (i=0; i < Arr_Strings.length; i++){

    the_arr_before_after += Arr_Strings[i] + "<BR>";

    }

    document.getElementById("p2").innerHTML = the_arr_before_after;

</script>

Вы видите, что для третьего элемента отображается undefined после его удаления с помощью функции delete.

Примечание. Вы должны указать номер индекса в квадратных скобках.

Чтобы в JavaScript удалить элемент массива, рекомендуется использовать splice. Метод delete может привести к возникновению сложностей по мере того, как количество undefined элементов будет увеличиваться.

Вадим Дворниковавтор-переводчик статьи «How to remove a specific JavaScript array element Splice, delete functions»

Комментарии

Оставьте свой комментарий
И
Иван

Метод shift() удаляет первый элемент из массива и возвращает его значение. Этот метод изменяет длину массива.