Если в вашем коде есть массив, вы обязаны добавлять и удалять элементы. Итак, как удалить конкретный элемент из массива?

Массив — это часто используемая структура данных в любом фрагменте кода. Большой или маленький, независимо от того, насколько велика ваша формулировка задачи, вы, вероятно, будете использовать массивы. И знать, как удалить конкретный элемент из Массива, будет полезно.

Проще говоря, мы ищем что-то вроде следующего:

array.remove(item)

В этом посте мы рассмотрим пару интересных способов удаления определенного элемента из массива.

Давайте начнем.

Массив без повторяющихся элементов

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

Использование Splice и IndexOf

Здесь мы можем использовать indexOf, чтобы увидеть позицию элемента в массиве. Когда положение известно, его можно использовать в методе splice.

Помните, что Splice изменит исходный массив.

По определению метод indexOf используется для определения первого появления элемента в массиве. Если в массиве есть дубликаты, indexOf вернет первую позицию элемента.

По определению объединение используется для вставки и удаления элементов из массива. Определение склейки имеет начальный индекс, количество элементов, которые необходимо удалить из начального индекса, и любые новые элементы, которые необходимо вставить.

splice(start, delete_count, new_item1, new_item2,....new_itemN)
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]
months.splice(2,1);
// deletes the element at index 2
// expected output: Array ["Jan", "Feb", "April", "May"]

Здесь мы можем использовать объединение для удаления одного или нескольких элементов из массива. Итак, наш код для удаления элемента или удаления элемента в определенной позиции с использованием indexOf и склейки будет таким:

const months = ['Jan', 'March', 'April', 'June'];
const index = months.indexOf('April');
if (index > -1) {
  months.splice(index, 1);
}
// array = ['Jan', 'March', 'June']

Использование фильтра

Этот метод полезен, если вы знаете удаляемое значение, а не индекс.

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

If you are coding in ECMA-262, old school!
const months = ['Jan', 'March', 'April', 'June'];
let value = 'April';
let filteredMonths = months.filter(function(item) {
    return item !== value
});
If you are coding in the newer versions!
filteredMonths = months.filter(item => item !== value)

Использование Удалить

Одной из самых впечатляющих особенностей построения массивов в JavaScript является то, что массив не обязательно должен быть непрерывным. Например, вы можете определить массив с элементами в позиции 1 и 4. Тем не менее, вы можете пропустить 0, 2 и 3. Следовательно, могут быть сценарии, когда вам нужно удалить элемент, но сохранить все остальные элементы в массиве. нетронутый. Проще говоря, индексы других элементов не должны быть затронуты. Для этого вы можете использовать оператор удаления.

var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
delete trees[3];
if (3 in trees) {
    // this is not executed
}
trees[2] = undefined;
if (2 in trees) {
    //this is executed
}

Если вы просто хотите, чтобы элемент с заданным индексом больше не существовал, но не хотите, чтобы индексы других элементов менялись, delete array[index] сделает свое дело.

Использование среза

По определению slice() создает новый массив с полученными индексами. Определение среза запрашивает начальный и конечный индексы. Следовательно, когда мы хотим удалить определенный индекс из массива, мы можем разбить массив на две части и объединить все элементы «слева» и «справа» от удаляемого элемента.

Срез гарантирует, что исходный массив не будет изменен.

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const i = 3
const filteredItems = items.slice(0, i).concat(items.slice(i+1, items.length))

Массив с дубликатами

Использование фильтра

Как упоминалось выше, конкретный элемент можно отфильтровать из массива с помощью функции фильтрации. Затем такая функция вызывается для каждого элемента массива.

const value = 3
let arr = [1, 2, 3, 4, 5, 3]
arr = arr.filter(item => item !== value)

В зависимости от версии вашего JavaScript вы можете использовать включения в своей функции фильтра. Метод includes определяет, содержит ли массив определенное значение среди своих элементов, возвращая true или false в зависимости от ситуации.

let forDeletion = [2, 3, 5]
let arr = [1, 2, 3, 4, 5, 3]
arr = arr.filter(item => !forDeletion.includes(item))
// [ 1, 4 ]

Использование сплайсинга

Теперь вы будете знать значение, но indexOf будет недостаточно для удаления всех вхождений элемента в массиве. Следовательно, вам нужно будет запустить цикл for, чтобы определить все индексы элемента в массиве.

for (var i = arr.length; i--;) {
   if (arr[i] === item) 
       arr.splice(i, 1);
}

Особые случаи

Последний предмет

Если вы знаете, что удаляемый элемент является последним элементом в массиве, вы можете использовать два метода для удаления последнего элемента.

Во-первых, вы можете уменьшить размер массива на единицу. Установка новой длины позволит добиться этого. Любой элемент, индекс которого больше или равен новой длине, будет удален.

const arr = [1, 2, 3, 4, 5, 6];
arr.length = 5; // Set length to remove element
// [1, 2, 3, 4, 5]

Во-вторых, вы можете использовать функцию pop в прототипе массива в JavaScript. Метод pop удаляет последний элемент массива, возвращает этот элемент и обновляет свойство length. Метод pop изменяет массив, для которого он вызывается. Это означает, что в отличие от использования удаления последний элемент полностью удаляется, а длина массива уменьшается.

const arr = [1, 2, 3, 4, 5, 6];
arr.pop(); // returns 6
// [1, 2, 3, 4, 5]

Первый пункт

Метод shift() работает почти так же, как метод pop, за исключением того, что он удаляет первый элемент массива JavaScript вместо последнего. Когда элемент удаляется, оставшиеся элементы сдвигаются вниз.

const arr = [1, 2, 3, 4];
arr.shift(); // returns 1
// [2, 3, 4]

Прототип

По мере того, как ваш код становится больше, вам может понадобиться реализовать функциональность array.remove() в нескольких местах. Попытка использовать приведенные выше фрагменты кода во всех этих местах приведет к избыточности. Это означает, что вы можете написать прототип, который можно повторно использовать в вашем коде.

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

Object.defineProperty(Array.prototype, 'remove', {
    value: function () {
      if (this == null) {
        throw new TypeError('Array.prototype.remove called on null or undefined')
      }
      for (var i = 0; i < arguments.length; i++) {
        if (typeof arguments[i] === 'object') {
          if (Object.keys(arguments[i]).length > 1) {
            throw new Error('This method does not support more than one key:value pair per object on the arguments')
          }
          var keyToCompare = Object.keys(arguments[i])[0]

          for (var j = 0; j < this.length; j++) {
            if (this[j][keyToCompare] === arguments[i][keyToCompare]) {
              this.splice(j, 1)
              break
            }
          }
        } else {
          var index = this.indexOf(arguments[i])
          if (index !== -1) {
            this.splice(index, 1)
          }
        }
      }
      return this
    }
  })
Removing an integer value
var a = [1, 2, 3]
a.remove(2)
a // Output => [1, 3]
Removing a string value
var a = ['a', 'ab', 'abc']
a.remove('abc')
a // Output => ['a', 'ab']
Removing a boolean value
var a = [true, false, true]
a.remove(false)
a // Output => [true, true]
Removing an object value
var a = [{a: 1, b: 2}, {a: 2, b: 2}, {a: 3, b: 2}]
a.remove({a: 1})
a // Output => [{a: 2, b: 2}, {a: 3, b: 2}]

А если вы хотите одновременно удалить несколько элементов из массива, в котором есть дубликаты, можно использовать следующий прототип.

Object.defineProperty(Array.prototype, 'removeAll', {
    value: function(){
        if(this == null)
           throw new TypeError('Array.prototype.remove called on null or undefined')
          let newLength = 0;
          let arr = this;
          let result = [];
          for (var i = 0; i < arguments.length; i++) {
              for(const element of arr){
              if(arguments[i] != element){
                result[newLength++]=element;
              }
         }
         arr = result;
         result = [];
     }
    return arr;
    }
});
Example
[1,2,3,4,5,5,5,6,7].removeAll(5,4)
//Output => [1,2,3,6,7]

Конец

Вот так! Мы составили список всех возможных способов удаления элемента из определенной позиции в массиве. Также мы нашли способы удаления элементов из массива без определения его положения. Каждый из этих методов обладает уникальными качествами, которые могут помочь вам решить, будут ли они работать в вашем коде или нет.