Как удалить определенный элемент массива JavaScript?

В JavaScript удалить элемент массива можно несколькими методами. К ним относятся методы pop и shift. Метод pop удаляет первый элемент из заданного массива. Метод shift удаляет последний элемент из заданного массива.

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

Например:

Array_name.splice (index);

Или

Array_name.delete[index]

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

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

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

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

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

JavaScript-splice

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

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

<script type="text/javascript">

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-no-parameter

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

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

Код JavaScript:

<script type="text/javascript">

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:

JavaScript-array-delete

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

Код JavaScript:

<script type="text/javascript">

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» дружной командой проекта Сайтостроение от А до Я.

25 мая 2017 в 13:05
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок