Используете JavaScript операторы spread
и rest
только для расширения и оставшихся аргументов? Вот малоизвестные приёмы и примеры JavaScript.
1. Добавление свойств
Клонируем объект и одновременно добавим дополнительные свойства к "поверхностно" скопированному объекту.
В этом примере user
клонируется, и пароль password
добавляется в userWithPass
:
onst user = { id: 312, name: 'Пётр Иванов'} const userWithPass = { ...user, password: 'Пароль!' } user //=> { id: 312, name: 'Пётр Иванов' } userWithPass //=> { id: 312, name: 'Пётр Иванов', password: 'Пароль!' }
2. Объединение объектов
Объединим два объекта в один новый.
part1
и part2
соединяются в user1
:
const part1 = { id: 312, name: 'Пётр Иванов' } const part2 = { id: 312, password: 'Пароль!' } const user1 = { ...part1, ...part2 } //=> { id: 312, name: 'Пётр Иванов', password: 'Пароль!' }
Объекты также объединяются с помощью синтаксиса:
const partial = { id: 312, name: 'Пётр Иванов' } const user = { ...partial, id: 312, password: 'Пароль!' } user //=> { id: 312, name: 'Пётр Иванов', password: 'Пароль!' }
3. Исключаем свойства объекта
Свойства удаляются с помощью деструктуризации в сочетании с оператором rest
. Здесь password
деструктурируется (игнорируется), а остальные свойства возвращаются как rest
.
const noPassword = ({ password, ...rest }) => rest const user = { id: 312, name: 'Пётр Иванов', password: 'Пароль!' } noPassword(user) //=> { id: 312, name: 'Пётр Иванов' }
4. Динамическое исключение свойств
Функция removeProperty
принимает prop
в качестве аргумента. Используя вычисляемые имена свойств объекта, prop
можно динамически исключить из клона:
const user1 = { id: 312, name: 'Пётр Иванов', password: 'Пароль!' } const removeProperty = prop => ({ [prop]: _, ...rest }) => rest // ---- ------ // \ / // динамическая деструктуризация const removePassword = removeProperty('password') const removeId = removeProperty('id') removePassword(user1) //=> { id: 312, name: 'Пётр Иванов' } removeId(user1) //=> { name: 'Пётр Иванов', password: 'Пароль!' }
5. Примеры организации свойств в JavaScript
Иногда свойства находятся не в том порядке, в котором нужны. Используйте эти JavaScript примеры кода и пару приёмов, чтобы перенести свойства в верхнюю или нижнюю часть списка.
Чтобы переместить id
на первую позицию, добавьте id: undefined
в новый объект перед использованием оператора spread
:
const user3 = { password: 'Пароль!', name: 'Артём', id: 111 } const organize = object => ({ id: undefined, ...object }) // ------------- // / // переносим id на место первого свойства organize(user3) //=> { id: 111, password: 'Пароль!', name: 'Артём' }
Чтобы сделать password
последним свойством, сначала вынесите password
из объекта с помощью деструктуризации. Затем установите password
после использования spread
.
const user3 = { password: 'Пароль!', name: 'Артём', id: 111 } const organize = ({ password, ...object }) => ({ ...object, password }) // -------- // / // переносим password на последнюю позицию organize(user3) //=> { name: 'Артём', id: 111, password: 'Пароль!' }
6. Свойства по умолчанию
Свойства по умолчанию – значения, которые устанавливаются только тогда, когда отсутствуют в исходном объекте.
В этом примере user2
не содержит quotes
. Функция setDefaults
гарантирует, что quotes
присутствует во всех объектах. В противном случае устанавливается значение []
.
Вызов setDefaults(user2)
возвращает значение, которое включает quotes: []
.
При вызове setDefaults(user4)
, поскольку user4
уже хранит quotes
, это свойство не изменяется.
const user2 = { id: 288, name: 'Катя Петрова' } const user4 = { id: 270, name: 'Денис', quotes: ["У меня плохое предчувствие..."] } const setDefaults = ({ quotes = [], ...object}) => ({ ...object, quotes }) setDefaults(user2) //=> { id: 288, name: 'Катя Петрова', quotes: [] } setDefaults(user4) //=> { //=> id: 270, //=> name: 'Денис', //=> quotes: ["У меня плохое предчувствие..."] //=> }
Это также записывается по-другому, если хотите, чтобы значения по умолчанию отображались первыми, а не последними:
const setDefaults = ({ ...object}) => ({ quotes: [], ...object })
7. Переименование свойств JavaScript
Скомбинируем рассмотренные методы и создадим функцию для переименования свойств JavaScript.
Представьте некоторые объекты, у которых ID
заглавные, а нужны строчные. Сначала извлеките ID
из object
путём деструктуризации. Затем добавьте это свойство обратно как id
, когда применяете оператор spread
.
const renamed = ({ ID, ...object }) => ({ id: ID, ...object }) const user = { ID: 633, name: "Вася Чехов" } renamed(user) //=> { id: 633, name: 'Вася Чехов' }
8. Бонус! Добавление свойств с условием
Также язык программирования JavaScript позволяет добавить свойства с проверкой условия. В этом примере password
будет добавлен только тогда, когда password
верен!
const user = { id: 312, name: 'Пётр Иванов' } const password = 'Пароль!' const userWithPassword = { ...user, id: 312, ...(password && { password }) } userWithPassword //=> { id: 312, name: 'Пётр Иванов', password: 'Пароль!' }
Резюме
Здесь перечислены некоторые менее известные способы использования spread
и rest
. Если знаете дополнительные приёмы, расскажите об этом в комментариях. Каждый разработчик стремится улучшить программирование на JavaScript. Узнали новое, – будь то основы языка или JavaScript фреймворки, – делитесь с друзьями ;) Поможем друг другу!
Это перевод статьи.
Комментарии