Удаление ключа-значения из объекта JavaScript: методы и примеры

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

Если вам требуется срочно найти способ удаления свойства из объекта в JavaScript, воспользуйтесь оператором delete:

let obj = {a: 1, b: 2, c: 3};
delete obj.b; // Зачем нам 'b'?
// Объект obj после удаления свойства выглядит так: {a: 1, c: 3}

При использовании delete вы модифицируете объект во время выполнения кода. Свойство obj.b будет безвозвратно удалено.

Особенности работы оператора delete

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

• Удаляемое свойство полностью исчезает, оно не преобразуется в undefined.
• delete не влияет на цепочку прототипов, сохраняя свойства прототипов нетронутыми.
• Он не способен удалять свойства, которые установлены как неконфигурируемые.

Альтернативы оператору delete

Если вы не желаете использовать delete, в JavaScript есть альтернативы, которые помогут избежать мутаций или сделают код более модульным:

Спред-оператор и деструктурирующее присваивание

Вы можете создать копию объекта, исключив определённые свойства, воспользовавшись деструктурирующим присваиванием и спред-оператором:

let { b, ...rest } = {a: 1, b: 2, c: 3};
// 'b' в копию не попадает, остальная часть копии выглядит так: {a: 1, c: 3}

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

Object.assign: универсальный инструмент

С помощью Object.assign можно создать новый объект, исключив некоторые свойства:

let newObj = Object.assign({}, obj);
delete newObj.b; // 'b' утрачено, исследователи наверняка оценят...

Методы map/filter-reduce: реализуйте собственную функцию

Разработайте вспомогательную функцию для однократного удаления свойств:

const omit = (obj, prop) => Object.keys(obj).reduce((result, key) => {
  if (key !== prop) result[key] = obj[key]; // Сегодня 'prop' не в числе прочих
  return result;
}, {});

Ограничения оператора delete

Оператор delete не является волшебной палочкой. Важно понимать его ограничения:

• Использование delete может негативно сказаться на производительности из-за особенностей оптимизации в движках JavaScript.
• Чрезмерное использование delete может вызвать экспансию глобального пространства имён.
• Некоторые свойства невозможно удалить с помощью delete, в частности те, что установлены как неконфигурируемые.

Лучшие практики: рекомендации по использованию

Чтобы ваш код не превратился в "спагетти", следуйте этим советам при использовании delete:

• Используйте логичные имена и чёткую структуру вашего кода. Это облегчит понимание и поддержку кода.
• Не забывайте документировать случаи использования delete для лучшего понимания его влияния на состояние программы.
• Если производительность является приоритетом, стоит рассмотреть альтернативы использованию delete.

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

Воспринимайте delete как процедуру упорядочивания книжной полки, где каждая книга представляет собой свойство объекта JavaScript:

let shelf = {
  "sciFi": "Дюна",
  "fantasy": "Властелин колец",
  "mystery": "Шерлок Холмс",
  "nonFiction": "Sapiens"
};

Решив избавиться от книги в жанре mystery, вы применяете delete:

delete shelf.mystery; // 'Шерлок Холмс' больше не на полке.

Вот как полка выглядела до и после:

До: [📚🔍, 📚🧬, 📚🏰, 📚🧠]
После: [📚🧬, 📚🏰, 📚🧠]
// Без "Шерлока Холмса" полка выглядит более упорядочено.

Применение в реальных ситуациях

В реальной жизни структуры данных часто меняются, и delete может оказаться полезным:

Динамическое удаление свойства

Если вы заранее не знаете, какое свойство необходимо удалить:

let keyToDelete = 'dynamicKey';
delete obj[keyToDelete]; // Удалено выбранное свойство...

Массовое удаление свойств

Для одновременного удаления нескольких свойств:

['prop1', 'prop2', 'prop3'].forEach(prop => delete obj[prop]); // Проведено массовое удаление свойств!

Условное удаление свойства

Если решение о удалении свойства зависит от определенных условий:

if (shouldDeleteProp) {
  delete obj.conditionalProp; // Удалено свойство при наличии соответствующего условия.
}

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