Рубрики
Без рубрики

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

Автор оригинала: Scott Robinson.

В JavaScript и, как и многие другие языки, в какой-то момент, вероятно, понадобится удалить элемент из массива. В зависимости от вашего использования, это может быть так же легко, как и используя встроенный Shift () или POP () Команды, но это работает только, если элемент находится в начале или конце массива соответственно. Многие случаи использования требуют, чтобы вы поддерживали удаление элемента из произвольного местоположения в массиве, что мы здесь будем покрывать здесь.

Я также объясню, как это добиться этого другими способами, например, с использованием библиотек утилиты, которые будут обрабатывать его для вас, или если вы должны поддерживать более старые браузеры, такие как IE 8.

Ванильный JavaScript

Чтобы удалить определенный элемент из массива в JavaScript, мы захочем сначала найти местоположение элемента, а затем удалить его.

Найти местоположение по значению можно сделать с помощью indexof () Метод, который возвращает индекс для Первое вхождение данного значения или -1, если это не в массиве.

Используя это значение индекса, которое мы тогда хотим удалить элемент, который мы можем сделать с Сращивание () метод.

function removeElement(array, elem) {
    var index = array.indexOf(elem);
    if (index > -1) {
        array.splice(index, 1);
    }
}

Так что если Индекс и сращивание Есть ли единственные два метода, которые нам нужно для достижения этого, то каково к IF-заявлению? Проверяя, если индекс больше, чем -1, мы проверяем, что элемент на самом деле присутствует в массиве. Если это не было, и индекс IS -1, затем используя это значение в сращивание на самом деле удалит Последнее Элемент в массиве, который не то, что мы хотим.

Имейте в виду, что это только удаляет первое возникновение данного элемента. Смотрите следующий пример, чтобы проиллюстрировать это:

var arr = [1, 2, 3, 3, 4, 5];
removeElement(arr, 3);
console.log(arr);

// Output:
// [ 1, 2, 3, 4, 5 ]

Обратите внимание, что второй «3» все еще присутствует.

Если мы хотим удалить каждый экземпляр указанного элемента, то мы можем добиться этого с некоторой петлей вместо IF-оператора:

function removeAllElements(array, elem) {
    var index = array.indexOf(elem);
    while (index > -1) {
        array.splice(index, 1);
        index = array.indexOf(elem);
    }
}

Теперь запустите тот же пример код, что и выше, мы получаем следующее:

var arr = [1, 2, 3, 3, 4, 5];
removeAllElements(arr, 3);
console.log(arr);

// Output:
// [ 1, 2, 4, 5 ]

Как видите, оба из элементов «3» теперь удаляются из массива.

Библиотеки

С этим быть таким распространенным использованием, большинство (если не все) из библиотек утилиты имеют функцию для удаления элементов из массива.

Лоташ

Удалить элемент, Lodash имеет Удалить () метод. Если у вас есть довольно простой использование, вы просто хотите удалить примитивный элемент (например, номер), то эта функция, вероятно, является для вас, поскольку вам нужно пройти функцию, которая определяет, соответствует ли элемент вашим критериям.

Так, например, вот как вы удалили номер 3:

var arr = [1, 2, 3, 3, 4, 5];
_.remove(arr, function(e) {
    return e === 3;
});
console.log(arr);

// Output:
// [ 1, 2, 4, 5 ]

Обратите внимание, что он удалил все экземпляры 3, что является поведением по умолчанию.

Однако этот метод более полезен при удалении более сложных элементов, таких как объекты. Например, возможно, вы хотите удалить все объекты «Люди» из массива, если они до 21 года:

var people = [
    {name: 'Billy', age: 22},
    {name: 'Sally', age: 19},
    {name: 'Timmy', age: 29},
    {name: 'Tammy', age: 15}
];
_.remove(people, function(e) {
    return e.age < 21
});
console.log(people);

// Output
// [ { name: 'Billy', age: 22 }, { name: 'Timmy', age: 29 } ]

Это работает немного похоже на Фильтр Способ, за исключением того, что он удаляет элементы из массива, который вы проходите, а затем возвращает массив удаленных элементов из самого метода.

Нижнее подчеркивание

Утилита утилиты подчеркивает аналогичный метод, как Lodash, называемый Отклонить Отказ Это работает очень аналогично, за исключением одной замечательной разницы. Полученный массив возвращается из способа, и массив, который вы передаете ему, остается неизменным.

Смотрите следующий код для примера:

var arr = [1, 2, 3, 3, 4, 5];
var ret = _.reject(arr, function(e) {
    return e === 3;
});
console.log(arr);
console.log(ret);

// Output:
// [ 1, 2, 3, 3, 4, 5 ]
// [ 1, 2, 4, 5 ]

Опять же, как Лодаш Удалить Метод, Отклонить Метод лучше всего подходит для более сложных случаев, таких как удаление объектов или групп элементов.

Поддержка Internet Explorer

Если вы проекте, требует, чтобы вы поддерживали старые версии Internet Explorer, в частности, IE 8 в этом случае, то indexof () Метод не будет работать для вас, так как он не поддерживается в этой версии IE.

Чтобы иметь дело с этим, одно решение – это проводить метод, как показано в Этот стек переполняет ответ :

if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length >>> 0;

    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}

Согласно такому посту, это реализация Индекс От MDN, используемый в Firefox/Spidermonkey.

Другой вариант будет использовать jQuery’s $ .inarray () Метод:

var arr = [1, 2, 3, 3, 4, 5];
var idx = $.inArray(3, arr);
console.log(idx);

// Output:
// 2

Это примерно эквивалентно Индекс , что тогда можно использовать для написания inkselement Способ, как показано в первом разделе этой статьи.

Читайте ещё по теме: