7 полезных уловок с rest параметрами и spread операторами на JavaScript объектах
1. Добавление свойств
Вы можете клонировать объект, параллельно добавляя дополнительные свойства клонированному объекту.
В этом примере user
клонирован и к нему добавлен password
в userWithPass
.
const user = { id: 100, name: 'Howard Moon'} const userWithPass = { ...user, password: 'Password!' } user //=> { id: 100, name: 'Howard Moon' } userWithPass //=> { id: 100, name: 'Howard Moon', password: 'Password!' }
2. Слияние объектов
Ещё вы можете слить два объекта в один новый.
part1
и part2
сливаются в user1
.
const part1 = { id: 100, name: 'Howard Moon' } const part2 = { id: 100, password: 'Password!' } const user1 = { ...part1, ...part2 } //=> { id: 100, name: 'Howard Moon', password: 'Password!' }
Объекты также можно слить и с таким синтаксисом:
const partial = { id: 100, name: 'Howard Moon' } const user = { ...partial, id: 100, password: 'Password!' } user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }
3. Исключить свойства объекта
Свойства можно удалить используя деструктуризацию в комбинации с rest оператором. Тут мы деструктуризируем password
и остальные свойства объекта отдаются как rest.
const noPassword = ({ password, ...rest }) => rest const user = { id: 100, name: 'Howard Moon', password: 'Password!' } noPassword(user) //=> { id: 100, name: 'Howard moon' }
4. Динамическое исключение свойств
Функция removeProperty бреёт props
как аргумент. Используя вычисление имен свойств prop
может быть исключен динамически из объекта клона.
const user1 = { id: 100, name: 'Howard Moon', password: 'Password!' } const removeProperty = prop => ({ [prop]: _, ...rest }) => rest // ---- ------ // \ / // dynamic destructuring const removePassword = removeProperty('password') const removeId = removeProperty('id') removePassword(user1) //=> { id: 100, name: 'Howard Moon' } removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }
5. Организация свойств
Иногда свойства находятся не в нужном нам порядке. Используя несколько трюков мы можем поставить нужные свойства в самый верх списка или же наоборот, в самый низ.
Чтобы отправить id
на первое место, добавьте id: undefined
новому объекту перед оператором расширения.
const user3 = { password: 'Password!', name: 'Naboo', id: 300 } const organize = object => ({ id: undefined, ...object }) // ------------- // / // move id to the first property organize(user3) //=> { id: 300, password: 'Password!', name: 'Naboo' }
Чтобы отправить password
на последнее место, то сначала деструктуризируйте password
из object
. Далее, выставьте password
за оператором расширения.
const user3 = { password: 'Password!', name: 'Naboo', id: 300 } const organize = ({ password, ...object }) => ({ ...object, password }) // -------- // / // move password to last property organize(user3) //=> { name: 'Naboo', id: 300, password: 'Password!' }
6. Дефолтные свойства
Дефолтные свойства это значения, которые будут выставлены только когда они не включены в оригинальный объект.
В нашем примере user2
не включает в себя quotes
. Функция setDefaults
проверяет есть ли в объектах quotes
, если нет, то он будет выставлен на []
.
Вызывая setDefaults(user2)
, отдающееся значение будет включать в себя quotes: []
.
Вызывая setDefaults(user4)
ничего не поменяется, потому что user4
уже содержит quotes
.
const user2 = { id: 200, name: 'Vince Noir' } const user4 = { id: 400, name: 'Bollo', quotes: ["I've got a bad feeling about this..."] } const setDefaults = ({ quotes = [], ...object}) => ({ ...object, quotes }) setDefaults(user2) //=> { id: 200, name: 'Vince Noir', quotes: [] } setDefaults(user4) //=> { //=> id: 400, //=> name: 'Bollo', //=> quotes: ["I've got a bad feeling about this..."] //=> }
Это также может быть написано таким образом:
const setDefaults = ({ ...object}) => ({ quotes: [], ...object })
7. Переименовывание свойств
Совмещая методики описанные выше, мы можем создать функцию которая переименовывает свойства.
Представьте, что у вас есть несколько объектов с ID
в верхнем регистре, которые должны быть в нижнем. Начните с деструктуризации ID
из объекта. Далее, верните его в объект как id
.
const renamed = ({ ID, ...object }) => ({ id: ID, ...object }) const user = { ID: 500, name: "Bob Fossil" } renamed(user) //=> { id: 500, name: 'Bob Fossil' }
8. Добавляем свойства по условию
В этом примере, password
будет добавлен только если password
определен.
const user = { id: 100, name: 'Howard Moon' } const password = 'Password!' const userWithPassword = { ...user, id: 100, ...(password && { password }) } userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }