Примеры JavaScript: 7 приёмов, о которых вы не знали

Используете JavaScript операторы spread и rest только для расширения и оставшихся аргументов? Вот малоизвестные приёмы и примеры JavaScript.

Примеры JavaScript: 7 приёмов, о которых вы не знали

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 фреймворки, – делитесь с друзьями ;) Поможем друг другу!

Это перевод статьи.

Изучаем программирование на JavaScript:

МЕРОПРИЯТИЯ

Комментарии

ВАКАНСИИ

Добавить вакансию

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ