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

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

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

Мутабельные методы (изменяют исходный массив)

1. Array.prototype.splice() — самый универсальный метод

const fruits = ['яблоко', 'банан', 'апельсин', 'киви'];

// Удалить 1 элемент начиная с индекса 2
const removed = fruits.splice(2, 1);
console.log(fruits); // ['яблоко', 'банан', 'киви']
console.log(removed); // ['апельсин']

// Удалить 2 элемента начиная с индекса 1
fruits.splice(1, 2); // Теперь fruits = ['яблоко']

Особенности:

• Изменяет исходный массив
• Возвращает массив удаленных элементов
• Можно использовать для удаления и одновременной вставки новых элементов
• Работает за O(n) в худшем случае (при удалении элементов из начала массива)

2. Array.prototype.pop() — удаление с конца

const numbers = [1, 2, 3, 4];
const lastElement = numbers.pop();
console.log(numbers); // [1, 2, 3]
console.log(lastElement); // 4

3. Array.prototype.shift() — удаление с начала

const numbers = [1, 2, 3, 4];
const firstElement = numbers.shift();
console.log(numbers); // [2, 3, 4]
console.log(firstElement); // 1

Иммутабельные методы (создают новый массив)

1. Array.prototype.filter() — удаление по условию

const numbers = [1, 2, 3, 4, 5];

// Удалить все четные числа
const filteredNumbers = numbers.filter(num => num % 2 !== 0);
console.log(filteredNumbers); // [1, 3, 5]
console.log(numbers); // [1, 2, 3, 4, 5] — исходный массив не изменился

// Удалить конкретный элемент по значению
const withoutThree = numbers.filter(num => num !== 3);
console.log(withoutThree); // [1, 2, 4, 5]

2. slice() в комбинации с конкатенацией

const items = ['a', 'b', 'c', 'd'];

// Удалить элемент с индексом 2
const newItems = items.slice(0, 2).concat(items.slice(3));
console.log(newItems); // ['a', 'b', 'd']

// С использованием spread оператора (ES6+)
const newItems2 = [...items.slice(0, 2), ...items.slice(3)];
console.log(newItems2); // ['a', 'b', 'd']

3. Метод delete (не рекомендуется)

const arr = [1, 2, 3, 4];
delete arr[2];
console.log(arr); // [1, 2, empty, 4]
console.log(arr.length); // 4 — длина массива не изменилась!
console.log(arr[2]); // undefined

Проблема: delete удаляет значение, но не переиндексирует массив, оставляя "дыру".

Сравнение производительности и выбор метода

Критерии выбора метода:

1. Мутабельность vs Иммутабельность

   • Используйте мутабельные методы (splice, pop, shift), когда допустимо изменение исходного массива
   • Используйте иммутабельные методы (filter, slice), когда нужно сохранить исходные данные неизменными (React, Redux)

2. Производительность

   // Для больших массивов
   const largeArray = Array.from({length: 10000}, (_, i) => i);
   
   // Быстрее: удаление с конца (O(1))
   largeArray.pop();
   
   // Медленнее: удаление с начала (O(n))
   largeArray.shift();
   
   // Удаление по индексу в середине (O(n))
   largeArray.splice(5000, 1);
   

3. Удаление по значению vs по индексу

   // Удаление по индексу (точно знаем позицию)
   arr.splice(index, 1);
   
   // Удаление по значению (не знаем позицию)
   const index = arr.indexOf(value);
   if (index > -1) {
     arr.splice(index, 1);
   }
   
   // Или иммутабельный вариант
   const newArr = arr.filter(item => item !== value);
   

Особые случаи и лучшие практики

Удаление нескольких элементов

// Удалить все элементы, удовлетворяющие условию
const numbers = [1, 2, 3, 4, 5, 6];
for (let i = numbers.length - 1; i >= 0; i--) {
  if (numbers[i] % 2 === 0) {
    numbers.splice(i, 1);
  }
}
console.log(numbers); // [1, 3, 5]

Удаление из массивов объектов

const users = [
  {id: 1, name: 'Анна'},
  {id: 2, name: 'Борис'},
  {id: 3, name: 'Мария'}
];

// Удалить пользователя с id = 2
const updatedUsers = users.filter(user => user.id !== 2);
console.log(updatedUsers); // [{id: 1, name: 'Анна'}, {id: 3, name: 'Мария'}]

Выводы

Выбор метода зависит от конкретной ситуации:

• splice() — универсальный инструмент для удаления по индексу
• filter() — лучший выбор для иммутабельных операций и удаления по условию
• pop()/shift() — специализированные методы для удаления с концов массива
• Избегайте delete для массивов — он создает разреженные массивы

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