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