Стрелочные функции - также называемые функциями «толстая стрелка» - это относительно новый способ написания кратких функций в JavaScript. Они были введены спецификациями ECMAScript 6 и с тех пор стали самой популярной функцией ES6. Стрелочные функции позволяют нам использовать оператор «толстая стрелка =› »для быстрого определения функций JavaScript с параметрами или без них. Мы можем опустить фигурные скобки и ключевые слова function и return при создании новой функции JavaScript для написания более короткого синтаксиса функции. Они не только экономят время, но и обеспечивают более понятные и удобочитаемые функции.
В этой статье давайте рассмотрим некоторые реальные сценарии создания стрелочных функций - с использованием ES6 и более старой нотации ECMAScript 5, чтобы мы могли увидеть, как эти два синтаксиса сравниваются друг с другом.
Нет параметров
Самый простой синтаксис стрелочной функции - это когда функция не имеет параметров. В приведенном ниже примере синтаксис ECMAScript 5 объявляет выражение функции и присваивает его переменной дня рождения. Он выводит на консоль простую текстовую строку с надписью «С днем рождения!»:
В синтаксисе стрелочной функции фигурные скобки и ключевые слова function и return исчезнут. Теперь вся функция занимает всего одну строку. Пустые круглые скобки указывают на то, что функция не имеет параметров, а толстая стрелка связывает тело функции с (в настоящее время несуществующими) параметрами:
Один параметр
Давайте расширим предыдущий пример одним параметром, а именно именем. Старый синтаксис ES5 принимает один параметр и добавляет его значение к возвращаемой строке:
Синтаксис стрелочной функции, по сути, делает то же самое. Нам нужно заключить параметр имени в круглые скобки перед жирной стрелкой и опустить ключевое слово return в функциональном блоке:
Два параметра
Мы можем использовать стрелочные функции с любым количеством параметров. Например, вот тот же пример с двумя параметрами, возрастом и именем. Теперь функция birthday () требует двух входов для возврата строки. Во-первых, давайте воспользуемся ECMAScript 5:
И вот тот же код с новой нотацией ES6:
Объектные литералы
Мы также можем использовать синтаксис стрелочной функции для объявления функций установки, которые позволяют пользователям устанавливать значение объектных литералов. Функция setBirthday () ниже позволяет пользователям установить имя и возраст человека, у которого есть день рождения:
Используя обозначение стрелочной функции, достаточно одной строки для определения одной и той же функции-установщика:
Манипуляции с массивами
Мы также можем использовать стрелочные функции для управления массивами JavaScript. Например, давайте посмотрим на массив people, который включает три объектных литерала, каждый из которых имеет свойство name и age:
Встроенный в JavaScript метод map () позволяет нам вызывать одну и ту же функцию для каждого элемента массива. Используя традиционную нотацию ES5, мы можем вернуть свойство name каждого человека следующим образом:
Используя обозначение стрелочной функции, мы можем выполнить ту же задачу в одной строке:
Когда не использовать стрелочные функции
Хотя у стрелочных функций много вариантов использования, они также имеют некоторые ограничения. Есть несколько сценариев, когда мы не можем или не должны использовать синтаксис стрелочной функции.
Самое главное, мы не можем создавать конструкторы со стрелочными функциями. Если мы используем ключевое слово new вместе с синтаксисом толстой стрелки, консоль выдаст ошибку. Это происходит потому, что JavaScript обрабатывает стрелочные функции так же, как методы объекта. В результате у них не может быть собственных методов, что было бы важной характеристикой объектов JavaScript. Кроме того, мы не можем использовать синтаксис ES6 для объявления объектных литералов и функций обратного вызова, содержащих методы, использующие ключевое слово this, поскольку стрелочные функции обрабатывают это по-другому.
Вывод
Стрелочные функции предоставляют разработчикам удобное сокращение для написания функциональных выражений в JavaScript. Синтаксис с толстой стрелкой имеет множество вариантов использования, поэтому он быстро стал любимой функцией ES6 в сообществе JavaScript. При последовательном использовании новая компактная нотация может сэкономить много времени и трафика, а также улучшить читаемость кода.
Спасибо за чтение.
