Я изучаю JavaScript уже две недели. Я бы сказал, что это ужасный язык для изучения, но замечательный в использовании. У него некрасивый синтаксис и абсурдное отношение к ошибкам .js. Однако чем больше я узнаю, тем больше красоты вижу. Например, меня очень обрадовали трюки с деструктуризацией. Чтобы охватить их, я воспользуюсь примером упражнения, которое наш тренер по разработке программного обеспечения, Джейн Коста, подготовила для нас, чтобы мы могли освоиться с языком (полный код здесь):
Изначально (часть) мой код выглядел следующим образом:
В этом фрагменте кода вы можете увидеть две огромные функции. Первый - toggleShow () (строки 1–18), отвечающий за отображение / скрытие карточки животного, содержащий eventListener, который передает аргумент объекта (животного) в editAnimal () (строки 20–40). Они очень красиво выглядят? Неа. Они не СУХИЕ.
Начните деструктуризацию.
Что, если бы я сказал вам, что есть способ лучше? На самом деле есть. JavaScript позволяет нам делать такие трюки:
Или в виде кода:
Короче говоря, то, что раньше занимало 5 строк кода, теперь может быть выражено в одной. Также обратите внимание, что я вызываю только ключи во вновь созданной форме. Как видите, я взял деструктурированный объект Animal в его ключи (вверху, строка 5).
Ключи могут быть расположены в случайном порядке, поскольку объекты (в отличие от массивов) представляют собой неупорядоченные коллекции практически на любом языке (хэши в Ruby, словари в Python). Вы также можете опустить некоторые нерелевантные ключи, потому что это не похоже на заботу о JavaScript.
Сделаем еще один шаг. Как насчет этого:
Или во фрагменте кода:
Как видите (строка 1), я заменил предыдущий аргумент «животное» его деструктурированной версией. Я также избавился от переменной, потому что теперь она нам больше не нужна. Теперь внутри этой функции я могу вызывать только ключи без объекта, которому они принадлежат.
А что будет, если мы имеем дело с вложенным объектом? Допустим, у нашей бабочки три разных хобби, каждое из которых имеет свои категории:
{
"animals": [
{
"name": "Doctor Pete",
"species": "Butterfly",
"ferociousness": "1",
"hobby": {
"main": "bagels",
"weird": "singing",
"mundane": "flying around joyfully"
},
"image": "https://ichef.bbci.co.uk/news/660/cpsprodpb/68BE/production/_84441862_84feb9aa-fb40-4be7-86c7-03051264c9fb.jpg",
"id": 21
}
]
}
Скажем, мы хотим просто показать два из трех хобби. Мы бы сделали это так:
let ({name, hobby: {main, weird}, image, species, ferociousness}) = animal
А что, если мы действительно хотим, чтобы обычное хобби было по умолчанию?
let ({name, hobby: {main, weird, mundane = "enjoying sunsets"}, image, species, ferociousness}) = animal
Еще один удобный пример работы с DOM - формы. Мой исходный код выглядел так:
Ничего страшного, это работает, но много повторений. Начнем с тела нашего запроса (строки 12–17). Знаете ли вы, что если вы назовете свои константы так же, как ключи, вы можете позволить себе немного лениться? Смотри сюда:
Или во фрагменте кода (строка 12):
Это лучше, но я полагаю, что мы могли бы использовать значения из форм как минимум в двух функциях. Как насчет того, чтобы извлечь вводимые пользователем данные во вспомогательную функцию?
Или во фрагменте кода:
Как видите, теперь все вводимые пользователем данные (строки 3–7) из обеих форм будут доступны глобально путем вызова функции (строки 12 и 16). И, наконец, эту одну длинную функцию можно разделить на три меньших: updateFrontEnd (), updateBackEnd () и update ().
