Стрелочные функции в ES6 прикольно выглядят с первого раза, но полезны, когда вы привыкнете к синтаксису. В целом, они работают быстрее, чем обычные функции JavaScript, и не привязываются к этому — об этом я расскажу ниже.

Более короткие функции

Толстая стрелка заменяет необходимость вводить «функция (…) { }», включая «возврат» на следующей строке. Ниже приведен базовый пример функции жирной стрелки:

Еще лучше, если у вас есть только один параметр в (x, y), тогда вам даже не нужны круглые скобки вокруг них! Вы даже можете убрать фигурные скобки после жирной стрелки. Функции часто умещаются на одной или двух строках, и это сбивает с толку при первом знакомстве со стрелочными функциями.

Нет привязки «это»

Это — важное понятие при использовании JavaScript, и его следует понимать, если вы хотите продолжать совершенствовать и использовать современный JavaScript в будущем. В отличие от обычной функции, стрелочная функция не связывает this. this не привязывается к этой функции, он наследуется от родительской области (или лексически).

В этом примере из ES6 для всех Уэса Боса он ищет, что происходит, когда кто-то щелкает элемент с классом ящик. Используя функцию стрелки, он смотрит, что возвращается с помощью this. Когда он смотрит в консоль, это находится в окне. this не связан внутри этой функции и, следовательно, наследуется от своей родительской области — в данном случае от окна. Далее он объясняет, что это плохой вариант использования стрелочной функции и не использовать их просто потому, что нужно меньше печатать.

Примеры использования и преимущества стрелочных функций

Стрелочные функции полезны в нужных местах и ​​требуют намного меньше ввода при использовании обычных функций. Используйте их в нужных местах и ​​знайте, к какой области относится this!

Лучшие варианты использования включают в себя:

  • С более короткими функциями, заменяя много печатать «функция…»
  • Безопасность прицела — благодаря функциям стрелок вы знаете, где находится прицел, а обычные функции могут торчать, чтобы помочь его найти.
  • Отображение массива

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

Параметры по умолчанию

Вместо значения по умолчанию «undefined» вы можете установить значение по умолчанию в ES6 и написать более чистый код. Значения по умолчанию позволяют определять параметры со значениями по умолчанию, если значение не передается.

Ниже приведен пример из MDN, который показывает старый метод установки значений по умолчанию по сравнению с установкой значения по умолчанию для «b» в ES6.

Значения по умолчанию позволяют легко установить резервные значения прямо внутри вашей функции, чтобы она продолжала работать, даже если ничего не передается. В классе Уэса Боса, о котором я упоминал ранее, он использует хороший пример значений по умолчанию в своем калькуляторе чаевых для последовательной переменной, такой как налог. Он устанавливает налоговую ставку прямо в своей функции и может изменить общую сумму и сумму чаевых, которые будут определены позже.

Варианты использования и преимущества параметров по умолчанию

Значения по умолчанию помогают избежать проблем с неопределенными и ложными значениями. Однако вышеупомянутый пример от Wes Bos — лучший вариант использования значений по умолчанию. Когда есть непротиворечивая переменная, установка значения по умолчанию может помочь сохранить ваши функции и методы более чистыми без необходимости указывать каждый раз. Я встречал комментарии о том, что это похоже на некоторый синтаксис Ruby (с которым я совсем не знаком), так что это хорошо!

Кажется, что значения по умолчанию просто имеют смысл и помогают выявить проблемы, если они возникают в более сложных функциях/методах. Он очищает код (просто посмотрите на пример выше) и по-прежнему легко читается. Я вижу, что использую значения по умолчанию для вычислений, таких как калькулятор чаевых Уэса, и другие согласованные переменные, поскольку я продолжаю писать более сложные функции JavaScript.

Пусть и Конст

И последнее — но не менее важное — это let и const. Короче говоря, это новые формы использования всем знакомого «var», но пока не просто заменяйте каждый var!

Постоянная

Сокращенно от «константа», const — это переменная, которую вы не хотите нигде повторять или вообще переназначать.

Вот предупреждение, которое вы получите, если попытаетесь использовать несколько const переменных:

Позволять

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

Где var — область действия функции, const и let — область действия блока. Это означает, что каждый раз, когда есть {фигурные скобки}, вы попадаете в область действия блока. Возьмем этот пример из статьи Веса Боса Let vs. Const

Вы можете использовать переменную «winner» дважды, так как второй элемент let имеет область действия блока и является совершенно отдельной переменной.

Многие люди стараются вообще не использовать «var» в своем коде при написании на ES6, так как его можно легко заменить на const и let. В целом, вот лучшее эмпирическое правило для трех объявлений переменных:

Варианты использования и преимущества «const» и «let»

Основные преимущества упомянуты выше и связаны с использованием каждой формы. В целом, у вас может быть несколько одинаковых «var», и это может привести к большому количеству ошибок в вашем коде. Попробуйте поэкспериментировать с const и let и посмотрите, как изменится ваш JavaScript. Используйте const для чего-то, что не меняется, например имя, и используйте let для переменных, которые могут изменяться или переназначаться, например счет (из примера Уэса выше).

Подробнее ES6

Да, в ES6 есть много других очень полезных функций, таких как деконструкция, литералы шаблонов, оператор распространения, for of/each и многое другое. Тем не менее, это только с моей точки зрения новичка, и то, что я могу найти полезным для себя сразу, вероятно, не будет полезно для того, как каждый пишет свой собственный JavaScript. Важной частью является понимание концепций, которые вы хотите использовать, и практика с ними.

Я планирую продолжать практиковать свои навыки ES6 и использовать много констант, и пусть я поправлюсь!

Ознакомьтесь с другими сообщениями в моем блоге и следите за тем, как я продолжаю учиться! Если у вас есть какие-либо вопросы, комментарии или способы улучшения, пожалуйста, дайте мне знать и сделайте представление!

Первоначально опубликовано на сайте benthompson.online 1 октября 2017 г.