Изучаем удаление элемента из массива JS

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

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

Например:

Array_name.splice (index);

Или

Array_name.delete[index]

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

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

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

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

Элементы числового массива отображаются до и после использования метода JavaScript 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);

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

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

Как видите, здесь были удалены и все элементы перед указанным номером индекса. Кроме этого метод 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:

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

Код 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 элементов будет увеличиваться.