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

2
7277
Добавить в избранное

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

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

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

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

В этом примере user клонируется, и пароль password добавляется в userWithPass:

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

Объединим два объекта в один новый.

part1 и part2 соединяются в user1:

Объекты также объединяются с помощью синтаксиса:

3. Исключаем свойства объекта

Свойства удаляются с помощью деструктуризации в сочетании с оператором rest. Здесь password деструктурируется (игнорируется), а остальные свойства возвращаются как rest.

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

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

5. Примеры организации свойств в JavaScript

Иногда свойства находятся не в том порядке, в котором нужны. Используйте эти JavaScript примеры кода и пару приёмов, чтобы перенести свойства в верхнюю или нижнюю часть списка.

Чтобы переместить id на первую позицию, добавьте id: undefined в новый объект перед использованием оператора spread:

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

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

Свойства по умолчанию – значения, которые устанавливаются только тогда, когда отсутствуют в исходном объекте.

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

Вызов setDefaults(user2) возвращает значение, которое включает quotes: [].

При вызове setDefaults(user4), поскольку user4 уже хранит quotes, это свойство не изменяется.

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

7. Переименование свойств JavaScript

Скомбинируем рассмотренные методы и создадим функцию для переименования свойств JavaScript.

Представьте некоторые объекты, у которых ID заглавные, а нужны строчные. Сначала извлеките ID из object путём деструктуризации. Затем добавьте это свойство обратно как id, когда применяете оператор spread.

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

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

Резюме

Здесь перечислены некоторые менее известные способы использования spread и rest. Если знаете дополнительные приёмы, расскажите об этом в комментариях. Каждый разработчик стремится улучшить программирование на JavaScript. Узнали новое, – будь то основы языка или JavaScript фреймворки, – делитесь с друзьями 😉 Поможем друг другу!

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

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

Интересуетесь фронтендом?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Комментариев: 2

  1. Немного не понял последний код

  2. Зачем нужен п. 3, если есть delete?

Добавить комментарий