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

0
14967

Используете 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:

РУБРИКИ В СТАТЬЕ

МЕРОПРИЯТИЯ

Комментарии 0

ВАКАНСИИ

Middle\Senior .Net разработчик
от 120000 RUB до 165000 RUB
Unity 3D developer
по итогам собеседования
Tableau developer
по итогам собеседования
Unity Developer
Москва, по итогам собеседования

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

BUG