Удаляем элемент массива в JavaScript | OTUS
⚡ Подписка на курсы OTUS!
Интенсивная прокачка навыков для IT-специалистов!
Подробнее

Курсы

Программирование
Python Developer. Professional
-3%
Разработчик на Spring Framework
-5%
iOS Developer. Professional
-8%
Golang Developer. Professional
-6%
Базы данных
-12%
Agile Project Manager
-5%
Android Developer. Professional
-11%
Microservice Architecture
-5%
C++ Developer. Professional
-5%
Highload Architect
-6%
JavaScript Developer. Basic
-8%
Backend-разработчик на PHP
-9%
Разработчик IoT
-13%
PostgreSQL
-8%
Подготовка к сертификации Oracle Java Programmer (OCAJP) Framework Laravel Cloud Solution Architecture Reverse-Engineering. Professional Архитектура и шаблоны проектирования Node.js Developer Интенсив «Оптимизация в Java» Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes iOS Developer. Basic Супер-интенсив «СУБД в высоконагруженных системах» Супер-интенсив "Tarantool"
Инфраструктура
DevOps практики и инструменты
-12%
Базы данных
-12%
Network engineer. Basic
-10%
Network engineer
-4%
Экcпресс-курс «ELK»
-10%
Инфраструктурная платформа на основе Kubernetes
-6%
Administrator Linux.Basic
-10%
Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes»
-30%
Дизайн сетей ЦОД
-13%
PostgreSQL
-8%
Разработчик программных роботов (RPA) на базе UiPath и PIX Reverse-Engineering. Professional Внедрение и работа в DevSecOps Administrator Linux. Advanced Infrastructure as a code in Ansible Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Экспресс-курс «IaC Ansible»
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

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

В этой статье мы поговорим о том, как удалить элемент массива в JavaScript. Вообще, выполнить эту операцию можно, используя разные методы. Например, метод pop удалит первый элемент из определённого массива. Что касается метода shift, то с его помощью вы сможете удалить последний элемент.

Также вы можете задать в качестве длины массива «ноль» — это позволит вам удалить все элементы. Но что делать, если надо удалить какой-нибудь конкретный элемент?

Допустим:

Array_name.splice (index);

Либо:

Array_name.delete[index]

Для удаления нам подойдёт метод splice. С его помощью можно возвратить новый массив удалённых элементов. Оставшиеся элементы будут находиться в первоначальном массиве.

Давайте посмотрим, как использовать метод JavaScript splice и прочие способы удаления элементов.

Удаляем элемент с помощью splice

Представьте, что мы создаём массив чисел и добавляем туда 5 элементов. Далее удаляем 3-й элемент с помощью splice. Кстати, точно таким же образом мы можем удалить и 1-й элемент массива.

Теперь посмотрим, что будет в нашем числовом массиве до и после применения метода JavaScript splice:

3.1_JavaScript_splice_1-20219-b6fdda.png

Теперь предлагаем вашему вниманию соответствующий 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,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>

Обратите внимание, что для удаления элемента JS-массива использовались 2 параметра: один указывал на индекс удаляемого элемента, а второй на количество элементов, подлежащих удалению (в нашем случае, это 1).

Но что будет, если мы не укажем второй параметр? Для ответа на этот вопрос, задействуем тот же код, но уже без указания количества элементов массива, подлежащих удалению (то есть без второго параметра):

Arr_Numbers.splice(2);

Вот наш 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>

А вот итог:

3.2_JavaScript_splice_no_parameter_1-20219-c3d652.png

Мы видим, что произошло удаление всех элементов, которые находились перед указанным номером индекса. Вдобавок к этому, splice возвратил нам массив удалённых элементов.

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

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

Рассмотрим соответствующий 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>

А теперь посмотрим на результат:

3.3_JavaScript_array_delete_1-20219-997d42.png

По примеру видно, что вместо 3-го элемента теперь отображается undefined, т. к. элемент был удалён функцией delete. Единственное, на что стоит обратить внимание, — номер индекса надо указывать в квадратных скобках.

Вывод

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

Источник — «How to remove a specific JavaScript array element?».

Интересует профессиональный курс по JavaScript-разработке? Переходите по ссылке ниже:

JS_970x90-20219-c6e520.jpg

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться