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

Быстрый ответ

Для удаления объектов из массива по заданной паре ключ-значение используйте метод Array.prototype.filter(). Получим, например, массив без элементов, id которых равен 2:

let items = [{id: 1}, {id: 2}, {id: 3}];
// До свидания, объекты с id: 2 👋
items = items.filter(item => item.id !== 2);

Теперь в массиве items нет объектов с id: 2.

Удаление объектов с одинаковыми ключами

Чтобы исключить из массива несколько объектов с одинаковыми ключами, примените filter. Удаляем, например, всех дубликатов:

let diabolicalPlans = [{author: 'Doctor Evil'}, {author: 'Mini-Me'}, {author: 'Doctor Evil'}];
// Оставляем только одного автора 'Doctor Evil'
diabolicalPlans = diabolicalPlans.filter(plan => plan.author !== 'Doctor Evil');

Так мы оставили в массиве только одного автора "Doctor Evil".

Работа с вложенными объектами

Метод filter() одинаково хорошо работает и с вложенными объектами:

let spies = [
  { agent: { codeNumber: 1, name: 'James Bond' }},
  { agent: { codeNumber: 2, name: 'Ethan Hunt' }},
  { agent: { codeNumber: 3, name: 'Jason Bourne' }}
];
// Агенту с номером 2 отзываем лицензию!
spies = spies.filter(spy => spy.agent.codeNumber !== 2);

Таким образом, агент по имени Итан Хант (с кодом 2) был исключён из списка.

Визуализация

Предположим, что требуется удалить из массива все элементы с определённым значением:

Исходный набор: [🍎Яблоки, 🍊Апельсины, 🍌Бананы, 🍊Апельсины]

Как избавиться от апельсинов?

array = array.filter(fruit => fruit.type !== 'Orange');

После применения метода .filter() останутся только нужные элементы: Остаток: [🍎Яблоки, 🍌Бананы]

Теперь апельсинов нет! Подход аналогичен фильтрации объектов в массиве по значениям ключей.

Использование классического подхода

В классическом подходе применяются циклы и метод splice() для удаления элементов из массива.

Циклы и склеивание

let items = [{id: 1}, {id: 2}, {id: 3}];
for (let i = 0; i < items.length; i++) {
  if (items[i].id === 2) {
    // Исключаем непрошеного гостя!
    items.splice(i, 1); 
    break; // Удалять нужно только один элемент
  }
}

Здесь break применяется для удаления одного, конкретного элемента.

Подробнее об этом расскажет наш спикер на видео

Поиск индекса и спред-оператор

Современный подход ES6 включает использование findIndex и оператора расширения для создания нового массива без удаляемого элемента:

let items = [{id: 1}, {id: 2}, {id: 3}];
const pos = items.findIndex(item => item.id === 2);
if (pos !== -1) {
  // Формируем новый массив, оставив исходный нетронутым
  items = [...items.slice(0, pos), ...items.slice(pos + 1)]; 
}

Этот подход позволяет избежать случайных изменений в исходном массиве.

Настраиваем функцию удаления

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

function exterminateByAttr(arr, attr, value) {
  return arr.filter(item => item[attr] !== value);
}

let items = [{id: 1}, {id: 2}, {id: 3}];
// Удаляем элемент с id: 2. До свидания! 👋
items = exterminateByAttr(items, 'id', 2);

Данная функция позволит вам легко адаптироваться к разнообразным задачам.

Какой метод выбрать?

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

Один или несколько? Сколько удалять?

При использовании filter будут удалены все совпадающие элементы. Если нужно удалить только некоторые из них, циклы с splice и счётчиками станут надёжными инструментами.

Полезные материалы

1. Array.prototype.filter() – JavaScript | MDN — Подробный обзор метода filter() на MDN.
2. Array.prototype.find() – JavaScript | MDN — Если вы хотите работать с массивами, метод find() окажется полезным.
3. Array.prototype.findIndex() – JavaScript | MDN — Найдите нужный элемент с помощью метода findIndex().
4. Array.prototype.splice() – JavaScript | MDN — "Оказание первой помощи" массивам с помощью метода splice().
5. Arrays – JavaScript.Info — Погрузитесь в изучение массивов JavaScript и их методов.
6. ECMAScript 6: New Features: Overview and Comparison — Обзор возможностей ES6, включая стрелочные функции.
7. Read Understanding ECMAScript 6 | Leanpub — Узнайте, как с помощью деструктуризации в ES6 упростить работу со сложными структурами данных.