ES6 синтаксис стрелочные функции, объявление переменных, применение методов


Содержание материала:

JavaScript: стрелочные функции

Стрелочные функции были введены в ES6 / ECMAScript 2015, и с момента их появления они навсегда изменили то, как код JavaScript выглядит (и работает).

На мой взгляд, это изменение было настолько радушным, что теперь вы редко видите использование ключевого слова function в современных кодовых базах. Хотя оно все еще используется.

Визуально это простое и долгожданное изменение, которое позволяет вам писать функции с более коротким синтаксисом:

Если тело функции содержит только одну инструкцию, вы можете опустить скобки и записать все в одну строку:

Параметры передаются в скобках:

Если у вас есть один (и только один) параметр, вы можете полностью опустить скобки:

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

Неявный возврат

Стрелочные функции позволяют получить неявный возврат: значения возвращаются без использования ключевого слова return .

Это работает, когда в теле функции есть однострочный оператор:

Другой пример, при возврате объекта, не забудьте заключить фигурные скобки в круглые:

Как работает this в стрелочной функции

this это концепция, которую сложно понять, так как она сильно варьируется в зависимости от контекста, а также зависит от режима JavaScript (strict режима или нет).

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

Когда определяется как метод объекта, в обычной функции this ссылается на объект, так что вы можете сделать:

Вызов car.fullName() вернет «Ford Fiesta» .

this в стрелочной функции наследуются от контекста исполнения. Стрелочная функция вообще не связывается с this , поэтому ее значение будет найдено в стеке вызовов, поэтому в этом коде car.fullName() не будет работать и вернет строку «undefined undefined» :

Из-за этого стрелочные функции не подходят в качестве методов объекта.

Эти функции также нельзя использовать в качестве конструкторов, так как создание экземпляра объекта вызовет ошибку TypeError .

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

5 недостатков JavaScript, исправленных в ES6

Нововведения ECMAScript 6 (ES6) можно условно разделить на являющиеся синтаксическим сахаром (например, class), улучшающие JavaScript (например, import) и исправляющие недостатки JavaScript (например, ключевое слово let). В большинстве статей они комбинируются. Я хочу сосредоточиться только на ключевых особенностях ES6, исправляющих слабые стороны языка.

Ок, давайте начнем.

1. Блочная область видимости

В ES5 есть только область видимости уровня функции (т.е. необходимо оборочивать код в функцию для создания области видимости), что всегда вызывало массу вопросов. В ES6 появилась область видимости уровня блока (область видимости в пределах фигурных скобок), для этого необходимо использовать ключевые слова let или const вместо var.

Предотвращает подъем переменных за пределы области видимости

Пример ниже показывает, что переменная bonus не поднимается за пределы блока if.

Предотвращает двойное объявление переменной

В ES6 недопустимо двойное объявление переменной, если вы объявляете ее с помощью let или const в той же области видимости. Это помогает избежать двойного определения функций из разных библиотек (как функция ‘add’ в примере ниже).

Устраняет необходимость IIFE

В ES5, как в примере ниже, мы должны были использовать немедленно вызываемые функции, чтобы избежать попадания переменных в глобальную область видимости. В ES6 мы можем просто использовать для этого фигурные скобки (<>) и ключевые слова let и const.

Babel — инструмент для конвертации ES6 в ES5

В конечном итоге у нас должна быть возможность запустить ES6 код в обычном браузере. Babel — это наиболее популярный инструмент для конвертации ES6 в ES5. Он доступен как консольная утилита, модуль Node.js или online-конвертер. Я использую модуль node.js для своих приложений и online-версию для быстрого просмотра различий.

На рисунке ниже показано, как Babel переименовывает переменные, чтобы эмулировать работу let и const!

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

В ES5, если у вас есть функция внутри цикла (например, for(var i = 0; i делает this лексическим автоматически.

На рисунке ниже показано, как Babel конвертирует стрелочные функции в функции ES5, чтобы они работали в текущих версиях браузеров.

3. Работа с arguments

В ES5 arguments ведет себя как массив (мы можем пройтись по нему циклом), но это не массив. Т.е. методы массивов, такие как sort, slice и т.д., не доступны.

В ES6 мы можем использовать так называемые rest-параметры. Они представляют собой многоточие и название объекта, например . args. Rest-параметр является массивом, можно использовать все методы массива.

4. Классы

Концептуально, в JavaScript нет такого понятия как класс, в отличие от объектно-ориентированных языков программирования, таких как Java. Но разработчики долгое время использовали функции, которые создавали объекты при вызове с ключевым словом new.

И поскольку JS не поддерживал классы, а лишь их эмуляцию с помощью прототипов, такой синтаксис вызывал сложности и у опытных JS-разработчиков, и у новичков, желающих использовать традиционные концепции OOP. Это особенно актуально для таких вещей как: наследование, вызов метода родительского класса и т.д.

В ES6 появился новый синтаксис, схожий с соответствующим в других языках программирования. Ниже показано сравнение классов ES5 и ES6.

5. Строгий режим

Строгий режим («use strict») помогает обнаружить наиболее общие проблемы JavaScript и повысить «безопасность». В ES5 строгий режим не обязателен, но в ES6 он необходим для большинства особенностей. Поэтому большинство людей используют строгий режим по умолчанию, а многие инструменты, такие как Babel, автоматически добавляют «use strict» в начало файла, позволяя нам писать лучший JavaScript.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

Стрелочные функции в ES6.

Всем привет! В этой статье мы рассмотрим, что такое стрелочные функции в ES6 и как их использовать.

Стрелочные функции – это функции, которые записываются при помощи оператора «стрелка»(=>).

Давайте сразу рассмотрим пример:

let add = (x, y) => x + y;
console.log(add(5, 2));

В результате выполнения данной функции в консоли мы увидим число 7.

Сначала, в круглых скобках мы передаем аргументы, далее ставим знак стрелочки, а потом пишем код самой функции. В нашем случае она просто принимает два числа и складывает их. По идее, это то же самое, что и function expression в ES5. Если вы используете Babel или подобные компиляторы, то, скорее всего, они напишут что-то вроде этого:

var add = function add(x, y) <
return x + y;
>;

Если ваша функция принимает только один параметр, круглые скобки ставить необязательно.

let square = x => x*x;

Такая функция принимает только один аргумент и возводит переданное число в квадрат.

Функция без параметров:

Если ваша функция содержит в себе несколько строк, то, во-первых, нужно использовать фигурные скобки, а во-вторых, обязательно написать, что функция возвращает, т.е. использовать ключевое слово return.

let multiply = (x, y) => <
let result = x*y;
return result;
>;

Если вам нужно вернуть литерал объекта, то его нужно обернуть в круглые скобки:

Самовызывающаяся функция выглядит следующим образом:

Если вам что-то не понятно, то советую обратить внимание на видеокурс JavaScript, jQuery и Ajax с Нуля до Гуру.

А у меня на этом все. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):


Она выглядит вот так:

Топ-пост этого месяца:  Как протестировать в Angular Observable возможные ошибки, использование promis и defer
  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    ES6 синтаксис: стрелочные функции, объявление переменных, применение методов

    В ES6 есть новый способ создания функций — С помощью оператора Стрелка => . Такие функции называются стрелочные. Они предлагают более компактный синтаксис. Они не имеют имени и они по-своему работают с this .

    Первое, что мы сделаем, это запустим скрипт Babel, который будет следить за файлами и при их изменении создавать свежие версии.

    Откроем папку проекта в командной строке (КС). Вводим команду:

    ES6 синтаксис: стрелочные функции, объявление переменных, применение методов

    Ежедневная эпопея статей «ES6 изнутри» продолжается. Сегодня мы обсудим стрелочные функции. В прошлых статьях мы познакомились с деструктированием и литералами шаблона. Я стараюсь разобрать всё, что относится к набору фич ES6, и наконец добраться до ES7. Также я заметил, что, когда я пишу про эти фичи, они навсегда врезаются мне в память.

    Раз вы читаете эти статьи, предлагаю установить Babel и babel-node , и повторять за мной, копируя отдельные примеры в файл. Можете затем запустить их при помощи babel-node yourfile в терминале. Самостоятельный запуск этих примеров, и, возможно, небольшая их корректировочка помогут лучше усвоить эти новые фичи — даже если вы просто добавите оператор console.log , чтобы разобраться в происходящем.

    Итак, встречайте наших сегодняшних гостей.

    В прошлых статьях мы уже затрагивали стрелочные функции вскользь, применяя их мимоходом и не рассуждая о происходящем. Эту статью мы посвятим преимущественно стрелочным функциям, а остальной ES6 отложим до лучших времен. Я считаю, что это лучший способ писать о ES6 — выводить на первый план одну фичу в каждой статье, постепенно добавляя другие и объединяя разные идеи, чтобы понимать, как они все взаимодействуют. Я часто наблюдал, как несколько фич ES6 вместе образуют суперфичу, и это потрясающе. И всё же важно погружаться в синтаксис и фичи ES6 постепенно, а не бросаться в воду, потому что чем дальше, тем она горячее, и к этому лучше привыкать постепенно — вероятно это была плохая аналогия, но двигаемся дальше.

    Применение стрелочных функций в JavaScript

    Стрелочные функции доступны во многих современных языках, и как же мне их недоставало несколько лет назад, когда я переходил с C# на JavaScript. К счастью, теперь они появились в ES6, а значит доступны нам в JavaScript. Их синтаксис довольно выразителен. У нас уже есть анонимные функции, но порой приятно иметь краткую альтернативу.

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

    А вот как это выглядело бы в ES5:

    Если нужно объявить больше аргументов (или аргументов нет), то необходимы круглые скобки.

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

    Также с помощью синтаксиса круглых скобок можно добавить больше аргументов.

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

    • (num, index) => лишь чуть-чуть короче function (num, index)
    • Запись function позволяет именовать метод, улучшая качество кода.
    • Когда у функции есть множество аргументов и операторов, то, на мой взгляд, шесть дополнительных символов не сыграют особой роли.
    • Однако, с именованным методом код станет настолько понятнее, что те шесть лишних символов (плюс имя метода) сполна себя оправдают

    Далее, если нам нужно вернуть литерал объекта, то придётся обернуть выражение в круглые скобки. Тем самым литерал объекта не будет интерпретироваться, как блок оператора (что привело бы к незаметной ошибке, или того хуже, к ошибке синтаксиса, поскольку number: n — недопустимое выражение в примере ниже. В первом примере код интерпретируется как метка number , после которой идет выражение n . Поскольку мы находимся в блоке и ничего не возвращаем, на выходе каждый элемент массива получит значение undefined . Во втором случае, после метки и выражения n , , something: ‘else’ не имеет смысла для компилятора, и выбрасывается SyntaxError .)

    Огромный плюс стрелочных функций в ES6 — они связаны со своей лексической областью. Это значит, что можно попрощаться с var self = this и похожими хаками, — например .bind(this) — чтобы сохранить контекст в пределах глубоко вложенных методов.

    Помните, что связывание лексического this в стрелочных функциях ES6 означает, что .call и .apply не смогут изменить контекст. Однако, это скорее фича, а не баг.

    Заключение

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

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

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

    P.S. Это тоже может быть интересно:

    Если вам понравилась статья, поделитесь ей!

    Когда (и почему) стоит использовать стрелочные функции ES6

    Сперва, хочу поделится ссылкой на свой не коммерческий проект — WebDevHub . Это агрегатор статей, видео, прямых трансляций и подкастов на тему веб разработки. Все что вам интересно в одном месте!

    Стрелочная функция, несомненно, является одной из наиболее популярных функций ES6. Она представляет новый способ написания кратких функций.

    Вот функция, написанная в синтаксисе ES5:

    Теперь вот та же функция, но уже виде стрелочной функции:

    Это намного короче! Мы можем опустить фигурные скобки и оператор return из-за неявных возвратов (но только если нет блока — подробнее об этом ниже).

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

    Вариации

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

    1. Без параметров

    Если параметров нет, вы можете поместить пустые круглые скобки перед =>.

    На самом деле вам даже не нужны скобки!

    2. Одиночный параметр

    Круглые скобки необязательны:

    3. Несколько параметров

    Для этих функций требуются скобки:

    4. Заявления (в отличие от выражений)

    В своей основной форме выражение функции выражает значение, а оператор функции выполняет действие.

    При использовании стрелочной функции важно помнить, что оператор должен иметь фигурные скобки. Когда фигурные скобки присутствуют, вам всегда нужно указать return

    Вот пример стрелочной функции, используемой с оператором if:

    5. «Тело блока»

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

    6. Объектные литералы

    Если вы возвращаете объектный литерал, его нужно заключить в круглые скобки. Это заставляет интерпретатор оценивать, что находится внутри круглых скобок, и возвращается литерал объекта.

    Синтаксическая анонимность

    Важно отметить, что стрелочные функции анонимны.

    Эта анонимность создает некоторые проблемы:

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

    2. Нет самопривязки

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

    Основное преимущество: отсутствие привязки «this»

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

    Например, посмотрите на функцию setTimeout ниже:

    В примере ES5 требуется использовать .bind (this) , чтобы помочь передать this контекст в функцию. В противном случае по умолчанию this будет undefined.

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

    Когда не стоит использовать стрелочные функции

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

    Вот несколько примеров, когда вы, вероятно, не захотите их использовать:


    1. Методы объекта

    Когда вы вызываете cat.jumps , количество жизней не уменьшается. Это связано с тем, что this не связано ни с чем, и наследует значение this из его родительской области.

    2. Функции обратного вызова с динамическим контекстом

    Если вам нужно, чтобы ваш контекст был динамическим, стрелочная функция не является правильным выбором. Взгляните на этот обработчик событий ниже:

    Если мы нажмем кнопку, мы получим TypeError. Это связано с тем, что она не привязана к кнопке, а привязана к ее родительской области.

    3. Когда она делает ваш код менее читаемым

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

    Когда вы должны их использовать

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

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

    Топ-пост этого месяца:  6 функций нативного javascript, о которых вы не знали

    Объявление и применение функций в JavaScript

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

    Объявление функции

    Объявлением функции называется указание названия, параметров и исполняемого тела. Поместив объявление в JavaScript переменную оно становится выражением функции.

    Все JavaScript объявления браузер обрабатывает до выполнения основного кода. Поэтому следующая запись вызова будет выполнена.

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

    Неотложные функций

    Эти функции запускаются сразу же как обработчик дойдёт до них. То есть, не ждут вызова. Создаются простым добавлением скобок до и после выражения. Могут быть анонимными — не иметь названия.

    Ниже приведены два наиболее распространенных синтаксиса:

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

    Такие функции идеально подходят для написания кода, который должен выполняться только один раз: пространство имен, создание замыканий, создание частных переменных и многое другое. Для примера, представьте что с помощью JavaScript требуется получить язык страницы, а сделать это можно только проделав какие-то вычисления (например, ajax запрос).

    Методы

    Когда функция является свойством объекта, она называется методом.

    «add» и «sub» являются методами объекта «calc».

    А вот ещё интересный пример, который основан на том что функция также является объектом.

    Возвращаемая анонимная функция — это метод функции «add».

    Конструкторы

    Если добавить перед функцией ключевое слово «new» и вызывать его, то получим конструктор. Конструктор позволяет создавать экземпляры объектов, что является основой объектно-ориентированного программирования. Рассмотрим пример с созданием экземпляров «Фрукт».

    Стрелочные функции стандарта «ES6»

    Новая версия JavaScript «ES6» принесла с собой новый синтаксис для объявления функций. «ES6» обеспечивает более короткую запись и получила за свой вид название «Стрелочные функции».

    Стандарт «ES6» поддерживается только новыми браузерами.

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

    Функции-генераторы JavaScript «ES6»

    Еще одно новое определение функции из стандарта «ES6» — функция-генератор. Функции генератора способны остановить и продолжить выполнение. Его синтаксис:

    Функция-генератор создаёт итератор (повторитель). Метод итератора «next» используется для выполнения кода внутри функции-генератора до тех пор, пока не будет достигнуто ключевое слово «yield». Затем значение после слова «yield» возвращается и выполнение приостанавливается.

    Если ключевое слово «yield» не достигается, то происходит возврат значения «undefined» и выполнение итератора дальше не происходит.

    Функции-генераторы полезны если требуется перебрать значения один за другим в разных точках кода, приостанавливая перебор.

    # 1 ES6 — Стрелочные функции

    В этой серии мы познакомимся с фичами ecmascript 2015 или, как его называют, ecmascript 6. Соответственно es5 это обычный javascript, синтаксис который поддерживается везде. ecmascript 6 это более новый стандарт javascript, который лаконичнее, проще в использовании и большинство новых проектов люди пишут уже с новым стандартом.

    В этом уроке мы познакомимся с стрелочными функциями из ес6. Итак как они выглядят и чем отличаются от старых обычных функций?

    Давайте напишем обычную функцию getTrack, которая возращает исполнителя и название трека.

    Если мы посмотрим в браузер, у нас вывелось Artist Track. Теперь давайте напишем эту же функцию с помощью стрелок.

    Как мы видим, практически все у нас осталось без изменений. Единственное отличие, что мы убрали слово function, а теперь мы пишем вместо него стрелку с другой стороны. Код стал выглядеть лаконичнее и его проще читать.

    Но мы можем упросить его этот код, сделав его однострочным

    Это можно делать, когда у вас только одна операция. Тогда можно убрать return и написать то, что будет возвращать функция без скобок.

    Если же у нас была бы функция только с одним параметром, то код можно было бы упростить еще больше.

    В этом случая мы убрали еще и скобки вокруг аргументов, так как они нужно только если у нас 2 и больше аргументов.

    Единственный нюанс — это не забыть как будет выглядеть функция без параметров.

    Круглые скобки должны быть обязательно.

    Это не единственные плюсы стрелочных функций. Они также не имеют своего контекста. В ес5 мы часто писали вот такой код.

    Здесь у нас есть класс API, написанный на прототипах и в методе get мы хотим вернуть map функцию, внутри которой нам нужен this.url. This там будет неправильный. В нашем случае он undefined, так как мы используем webpack, который не дает нам доступа к window, а если вы выполните этот код напрямую в браузере например, то this будет window.

    Для того, чтобы this был правильный обычно либо писали .bind(this)

    либо создавали локальную переменную

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

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

    Как мы видим, все работает как и до этого, но код стал лаконичнее.

    Еще одна вещь, которую убрали в стрелочных функциях кроме this, это arguments. В обычных функциях мы можем вывести arguments и посмотреть, чему равны наши аргументы.

    В es6 это можно сделать с помощью оператора spread. Как аргумент функции он возвращает все оставшиеся аргументы. Если он указан один, то он вернет все аргументы, как раньше возвращала arguments. Выглядит это так

    О нем мы поговорим подробнее в следующих уроках.

    В этом уроке мы с вами познакомились с стрелочными функциями, узнали чем они лучше функций из es5 и увидели насколько чище и лаконичнее получается код.

    Если у вас возникли какие-то вопросы, пишите их прямо под этим видео.

    5 недостатков JavaScript, исправленных в ES6

    Нововведения ECMAScript 6 (ES6) можно условно разделить на являющиеся синтаксическим сахаром (например, class), улучшающие JavaScript (например, import) и исправляющие недостатки JavaScript (например, ключевое слово let). В большинстве статей они комбинируются. Я хочу сосредоточиться только на ключевых особенностях ES6, исправляющих слабые стороны языка.

    Ок, давайте начнем.

    1. Блочная область видимости

    В ES5 есть только область видимости уровня функции (т.е. необходимо оборочивать код в функцию для создания области видимости), что всегда вызывало массу вопросов. В ES6 появилась область видимости уровня блока (область видимости в пределах фигурных скобок), для этого необходимо использовать ключевые слова let или const вместо var.

    Предотвращает подъем переменных за пределы области видимости

    Пример ниже показывает, что переменная bonus не поднимается за пределы блока if.

    Предотвращает двойное объявление переменной

    В ES6 недопустимо двойное объявление переменной, если вы объявляете ее с помощью let или const в той же области видимости. Это помогает избежать двойного определения функций из разных библиотек (как функция ‘add’ в примере ниже).

    Устраняет необходимость IIFE

    В ES5, как в примере ниже, мы должны были использовать немедленно вызываемые функции, чтобы избежать попадания переменных в глобальную область видимости. В ES6 мы можем просто использовать для этого фигурные скобки (<>) и ключевые слова let и const.

    Babel — инструмент для конвертации ES6 в ES5

    В конечном итоге у нас должна быть возможность запустить ES6 код в обычном браузере. Babel — это наиболее популярный инструмент для конвертации ES6 в ES5. Он доступен как консольная утилита, модуль Node.js или online-конвертер. Я использую модуль node.js для своих приложений и online-версию для быстрого просмотра различий.


    На рисунке ниже показано, как Babel переименовывает переменные, чтобы эмулировать работу let и const!

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

    В ES5, если у вас есть функция внутри цикла (например, for(var i = 0; i делает this лексическим автоматически.

    На рисунке ниже показано, как Babel конвертирует стрелочные функции в функции ES5, чтобы они работали в текущих версиях браузеров.

    3. Работа с arguments

    В ES5 arguments ведет себя как массив (мы можем пройтись по нему циклом), но это не массив. Т.е. методы массивов, такие как sort, slice и т.д., не доступны.

    В ES6 мы можем использовать так называемые rest-параметры. Они представляют собой многоточие и название объекта, например . args. Rest-параметр является массивом, можно использовать все методы массива.

    4. Классы

    Концептуально, в JavaScript нет такого понятия как класс, в отличие от объектно-ориентированных языков программирования, таких как Java. Но разработчики долгое время использовали функции, которые создавали объекты при вызове с ключевым словом new.

    И поскольку JS не поддерживал классы, а лишь их эмуляцию с помощью прототипов, такой синтаксис вызывал сложности и у опытных JS-разработчиков, и у новичков, желающих использовать традиционные концепции OOP. Это особенно актуально для таких вещей как: наследование, вызов метода родительского класса и т.д.

    В ES6 появился новый синтаксис, схожий с соответствующим в других языках программирования. Ниже показано сравнение классов ES5 и ES6.

    5. Строгий режим

    Строгий режим («use strict») помогает обнаружить наиболее общие проблемы JavaScript и повысить «безопасность». В ES5 строгий режим не обязателен, но в ES6 он необходим для большинства особенностей. Поэтому большинство людей используют строгий режим по умолчанию, а многие инструменты, такие как Babel, автоматически добавляют «use strict» в начало файла, позволяя нам писать лучший JavaScript.

    Топ-пост этого месяца:  Google подтвердил, что посещаемость не является фактором ранжирования

    Нашли опечатку? Orphus: Ctrl+Enter

    © getinstance.info Все права защищены. 2014–2020

    Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

    ES6 синтаксис: стрелочные функции, объявление переменных, применение методов

    Группа: Главные администраторы
    Сообщений: 14349
    Регистрация: 12.10.2007
    Из: Twilight Zone
    Пользователь №: 1

    Одной из самых интересных частей нового стандарта ECMAScript 6 являются стрелочные функции. Стрелочные функции, как и понятно из названия определяются новым синтаксисом, который использует стрелку =>. Однако, помимо отличного синтаксиса, стрелочные функции отличаются от традиционных функций и в других моментах:

    • Лексическое связывание. Значения специальных переменныхthis, super и arguments определяются не тем, как стрелочные функции были вызваны, а тем, как они были созданы.
    • Неизменяемые this, super и arguments. Значения этих переменных внутри стрелочных функций остаются неизменными на протяжении всего жизненного цикла функции.
    • Стрелочные функции не могут быть использованы как конструктор и кидают ошибку при использовании с оператором new.
    • Недоступность «собственного» значения переменной arguments.

    Было несколько причин для введения этих отличий. Первоочередная — это то, что связывание (binding) используется довольно часто в JavaScript. Очень легко потерять нужное значение this при использовании традиционных функций, что может привести к непредсказуемым последствиям. Другая причина, это то, что JS-движки смогут легко оптимизировать выполнение стрелочных функций за счет этих ограничений (в противоположность традиционным функциям, которые могут быть использованы в качестве конструктора и которые свободны для модификации специальных переменных).

    Примечание: Данная статья — это компиляция из вольного перевода статьи Understanding ECMAScript 6 arrow functions и чтения последнего черновика спецификации (January 20, 2014 Draft Rev 22).

    В общем случае, синтаксис стрелочных функций выглядит так:

    Он очень похож на аналогичный синтаксис в таких языках как Scala, CoffeeScript и на синтаксис lambda-выражений из C#.

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

    Объявление стрелочной функции, которая принимает один аргумент и просто возвращает его, выглядит очень просто:

    var reflect = value => value;
    // эквивалент
    var reflect = function(value)

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

    Но если вы хотите объявить более одного параметра, то должны обрамить список параметров в круглые скобки:

    var sum = (num1, num2) => num1 + num2;
    // эквивалент
    var sum = function(num1, num2) < return num1 + num2; >;

    Функция sum просто суммирует два аргумента. Единственное отличие от предыдущего примера в наличии круглых скобок и запятой (прямо как в традиционных функциях).

    Аналогично, функция безо всяких аргументов, должна иметь пустой список параметров, заключённый в круглые скобки:

    var sum = () => 1 + 2;
    // эквивалент
    var sum = function() < return 1 + 2; >;

    Вы можете воспользоваться синтаксисом традиционных функций для тела стрелочной функции, когда оно содержит более одного выражения. То есть обернуть функцию в фигурные скобки и добавить ключевое слово return:

    var sum = (num1, num2) => < return num1 + num2; >
    // эквивалент
    var sum = function(num1, num2) < return num1 + num2; >;

    Тело функции будет обработано точно так же, как и в случае классических функций, за исключением того, что значения специальных переменных this, super и arguments будут вычисляться по-другому.

    Отдельно надо упомянуть, что тело функции которое не содержит фигурных скобок и просто возвращает литерал объекта, должно быть забрано в круглые скобки:

    Помещение литерала объекта в круглые скобки указывает парсеру, что фигурные скобки это не начало традиционного синтаксиса для тела функции, а начало литерала.

    Так как «собственный» объект arguments не доступен внутри стрелочной функции (значение arguments лексически связано со значением arguments традиционной функции, внутри которой стрелочная функция была объявлена), то для стрелочных функций с переменным числом параметров нужно использовать rest-паттерн из шаблонов деструктуризации. Пример:

    var getTempItems = (. rest) => rest;
    // эквивалент
    var getTempItems = function() < return [].slice.apply(arguments) >;

    Шаблон деструктуризации в качестве параметра

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

    Как видно из предыдущего примера, несмотря на то, что у стрелочной функции всего один аргумент, всё равно необходимо применять круглые скобки при использовании шаблонов деструктуризации как единственного параметра функции. Примеры с другими шаблонами:

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

    var pageHandler = <
    id: «123456»
    , init: function() <
    document.addEventListener(«click», function(event) <
    this.doSomething(event.type); // ошибка
    >);
    >
    , doSomething: function(type) < console.log("Handling " + type + " for " + this.id) >
    >;

    В приведённом коде объект pageHandler должен обрабатывать клики на странице. Метод init() навешивает обработчик на нужное событие, который внутри себя вызывает this.doSomething(). Однако код отработает неправильно. Ссылка на this.doSomething() не валидна, поскольку this указывает на объект document внутри обработчика события вместо планируемого pageHandler. При попытке выполнить этот код, вы получите ошибку, поскольку объект document не имеет метода doSomething.

    Вы можете завязать значение this на объекте pageHandler используя handleEvent или вызвав у функции стандартный метод bind():

    var pageHandler = <
    id: «123456»
    , init: function() <
    document.addEventListener(«click», (function(event) <
    this.doSomething(event.type); // error
    >).bind(this));
    >
    , doSomething: function(type) < console.log("Handling " + type + " for " + this.id) >
    >;

    Теперь код работает так, как и задумывалось, но выглядит более громоздко. Кроме того, вызывая bind(this) вы каждый раз создаёте новую функцию, значение this которой завязано на значении pageHandler, но зато код работает так, как вы задумывали.

    Стрелочные функции решают проблему более элегантным способом, поскольку используют лексическое связывание значения this (а также super и arguments) и его значение определяется значением this в том месте, где стрелочная функция была создана. Например:

    var pageHandler = <
    id: «123456»
    , init: function() <
    document.addEventListener(«click», event => this.doSomething(event.type));
    >
    , doSomething: function(type) < console.log("Handling " + type + " for " + this.id) >
    >;

    В этом примере обработчик это стрелочная функция в которой вызывается this.doSomething(). Значение this будет тем же, что и в функции init(), и код в данном примере отработает правильно, аналогично тому, который использовал bind(). Вне зависимости от того, возвращает вызов this.doSomething() значение или нет, выражение внутри тела стрелочной функции не нужно обрамлять в фигурные скобки.

    Кроме того, пример выше ещё и эффективнее вызова bind(), потому что для браузера он аналогичен следующему коду:

    var pageHandler = <
    id: «123456»
    , init: function() <
    var self = this;
    document.addEventListener(«click», function(event) <
    return self.doSomething(event.type)
    >);
    >
    , doSomething: function(type) < console.log("Handling " + type + " for " + this.id) >
    >;

    То есть не происходит создание новой функции, как в случае с вызовом bind().

    Очевидно, что можно вкладывать одну стрелочную функцию в другую, тем самым «прокидывая» значение this через них:

    var obj = <
    arr1: [1, 2, 3]
    , arr2: [‘a’, ‘b’, ‘c’]
    , concatenate: function(a, < return a + "|" + b >
    , intersection: function() <
    return this.arr1.reduce( (sum, v1) => // arrow function 1
    this.arr2.reduce( (sum, v2) => < // arrow function 2
    sum.push( this.concatenate( v1, v2 ) )
    return sum;
    >
    , sum )
    , [] )
    >
    >;
    var arrSum = obj.intersection();//[‘1|a’, ‘1|b’, ‘1|c’, ‘2|a’, ‘2|b’, ‘2|c’, ‘3|a’, ‘3|b’, ‘3|c’]

    Использование в качестве аргумента

    Короткий синтаксис стрелочных функций делает их идеальными кандидатами на передачу в качестве аргументов в вызов других функций. Например, если вы хотите отсортировать массив, то обычно пишете что-то типа такого:

    var result = values.sort(function(a, < return a - b >);

    Довольно многословно для простой операции. Сравните с короткой записью стрелочной функции:

    var result = values.sort((a, => a — ;

    Использование таких методов, как массивные sort(), map(), reduce() и так далее, может быть упрощено с использованием короткого синтаксиса стрелочной функции.

    Несмотря на то, что стрелочные функции отличаются от традиционных функций, у них есть общие черты:

    • Оператор typeof вернёт «function» для стрелочной функции
    • Стрелочная функция также экземпляр «класса» Function, поэтому instanceof сработает так же как, и с традиционной функцией
    • Вы всё ещё можете использовать методы call(), apply(), и bind(), однако помните, что они не будут влиять на значение this
    • Вы можете использовать метод toMethod(), однако он не будет менять значение super (метод toMethod() введён в es6 и не рассматривается в рамках данной статьи).

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

    Стрелочные функции это одно из интереснейших нововведений в ECMAScript 6, которое, имея краткий синтаксис определения, упростит передачу функций в качестве значения параметра другой функции.

    Лаконичный синтаксис позволит писать сложные вещи ещё сложнеепроще. Например, так будет выглядеть генератор идентификаторов (который на es5 выглядит куда многословней):

    let gen = idGen(100);
    console.log(gen.next(), gen.next(), gen.reset(10), gen.next());//100 101 10 10

    А лексическое связывание закроет один из самых больших источников боли и разочарования для разработчиков, а так же улучшит производительность за счёт оптимизации на уровне js-движка.

    Если вы хотите попробовать стрелочные функции, то можете выполнить вышеуказанные примеры в консоли Firefox, который на данный момент (02.2014 FF28) почти полноценно поддерживает стрелочные функции (FF28 неправильно вычисляет значение arguments).

    Также вы можете попробовать стрелочные функции и другие возможности es6 в онлайн трансляторе Traceur.

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