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

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

Оригинал: How to remove an element from an array, Simone Vittori

tl;dr версия


myArray.splice(3, 1);

Функция удалит элемент с индексом 3. Документация .

Подробная версия

Допустим, у нас есть простой массив строк, например:


var a = ['foo', 'bar', 'baz'];

Согласно правилу наименьшего удивления, массив имеет метод remove:


a.remove('bar');
>>> ['foo', 'baz']

Плохие новости? В JavaScript нет такой функции.

Хорошие новости? Мы можем ее создать!

Но, прежде всего, давайте посмотрим, как это делается стандартным способом:


a.splice(1, 1);
>>> ['bar']
a
>>> ['foo', 'baz']

Что делает функция splice? Все просто: она удаляет элемент с индексом 1. Первый параметр — это индекс, а второй — количество элементов, которые необходимо удалить, начиная с указанного индекса. Это все, что нужно знать о функции splice. Если вам интересно посмотреть, какие еще классные вещи может делать функция splice, обратитесь к документации MDN.

Но что, если я не знаю индекс элемента?

Ну, вы можете получить его. Просто используйте метод indexOf, следующим образом:


a.indexOf('bar');
>>> 1

Пожалуйста, обратите внимание, что Internet Explorer 8-ой и более ранних версий не поддерживает indexOf (для таких случаев можно использовать полифилл).

Расширение объекта Array

Это функция, которую я, наконец, придумал.


// Удаление элемента из массива.
// String value: значение, которое необходимо найти и удалить.
// return: массив без удаленного элемента; false в противном случае.
Array.prototype.remove = function(value) {
    var idx = this.indexOf(value);
    if (idx != -1) {
        // Второй параметр - число элементов, которые необходимо удалить
        return this.splice(idx, 1);
    }
    return false;
}

Я знаю, что некоторые люди не считают расширение Array хорошием решением, поскольку, как они утверждают, это может привести к нежелательным последствиям. Тем не менее, я думаю, что функцию remove намного легче запомнить и использовать, чем splice, и честно говоря, я не вижу никаких недостатков в использовании этого подхода. Что вы думаете?

Полный пример (как обычно, для консоли браузера):


var myArray = ['foo', 'bar', 'baz'];
>>> undefined
myArray.length
>>> 3
myArray.remove('bar');
>>> ["bar"]
myArray
>>> ["foo", "baz"]
myArray.remove('baz');
>>> ["baz"]
myArray
>>> ["foo"]
myArray.length
>>> 1
myArray.remove('qux');
>>> false
Круто! Но... почему я не могу использовать ключевое слово delete?

О, так вы тоже слышали об этом магическом ключевом слове JavaScript, не так ли? Вы можете делать классные вещи с ним, например:


var a = ['foo', 'bar'];
delete a[1];

И это будет работать. Но этот способ имеет недостаток: он не просто удалить элемент из массива, а на самом деле заменит его на значение undefined. Например:


var a = ['foo', 'bar', 'baz'];
>>> undefined
delete a[1];
>>> true
a
>>> ["foo", undefined, "baz"]

Это может приводить к неожиданным результатам:


a.length
>>> 3   // должно быть 2!

В заключение, если вы не заботитесь об этих недостатках, вы можете использовать ключевое слово delete; в противном случае — использовать решением, описанное выше.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться