Evgeny Vladimirovich
Apr 29 · 4 min read

Операторы Rest (остаток) и Spread (расширение) можно использовать не только для разделения и соединения отдельных значений массивов. Здесь я собрал 7 малоизвестных способов использования этих операторов.

1. Добавление свойств

Клонирование объекта с одновременным добавлением дополнительных свойств к клонируемому объекту.

В этом примере мы клонируем user в userWithPass и одновременно добавляем к нему password.

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 принимает в качестве аргумента prop. Используя вычисленные имена объектов, 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 к новому объекту перед тем, как расширить object.

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 после операции …object.

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, во время расширения объекта.

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!' }

Перевод статьи Joel Thoms: 7 Tricks with Resting and Spreading JavaScript Objects

NOP::Nuances of programming

Перевод и адаптация статей в сфере IT

Evgeny Vladimirovich

Written by

NOP::Nuances of programming

Перевод и адаптация статей в сфере IT

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade