Присоединяйтесь к новому бесплатному курсу по Angular: "Список пользователей"
Курс проходит в мессенджере (Telegram, Viber). В конце курса - сессия живого разбора кода. Регистрация по ссылке.

18 Апр 2018

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

Всем привет, с вами JSExpert и сегодня в уроке мы рассмотрим как правильно удалить элемент из массива.

Самый простой вариант — воспользоваться ключевым словом delete. Но если удалить элемент с помощью delete, как мы показывали в одном из наших уроков, на месте удалённого элемента появится значение undefinded.

Давайте рассмотрим на примере.

const letters = ['a', 'b', 'c', 'd'];

У нас есть некий массив letters, со значениями ‘a’, ‘b’, ‘c’ и ‘d’. Если мы попробуем удалить второй или третий элемент, используя ключевое слово delete, наш массив не станет короче на один элемент, он останется той же длины, и в том месте, где мы удалили элемент появится пустое значение undefinded.

Поэтому, чтоб удалять правильно и действительно удалить элемент из массива, используют метод .splice(). Перед вами простейший пример, как можно это сделать:

const newLetters = letters.splice(2, 1);

console.log(letters, newLetters);

Первый параметр это положение, с которого следует начинать, а именно индекс элемента массива, который вы хотите удалить. Второй параметр, в нашем случае 1,  — это количество элементов до удаления. Давайте выполним наш код и посмотрим в консоли на результат:

[ 'a', 'b', 'd' ]
[ 'c' ]

Мы видим, что массив letters стал короче, и из четырёх значений у нас осталось три: ‘a’, ‘b’, ‘d’. Значение ‘c’ вырезано и находиться теперь в массиве newLetters. Если второй аргумент функции заменить на 2, и снова запустить в код, в консоли мы увидим другой результат.

[ 'a', 'b' ]
[ 'c', 'd' ]

Массив letters стал ещё короче, теперь в нём только два значения — ‘a’ и ‘b’. А в массиве newLetters, в котором находятся вырезанные значения, теперь находятся ‘c’ и ‘d’. Таким образом, с помощью простейшей манипуляции можно удалять элементы из массива.

Подведём итог. Вместо того, чтоб использовать delete, вы можете использовать метод массива splice, указывать индекс элемента, который вы хотите вырезать, вторым параметром указывать число удаляемых элементов, если вам нужно удалить больше одного. Данный метод модифицирует исходный массив и, в нашем случае, возвращает вырезанный элемент в новый массив. Если вам нужно только удалить элемент и никуда не складывать удалённое, можно не использовать newLetters и просто выполнять letters.splice().

На этом сегодня всё, ждём вас в следующем уроке от JSExpert !