Найти тему
Nuances of programming

Rest и Spread в JavaScript. Возможности, о которых вы не знали

Источник: Nuances of Programming

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

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

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

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

-2

2. Объединение объектов

Здесь мы объединяем два объекта part1 и part2, в user1.

-3

Можно использовать другой синтаксис:

-4

3. Удаление свойств объекта

Свойства объекта можно удалить, с помощью деконструкции и оператора rest. Здесь мы исключаем password и собираем оставшиеся свойства в массив rest.

-5

4. Динамическое удаление свойств

Функция removeProperty принимает в качестве аргумента prop. Используя вычисленные имена объектов, prop можно удалить из клона динамически.

-6

5. Упорядочивание свойств

Когда свойства не в том порядке, в котором нам нужно, мы можем упорядочить их, двигая свойство в начало или в конец списка.

Чтобы поднять id на первую позицию, добавьте id: undefined к новому объекту перед тем, как расширить object.

-7

Чтобы переместить password к последнему свойству, сначала исключите password из object. Затем добавьте password после операции …object.

-8

6. Свойства по умолчанию

Дефолтные свойства — это значения, которые устанавливаются только в том случае, если они не включены в исходный объект.

В этом примере, user2 не содержит quotes. Функция setDefaults проверяет все объекты на наличие значения quotes, если оно отсутствует, то устанавливается [].

При вызове setDefaults(user2), возвращаемое значение будет включать quotes: [].

При вызове setDefaults(user4), свойство не будет модифицировано, потому что user4 уже содержит quotes.

-9

Можно записать по-другому, если вы хотите, чтобы дефолтные значения появлялись первыми, а не последними:

const setDefaults = ({ ...object}) => ({ quotes: [], ...object })

7. Переименование значений

Комбинируя вышеупомянутые техники, можно создать функцию для переименования свойств.

Например, нам нужно изменить прописные символы на строчные в свойстве (ID) объекта. Для этого запишите свойство, как id, во время расширения объекта.

-10

8. Бонус. Добавление условных свойств

Вы можете также добавлять условные свойства. В этом примере, password будет добавлен только при истинности password.

-11

Читайте нас в телеграмме и vk

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