Удаляем элементы массива
Независимо от того, хотите ли вы удалить определенное значение, элемент по его индексу или повторяющиеся элементы, JavaScript предлагает несколько методов для удаления элементов из массива.
Метод splice()
Если вам нужно удалить элемент из массива по индексу, вы можете использовать метод splice() , передав в него два аргумента: индекс элемента, который нужно удалить, и количество элементов, которые нужно удалить начиная с этого индекса.
То есть, если вторым аргументом передать единицу, то удалиться только один элемент, индекс которого был указан в первом аргументе. А если указать, например тройку, то удалиться 3 элемента, начиная с указанного индекса.
Будьте внимательны при использовании данного метода, так как он изменяет исходный массив.
let indexToRemove = 2; // Индекс элемента, который нужно удалить // Удаляем 1 элемент let myArray1 = [1, 2, 3, 4, 5, 6]; myArray1.splice(indexToRemove, 1); console.log(myArray1); // Вывод: [1, 2, 4, 5, 6] // Удаляем 3 элемента let myArray2 = [1, 2, 3, 4, 5, 6]; myArray2.splice(indexToRemove, 3); console.log(myArray2); // Вывод: [1, 2, 6] Метод filter()
Если вы знаете значение элемента, который нужно удалить, но не знаете его индекса, можно воспользоваться методом filter() . Этот метод возвращает новый массив без изменения исходного.
Заметьте, что данный метод удаляет не один элемент, а все с идентичным значением.
let valueToRemove = 30; // Значение которые нужно удалить let myArray = [10, 20, 30, 40, 50, 30]; myArray = myArray.filter(item => item !== valueToRemove); console.log(myArray); // Вывод: [10, 20, 40, 50] Метод shift()
Используется для удаления первого элемента массива.
let myArray = [10, 20, 30, 40, 50]; myArray.shift() console.log(myArray); // Вывод: [20, 30, 40, 50]Метод pop()
Используется для удаления последнего элемента массива.
let myArray = [10, 20, 30, 40, 50]; myArray.pop() console.log(myArray); // Вывод: [10, 20, 30, 40] 22 ноября 2023
Читайте также
- Случайное число в js
- Как создать вкладки на JavaScript
- Автоматическая высота textarea
- Строка в обратном порядке
- Индикатор скролла на JS
Как удалить элемент из массива в JavaScript
Перевод статьи «Remove element from an array».
Удалить один или большее число элементов из уже существующего массива — распространенная задача в программировании. В JavaScript есть несколько вариантов ее решения, от простых до более сложных. Выбор подходящего решения зависит от ваших нужд. Нужно ли вам решение, изменяющее исходный массив? Надо ли удалить элемент по значению или по индексу? Нужно убрать один или несколько элементов? В общем, давайте посмотрим, какие у нас есть варианты.
Удаление любого элемента при помощи метода filter
Метод filter() — самое универсальное решение. С его помощью можно удалить как один, так и несколько элементов, причем хоть по значению, хоть по индексу. Это неизменяемое решение. С его помощью, собственно, не элемент удаляется, а создается новый массив, из которого отфильтровываются нежелательные элементы. Этот метод широко поддерживается, даже в Internet Explorer. Совместимость можно проверить здесь.
Метод filter() принимает в качестве параметра функцию обратного вызова, которая будет вызываться со следующими аргументами:
- Значение (value) элемента (этот аргумент обязательный).
- Индекс (index) элемента — опционально.
- Исходный массив — тоже опционален.
Результирующий массив будет содержать элементы, для которых возвращаемое значение callback-функции будет истинным.
let originalArray = [1, 2, 3, 4, 5]; let filteredArray = originalArray.filter(myFilter); function myFilter(value) < return value < 3 || value >4; >
Метод filter() можно применять в компактном виде — с использованием стрелочных функций. Это можно делать, если для вас не важна поддержка IE.
let originalArray = [1, 2, 3, 4, 5]; let filteredArray = originalArray.filter((value, index) => index !== 2);
Удаление конкретного объекта
Даже если ваш массив содержит объекты, а не базовые типы данных, метод filter() все равно сработает. Просто нужно определить callback-функцию соответствующим образом.
let originalArray = [ , , ]; let filteredArray = originalArray.filter(value => value.age > 18);
Удаление первого элемента
Пожалуй, самый простой вариант удаления элемента из массива — удаление первого элемента. Для примера можно взять FIFO-очередь. В этом случае для удаления первого элемента можно воспользоваться методом shift(). Этот метод возвращает удаленный элемент, так что вы сможете как-то его обработать при желании. В отличие от filter(), метод shift() изменяет исходный массив.
let myArray = [1, 2, 3, 4, 5]; let removedElement = myArray.shift();
Удаление последнего элемента
Очень похожий вариант, только для случаев удаления элемента из LIFO-стека. Для удаления последнего элемента массива можно использовать метод pop(). Работает он аналогично методу shift(), который мы разбирали в предыдущем разделе.
let myArray = [1, 2, 3, 4, 5]; let removedElement = myArray.pop(); // myArray: 1,2,3,4
Удаление конкретного элемента по индексу
Если вы хотите удалить из массива какой-то определенный элемент, можно воспользоваться методом splice(). Этот метод умеет не только удалять элементы, но и добавлять новые.
При помощи метода splice() можно удалить и больше одного элемента за раз. Для этого в качестве первого параметра укажите начальный индекс. Вторым параметром идет число элементов, которые вы хотите удалить. Этот второй параметр опционален. Если вы его не укажете, метод удалит указанный в первом параметре элемент, а также все элементы справа от него.
// splice(2) example let myArray = [1, 2, 3, 4, 5]; console.log("Before: " + myArray); myArray.splice(2); console.log("After splice(2): " + myArray); // splice(2, 1) example myArray = [1, 2, 3, 4, 5]; console.log("Before: " + myArray); myArray.splice(2, 1); console.log("After splice(2, 1): " + myArray); // splice(2, 2) example myArray = [1, 2, 3, 4, 5]; console.log("Before: " + myArray); myArray.splice(2, 2); console.log("After splice(2, 2): " + myArray);
Поскольку метод splice() использует индексы массива, если вы захотите удалить элемент по значению, сначала придется найти его индекс.
Использование delete
Использование метода delete может быть очевидным, но он работает не так, как вы, вероятно, ожидаете. Он не удаляет элемент, а стирает его значение. Длина массива останется той же, а на позиции, которую вы очистили, будет неопределенное значение.
let myArray = [1, 2, 3, 4, 5]; delete(myArray[2]); // Result: 1,2,,4,5
Изучаем удаление элемента из массива JS
В JavaScript удалить элемент массива можно несколькими методами. К ним относятся методы pop и shift . Метод pop удаляет первый элемент из заданного массива. Метод shift удаляет последний элемент из заданного массива.
Можно задать длину массива 0, если требуется удалить все элементы из данного массива. Но что, вам нужно удалить определенный элемент?
Array_name.splice (index);
Array_name.delete[index]
Можно использовать метод splice . Он возвращает новый массив удаленных элементов. А первоначальный массив содержит оставшиеся элементы.
Посмотрите приведенную ниже демо-версию, чтобы узнать, как использовать метод JavaScript splice и другие способы удаления определенных элементов.
Обновлено: 2023-06-21 19:56:59 Вадим Дворников автор материала
Демонстрация удаления конкретного элемента с использованием метода splice
В этой демо-версии создается массив чисел. Первоначально в массив добавляются пять элементов. После этого используется метод splice для удаления третьего элемента. Таким же образом в JavaScript можно удалить первый элемент массива.
Элементы числового массива отображаются до и после использования метода JavaScript splice следующим образом:
Посмотреть онлайн демо-версию и код
Код JavaScript с методом splice :
Вы заметили, что я использовал для JavaScript удаления элемента массива два параметра. Первый указывает индекс элемента, который нужно удалить. Второй – сколько элементов нужно удалить после указанного ключа.
В следующей демо-версии показан случай, когда мы используем второй параметр.
Что делать, если второй параметр не указан в JavaScript-методе splice?
Использование того же кода, но без второго параметра в методе splice :
Arr_Numbers.splice(2);
Код и результат:
Посмотреть онлайн демо-версию и код
Как видите, здесь были удалены и все элементы перед указанным номером индекса. Кроме этого метод splice возвращает массив удаленных элементов.
Использование функции delete для удаления элемента массива
Также, чтобы в JavaScript удалить элемент массива, можно использовать функцию delete . Но она сохраняет пустое место, и если вы вернете этот массив после использования функции, то удаленный элемент будет отображен как undefined .
Рассмотрим демо-версию, в которой используется функция delete :
Посмотреть онлайн демо-версию и код
Вы видите, что для третьего элемента отображается undefined после его удаления с помощью функции delete .
Примечание . Вы должны указать номер индекса в квадратных скобках.
Чтобы в JavaScript удалить элемент массива, рекомендуется использовать splice . Метод delete может привести к возникновению сложностей по мере того, как количество undefined элементов будет увеличиваться.
Как удалить элемент html через js
Нужно воспользоваться методом document.querySelector() и найти нужный элемент по селектору. Далее вызвать у родителя нужного элемента метод removeChild() , передав ему элемент.
const h1 = document.querySelector('h1') const parent = h1.parentNode parent.removeChild(h1) // элемента больше нет внутри DOM дерева страницы