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

Перевод статьи «Remove element from an array».

Удалить один или большее число элементов из уже существующего массива — распространенная задача в программировании. В JavaScript есть несколько вариантов ее решения, от простых до более сложных. Выбор подходящего решения зависит от ваших нужд. Нужно ли вам решение, изменяющее исходный массив? Надо ли удалить элемент по значению или по индексу? Нужно убрать один или несколько элементов? В общем, давайте посмотрим, какие у нас есть варианты.

Удаление любого элемента при помощи метода filter

Метод filter() — самое универсальное решение. С его помощью можно удалить как один, так и несколько элементов, причем хоть по значению, хоть по индексу. Это неизменяемое решение. С его помощью, собственно, не элемент удаляется, а создается новый массив, из которого отфильтровываются нежелательные элементы. Этот метод широко поддерживается, даже в Internet Explorer. Совместимость можно проверить здесь.

Метод filter() принимает в качестве параметра функцию обратного вызова, которая будет вызываться со следующими аргументами:

1. Значение (value) элемента (этот аргумент обязательный).
2. Индекс (index) элемента — опционально.
3. Исходный массив — тоже опционален.

Результирующий массив будет содержать элементы, для которых возвращаемое значение 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 = [
    {name: 'John', age: 23, color: 'red'}, 
    {name: 'Ann', age: 21, color: 'blue'}, 
    {name: 'Mike', age: 13, color: 'green'}
];

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

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]