Альтернативный подход к удалению свойств объекта без использования оператора удаления.
Большинству из нас в какой-то момент времени нужно было удалить свойство объекта по какой-либо причине (например, условие времени выполнения было успешно оценено, был получен ответ сервера и т. д.). В этих случаях, возможно, наиболее часто используемый подход заключался в использовании встроенного оператора JavaScript delete, который попытается удалить данное свойство из объекта, если это свойство существует. Это вполне разумный способ удаления свойства объекта в языке, но есть несколько предостережений, которые могут привести к прострелам, если не соблюдать осторожность. Самая заметная проблема этого подхода заключается в изначально изменяемой природе оператора delete. Он изменяет базовую ссылку на объект, тем самым изменяя исходный объект и вызывая потенциально нежелательные побочные эффекты.
В этой статье я сначала приведу пример удаления свойства из объекта с помощью оператора delete, а затем представлю более безопасный альтернативный подход, который использует деструктурирование объекта вместе с оператором rest для выполнения того же самого.
НЕ РЕКОМЕНДУЕМЫЙ изменчивый подход
Прежде всего, давайте удалим свойство из литерала объекта с помощью оператора delete:
Однако при использовании оператора delete следует отметить некоторые недостатки:
- Он изменит ссылку на объект в памяти (т. е. не создаст новую копию).
- Он способен удалять только одно свойство за раз. Это означает, что если ваш вариант использования требует удаления нескольких свойств, тогда ваш код будет выглядеть примерно так:
const person = {
name: "joe",
age: 33,
email: "[email protected]",
isOnline: false,
hasPets: true
}
delete person.email
delete person.isOnline
delete person.hasPets
РЕКОМЕНДУЕМЫЙ неизменяемый подход
Теперь давайте посмотрим на лучшую и более безопасную альтернативу удалению свойств объекта с помощью оператора/синтаксиса деструктурирования и остатка:
Обратите внимание, что при выполнении …objectRest мы создаем новую копию переданного объекта (в данном случае person) после удаления целевого свойства (name) путем динамической деструктуризации и псевдонима указанного свойства. Псевдоним в этом случае относится к именованию переменной, которая будет содержать значение ключа, который мы хотим удалить. Таким образом, мы можем ссылаться на него позже, если нам понадобится. При желании мы также можем создать новую копию исходного объекта, а затем использовать оператор delete для новой копии объекта.
Преимущество этого подхода заключается в возможности одновременного удаления нескольких свойств с помощью одной операции. Лично я нахожу это очень удобным и практичным:
const person = {
name: "joe",
age: 33,
email: "[email protected]",
isOnline: false,
hasPets: true
}
const { email, isOnline, hasPets, ...personRest} = person
В приведенном выше фрагменте кода вы можете видеть, что мы деструктурируем ключи, которые хотим удалить — email, isOnline и hasPets. Они хранятся в памяти как переменные, к которым при необходимости можно получить доступ.
Итак, в следующий раз, когда вам потребуется удалить свойство из объекта, вы можете сделать это неизменяемым и более безопасным способом :)
Последние мысли
Подводя итог, всякий раз, когда мне нужно удалить свойства объекта в JavaScript, я выбираю использование синтаксиса деструктурирования и остатка, поскольку считаю его более чистым и безопасным вариантом по сравнению с выполнением этого с помощью изменяемого оператора delete. Какой подход вы сейчас используете в проектах, над которыми работаете? Есть ли другая (лучшая?) альтернатива, кроме двух, упомянутых здесь? Дайте мне знать, что вы думаете. Успокойся и увидимся на следующем!
PS: я не измерял Big O ни одного из этих методов, поэтому рад услышать сравнительные тесты, если кто-то захочет ими поделиться :)
