Что и как в ES6 хитрости, лучшие практики и примеры. Часть первая. letconst, блоки, стрелочные


Оглавление (нажмите, чтобы открыть):

Шесть ловких трюков ES6

В этой статье я покажу шесть трюков, доступных благодаря новым возможностям ES6. В конце каждого раздела я даю ссылки на соответствующий материал из моей книги Exploring ES6 (бесплатно доступна для чтения online).

1. Гарантированная обязательность параметра с помощью параметра по умолчанию

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

Вызов функции mandatory() делает параметр mustByProvided обязательным. Пример:

Больше информации:

2. Получение индексов и значений массива в цикле for-of

Метод forEach позволяет пройтись по списку элементов массива. Также он позволяет получить индекс каждого элемента, если это необходимо:

В ES6 цикл for-of поддерживает ES6 итерации (итерируемые структуры данных и итераторы) и деструктуризацию. Если скомбинировать деструктуризацию и метод массива entries(), получим:

Метод arr.entries() возвращает итерируемые пары индекс-элемент. Деструктуризация [index, elem] дает доступ к каждому элементу пары. Параметр функции console.log называется литералом шаблона, который дает строковую интерполяцию в JavaScript.

Больше информации:

Некоторые кодовые единицы Unicode (грубо говоря, символы) содержат два символа JavaScript.

Строки поддерживают ES6 итерацию. Если итерировать по строке, получим кодовые единицы (один или два символа JavaScript). Например:

Это дает возможность посчитать количество кодовых единиц в строке:

Оператор расширения (. ) добавляет элементы операнда в массив.

Больше информации:

4. Обмен значений переменных с помощью деструктуризации

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

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

Больше информации:

5. Простой шаблонизатор с помощью литерала шаблона

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

Функция tmpl (стрелочная функция) принимает массив addrs, а возвращает строку. Давайте используем tmpl() с массивом data:

Больше информации:

6. Простой миксин с помощью фабрики дочерних классов

Если класс ES6 расширяет другой класс, родительский класс задается динамически, с помощью произвольного выражения (не статически с помощью идентификатора):

Это позволяет реализовать миксин как функцию, отображающую класс C в новый класс, наследующийся от C и имеющий подмешанные методы. Например, функции Storage и Validation, приведенные ниже, являются миксинами:

Их можно использовать для создания класса Employee:

Больше информации:

Дополнительное чтение

Следующие две главы дают хороший обзор ECMAScript 6:

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

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

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

Классы в ES6

Классы являются основой объектно-ориентированное программирование но не в JavaScript.

В объектно-ориентированное программирование наследование основано на прототипах объектов, а не на классах.

Если вы когда-нибудь писали код на Java Script имитируя классы, ты уверен согласитесь синтаксис не самый элегантный и простой.

С появлением es6 JavaScript наконец-то добавлена поддержка классов. Новый синтаксис не вводит новую объектно-ориентированная модель наследования, внутри используется всё те же прототипы.

Синтаксис классов это так называемый syntactic Sugar или синтаксический сахар, который призван немного подсластить, то есть упростить работу с классами и наследованием в JavaScript.

Сегодня мы рассмотрим новый синтаксис классов, а в следующем посте — наследование.

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

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

Стрелочные функции в 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 с Нуля до Гуру.

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

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

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

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

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

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

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

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

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

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

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

    Frontender Magazine

    ES6 в деталях — это цикл статей о новых возможностях языка программирования JavaScript, появившихся в 6 редакции стандарта ECMAScript, кратко — ES6.

    Стрелки были частью JavaScript с самого начала. Первые учебники по JavaScript советовали оборачивать встроенные скрипты в комментарии HTML. Это не позволяло тем браузерам, что не поддерживали JS, ошибочно отображать код JS как текст. В то время вы бы писали примерно так:

    Старые браузеры видели два неподдерживаемых тега и комментарий, и только новые браузеры видели в этом JS.

    Чтобы поддерживать этот костыль, движок JavaScript в браузере рассматривает символы как начало однострочного комментария. Кроме шуток. Это действительно всё время было частью языка и работает по сей день, не только сразу после открывающего тега , но и вообще в любом месте JS-кода. Даже в Node.js работает.

    Последовательность символов в виде стрелки также обозначает однострочный комментарий. Интересно, что в HTML комментарием считаются символы перед , а в JS комментарий — это всё, что после и до конца строки.

    А вот что ещё интересней. Эта стрелка обозначает комментарий только если находится в начале строки. Потому, что в других контекстах в JS — оператор «стремится к»!

    Этот код действительно работает. Цикл выполняется, пока n не достигнет 0 . Это тоже не новая возможность ES6, а комбинация старых в новом контексте и небольшой фокус с записью операторов. Сможете разобраться, как это работает? Как обычно, разгадку можно найти на Stack Overflow.

    Разумеется, есть ещё оператор «меньше или равно», . Возможно, вы сможете, как в игре Поиск Предметов, отыскать в исходном коде программ написанных на JavaScript и другие виды стрелок, но давайте на этом остановимся, как бы вы не искали, одной стрелки всё равно не хватает.

    однострочный комментарий
    оператор «стремится к»
    меньше или равно
    => .

    Что за => ? Сейчас разберемся.

    Но сначала немного о функциях.

    Функции-выражения повсюду

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

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

    Метод .click() jQuery принимает один аргумент — функцию. Без проблем. Вы можете впечатать функцию прямо туда:

    Мы уже привыкли писать так, это для нас уже вполне естественно. И странно вспоминать, что до того как, благодаря JavaScript, такой подход к программированию стал популярен, во многих языках не было такой возможности. Само собой, в Lisp были функции-выражения, они же лямбда-функции, ещё с 1958. Но C++, Python, C# и Java просуществовали годы без них.

    Но теперь этому пришёл конец. Во всех четырёх теперь есть лямбды. Во всех более новых языках есть вcтроенная поддержка лямбд. Мы должны поблагодарить за это JavaScript — и ранних JavaScript-программистов, которые бесстрашно создавали сильно зависящие от лямбд библиотеки и тем самым привели к повсеместному принятию этой функциональности.

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

    Новая стрела в ваш колчан

    В ES6 появился новый синтаксис функций.

    Если вам нужна простая функция с одним аргументом, то синтаксис новых, стрелочных функций — это просто Идентификатор => Выражение . Не нужно печатать ни function , ни return , ни круглых скобок с фигурными и точкой с запятой.

    (Лично я очень благодарен за этот синтаксис. Для меня очень важно, что печатать function больше не надо, потому что у меня постоянно вместо этого получается functoin , и мне приходится возвращаться и исправлять опечатку.)

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

    Мне кажется, выглядит очень неплохо.

    Стрелочные функции точно так же великолепно работают с функциональными утилитами из библиотек наподобие Underscore.js и Immutable. В сущности, все примеры кода в документации Immutable написаны на ES6, так что многие из них уже используют стрелочные функции.

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

    Вот так это будет выглядеть в ES6:

    Небольшое улучшение. Эффект при использовании промисов может быть более заметным из-за нагроможения строчек >).then(function (result) < .

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

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

    Мастер Йода рекомендует:  Основы функционального программирования в JavaScript

    Увы, пустой объект <> и пустой блок <> выглядят абсолютно одинаково. Правила ES6 гласят: < сразу после стрелки всегда трактуется как начало блока и никогда не считается началом объекта. Поэтому код puppy =><> молча интерпретируется как стрелочная функция, которая ничего не делает и возвращает undefined .

    Ещё больше сбивает с толку то, что литерал вроде выглядит в точности как блок, содержащий инструкцию с меткой; по крайней мере, он так выглядит для движка JavaScript. К счастью, < — это единственный неоднозначный символ, так что единственный приём, который вам следует запомнить,— это оборачивание литералов объектов в скобки.

    Что такое this ?

    Есть одно хитрое отличие в поведении обычных функций- function и стрелочных функций. У стрелочных функций нет собственного значения this . Внутри стрелочной функции this всегда наследуется из окружающего лексического окружения.

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

    Как в JavaScript работает this ? Откуда берётся это значение? На этот вопрос нет короткого ответа. Если для вашего мозга это просто — это лишь из-за того, что вы с этим долго работали!

    Одна из причин, почему этот вопрос всплывает так часто — это то, что функции- function получают значение this автоматически, неважно, нужно оно им или нет. Вы когда-нибудь применяли такой приём?

    Здесь вам бы хотелось написать внутреннюю функцию просто как this.add(piece) . К несчастью, внутренняя функция не наследует this внешней. Во внутренней функции this будет window или undefined . Временная переменная self нужна, чтобы протащить внешнее значение this во внутреннюю функцию. (Ещё один способ — использовать .bind(this) на внутренней функции. И оба эти способа особым изяществом не отличаются.)

    В ES6 трюки с this по большей части не нужны, если вы придерживаетесь этих правил:

    Использовать не-стрелочные функции для методов, которые будут вызываться с использованием синтаксиса объект.метод() . Эти функции получат вменяемый this от вызывающего кода.

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

    Обратите внимание, в этой версии на ES6 метод addAll получает this от вызывающего кода. Внутренняя функция — стрелочная, так что она наследует this из лексического окружения.

    Что приятно, ES6 также предоставляет более краткий способ записи методов в литералах объектов! Так что код выше можно сделать ещё проще:

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

    Есть ещё одна небольшая разница между стрелочными и не-стрелочными функциями: стрелочные функции не получают собственного объекта arguments . Разумеется, в ES6 вы и так скорее предпочтёте остаточные параметры или значения по умолчанию.

    Пронзаем стрелами тёмное сердце информатики

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

    В 1936 Алонзо Чёрч и Алан Тьюринг независимо друг от друга разработали мощные математические вычислительные модели. Тьюринг назвал свою модель а-машины, но остальные немедленно окрестили их машинами Тьюринга. Чёрч, напротив, писал о функциях. Его модель называлась λ-исчисление. (λ — это строчная греческая буква лямбда.) Его работа послужила причиной тому, что в Lisp для обозначений функций использовалось слово LAMBDA , и поэтому наши дни мы называем функции-выражения лямбдами.

    Но что такое λ-исчисление? И что имеется в виду под вычислительной моделью?

    Непросто объяснить это в двух словах, но я попробую: λ-исчисление — это один из первых языков программирования. Оно не было спроектировано как язык программирования (в конце концов, до компьютеров, хранящих программу в памяти, было на тот момент лет десять или двадцать), а скорее, это было бесцеремонно простой, обнажённой, чисто математической идеей языка, который мог бы выразить любой вид вычислений, какой только захочется. Чёрчу нужна была эта модель, чтобы доказать свои мысли о вычислении в целом.

    И он обнаружил, что в его модели нужно только одно — функции.

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

    Например, вот такую «программу» могут написать математики в λ-нотации Чёрча:

    Эквивалентная функция JavaScript выглядит так:

    То есть JavaScript содержит работающую реализацию λ-исчисления. λ-исчисление есть в JavaScript.

    Истории о том, как Алонзо Чёрч и поздние исследователи развивали λ-исчисление, и о том, как оно незаметно проникло в практически все заметные языки программирования, находятся уже за пределами тематики этой статьи. Но если вы заинтересовались основателями информатики или хотели бы взглянуть на то, как в языке, в котором нет ничего, кроме функций, можно делать вещи вроде циклов и рекурсии, то вы могли бы в какой-нибудь пасмурный день почитать про нотацию Чёрча и комбинаторы неподвижной точки и поиграться с ними в консоли Firefox или Scratchpad. Со стрелочными функциями и другими его сильными сторонами, JavaScript можно с уверенностью назвать лучшим языком для ознакомления с λ-исчислением.

    Когда я смогу пользоваться стрелками?

    Стрелочные функции из ES6 были реализованы в Firefox мной ещё в 2013. Ян де Мойж (Jan de Mooij) сделал их быстрыми. Спасибо Тоору Фуджисава (Tooru Fujisawa) и ziyunfei за патчи.

    Стрелочные функции также реализованы в предварительной версии Microsoft Edge. Они также доступны в Babel, Traceur и TypeScript, если вы хотите начать использовать их в вебе прямо сейчас.

    Нашей следующей темой будет одна из странных особенностей ES6. Мы увидим, что typeof x возвращает совершенно новое значение. Мы зададимся вопросом: когда имя не является строкой? Мы переосмыслим понятие равенства. Это будет необычно. Так что присоединяйтесь на следующей неделе, и мы рассмотрим символы ES6 в деталях.

    Обзор функций в JavaScript ES6

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

    1. История JavaScript

    Новые дополнения к языку называются ECMAScript 6. Они также упоминаются как ES6 или ES2015+. Начиная с концепции 1995 года, JavaScript развивался медленно. Новые дополнения выходили раз в несколько лет. ECMAScript появился в 1997 году, чтобы указать путь JavaScript. Были выпущены такие его версии: ES3, ES5, ES6 и другие.

    Как вы заметили, между ES3, ES5 и ES6 существуют промежутки в 10 и 6 лет. Новая стратегия состоит в том, чтобы делать небольшие постепенные изменения каждый год. Вместо того, чтобы делать большие изменения сразу, как это случилось с ES6.

    2. Поддержка браузеров

    Все современные браузеры и среды программирования уже поддерживают ES6!

    Chrome, MS Edge, Firefox, Safari, Node и многие другие уже имеют встроенную поддержку большинства функций JavaScript ES6. Таким образом, всё, что вы собираетесь изучить в этом туториале, вы можете начать использовать прямо сейчас. Давайте начнем с ECMAScript 6!

    3. Основные функции ES6

    Вы можете проверить все эти фрагменты кода на консоли своего браузера.

    Так что не верьте мне на слово и тестируйте каждый пример ES5 и ES6.

    3.1. Блочная область видимости переменных

    В ES6 мы перешли от объявления переменных с var на использование let/const.

    Что не так с var? Проблема var – это утечка переменной в другой блок кода, например, в циклы for или if-блоки.

    Для test(false) вы ожидаете возвращения outer, но нет, вы получаете undefined. Почему?

    Потому что даже при том, что if-блок не выполняется, выражение var x в строке 4 «поднимается».

    Поднятие переменных:

    • var является переменной области видимости. Она доступна во всей функции даже до того, как её объявят.
    • Выражения «поднимаются». Так что вы сможете использовать переменные до их объявления.
    • Инициализация НЕ поднимется. Если вы используете var, ВСЕГДА объявляйте ваши переменные наверху.
    • После применения правил подъема, мы можем лучше понять, что же случилось.
    • ECMAScript 2015 идёт на помощь:

    Изменение var на let приводит к тому, что всё работает так, как и ожидалось. Если блок if не вызывается, переменная x не поднимается из блока.

    Взглянём на поднятие и «временные мёртвые зоны»:

    • В ES6 let будет поднимать переменную наверх блока (НЕ наверх функции, как это происходит в ES5).
    • Однако ссылка на переменную в блоке перед объявлением этой переменной приводит к ReferenceError.
    • let – переменная области видимости. Вы не можете использовать её, пока она не будет объявлена.
    • «Временные мёртвые зоны» – это зоны в начале блока и до того места, где объявляется переменная.

    IIFE (Immediately-Invoked Function Expression)

    Перед объяснением IIFE взгляните на пример:

    Как вы видите, появляется private. Для того, чтобы удержать его, вам необходимо использовать IIFE (немедленно-вызываемое выражение функции):

    Если вы посмотрите на jQuery/lodash или другие open source проекты, то заметите, что они используют IIFE во избежание загрязнения глобальной среды и определения только глобального, например _,$ или jQuery.


    ES6 гораздо проще, нам больше не нужно использовать IIFE, когда мы просто можем применить блоки и let:

    Const

    Вы также можете использовать const, если не хотите, чтобы переменная изменялась вообще.

    3.2. Литералы шаблонов

    Нам больше не нужно встраивать конкатенации, когда у нас есть литералы шаблонов. Взгляните:

    Сейчас вы можете использовать кавычку (`) и строковую интерполяцию $<>:

    3.3. Многострочные строки

    Нам больше не нужно конкатенации строк + \n по типу:

    В ES6 мы снова можем использовать кавычку для решения такого примера:

    Оба фрагмента кода будут иметь точно такой же результат.

    3.4. Назначение деструктуризации

    Деструктуризация в ES6 очень полезная и точная.

    Получение элементов с массива

    Обмен значений

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

    В строке 3 вы также можете вернуть ее в массив подобный тому, что на примере (и сохранить некоторые, набрав код):

    Но потом необходимо подумать о порядке возврата данных.

    В ES6 вызывающий выбирает только те данные, которые ему нужны (строка 6):

    Обратите внимание: В строке 3 есть некоторые другие функции ES6. Мы можем сжать < left: left>только до < left>.Посмотрите, насколько это компактнее по сравнению с версией ES5. Разве не круто?

    Деструктуризация для параметров согласования

    Так же, но короче:

    Deep Matching

    Так же, но короче:

    Это также называют деструктуризацией объектов.

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

    Практический опыт:

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

    3.5. Классы и Объекты

    С ECMAScript 6 мы перешли от «функции-конструктора» к «классам».

    В JavaScript каждый отдельный объект имеет прототип, который является другим объектом. Все объекты JavaScript наследуют свои методы и свойства от своего прототипа.

    В ES5 мы использовали объектно-ориентированное программирование (ООП), применяя функцию- конструктор для создания объектов, следующим образом:

    В ES6 имеется некий синтаксический сахар. Мы можем делать то же самое менее шаблонно и с новыми ключевыми словами, такими как >

    Как видим, оба стиля (ES5/6) дают одинаковые результаты и используются одинаково.

    Практический опыт:

    • Всегда используйте синтаксис класса и избегайте прямого манипулирования прототипом. Почему? Потому что это делает код более кратким и понятным.
    • Избегайте наличия пустого конструктора. Классы имеют конструктор по умолчанию, если он не указан.

    3.6. Наследование

    Опираемся на предыдущий класс Animal. Предположим, мы хотим расширить его и определить класс Lion.

    В ES5 это большей частью связано с прототипическим наследованием.

    Я не буду описывать все детали, но заметьте:

    • В строке 3 мы явно вызываем конструктор Animal с параметрами.
    • В строках 7-8 мы назначили прототип Lion прототипу Animal.
    • В строке 11 мы вызываем метод speak из родительского класса Animal.

    В ES6 у нас есть новые ключевые слова extends и super.

    Посмотрите, насколько разборчиво выглядит этот код ES6 по сравнению с ES5, и они работают одинаково!

    • Используйте встроенный способ наследования с extends.

    3.7. Native Promises

    Мы перешли от callback hell к promises.

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

    Правда, это может пойти наперекосяк, если вам нужен третий или четвёртый обратный вызов. Давайте посмотрим, как мы можем сделать это с промисами:

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

    Мастер Йода рекомендует:  Паттерн синглтон в PHP

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

    ES6 не удалил выражения функций, но добавил новые функции – стрелочные.

    В ES5 были некоторые проблемы с this:

    Вам нужно использовать временное this для ссылки внутри функции или использовать bind. В ES6 вы можете использовать стрелочную функцию.

    3.9. For…of

    Мы перешли от for к forEach, и потом к for…of:

    В ES6 for. of также позволяет нам делать итерации.

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

    Мы перешли от проверки того, была ли переменная определена, к присвоению значения параметрам по умолчанию (default parameters). Вы делали что-то подобное раньше?

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

    • В строке 8 мы задали 0, 0 и получили 0, -1
    • В строке 9 мы задали false, но получили true.

    Если в качестве параметра по умолчанию задано значение boolean или это значение равно нулю, то оно не будет работать. Знаете почему? Все расскажем после примера ES6. С ES6 вы можете писать код лучше и короче!

    Обратите внимание на строки 5 и 6 – мы получаем ожидаемые результаты. Пример ES5 не работает. Сначала мы должны проверить undefined, поскольку false, null, undefined и 0 являются фальшивыми значениями. Мы можем выбраться с такими цифрами:

    Сейчас всё работает так, как и должно, когда мы проверяем undefined.

    3.11. Rest-параметры

    Мы перешли от аргументов к rest-параметрам и spread-оператору. Получать произвольное количество аргументов на ES5 довольно неудобно:

    Мы можем сделать то же, используя rest-оператор . . . .

    3.12. Spread-оператор

    Мы пришли от apply() до spread-оператора. Опять на помощь приходит . . .:

    Напоминание: мы используем apply () для преобразования массива в список аргументов. Например, Math.max () принимает список параметров, но, если у нас есть массив, мы можем использовать apply, чтобы заставить его работать.

    Как мы видели ранее, мы можем использовать apply для передачи массивов в виде списка аргументов:

    В ES6 вы можете использовать spread-оператор:

    Кроме того, мы пришли от использования массивов contact к использованию spread-оператора:

    В ES6 вы можете сглаживать вложенные массивы, используя оператор spread:

    4. Заключение

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

    Материал подготовлен на основе статьи из блога Adrian Mejia

    # 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 и увидели насколько чище и лаконичнее получается код.

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

    ECMAScript 2015, Основы ES6

    let — используется для создания переменных с областью видимости в пределах блока (блок ограничивается <> )

    Javascript

    Javascript

    Javascript

    Деструктуризация в ES6:

    — деструктуризация для объекта:

    Классы в ES6:

    — constructor

    Метод конструктор ( constructor ) — специальный метод, необходимый для создания (вызывается при создании объекта) и инициализации объектов с помощью класса. В классе может быть только один конструктор. Конструктор может принимать параметры, которые мы используем при создании объекта.

    — extends

    Ключевое слово extends используется для создания дочернего класса относительно другого класса.

    — super

    • super может использоваться в методе constructor класса для вызова родительского конструктора
    • super может использоваться внутри методов класса для ссылок на свойства (методы) базового класса

    Как видите, super может использоваться лишь в методах объекта.

    — Статические свойства

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

    — Статические методы

    Статические методы — это методы, которые принадлежат самому классу, а не объектам на его основе. Если вызвать статический метод у экземпляра класса, то будет ощибка.

    — Свойства класса: get и set

    get и set внутри класса выглядят как методы, а снаружи как свойства. Эти свойства-методы позволяют получить/присвоить значение «настоящим» свойствам объекта.

    — Наследование, пример

    1) Если у подкласса нет конструктора, то он будет использовать родительский конструктор.
    2) Конструктор может принимать параметры, которые могут быть использованы при создании свойств.
    3) Если подклассу мы указываем конструктор, то этот конструктор должен вызвать конструктор родительского класса. Это делается при момощи ключевого слова super .
    4) super должен идти в конструкторе подкласса первой строкой
    5) Методы родителя также наследуются подклассом
    6) Чтобы переопределить метод в подклассе достаточно его просто перезаписать
    7) В унаследованном методе мы можем вызвать метод родительского класса, а потом дополнить его
    8) Статические свойства и методы также наследуются, как и get-ры и set-ры

    Пример II

    Если свойство обозначить через function , то внутри него super работать не будет.

    const

    const — используется для объявления переменных, которые нельзя изменить. Область видимости такая же как и у let .

    Параметры по умолчанию для функций

    Javascript

    В качестве параметра можно использовать и выражения

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

    Остаточный параметр для функций

    Если параметр функции начинается с . , то это остаточный параметр. Это означает, что все параметры переданные функции собираются в массив, и переменной, которая стоит перед . присваивается этот массив. Например:

    Функции в блоке

    Объявление функции Function Declaration, сделанное в блоке, видно только в этом блоке.

    Javascript

    Стрелочные функции =>

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

    Javascript

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

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

    Javascript

    Стрелочные функции имеют тот же this , что и снаружи.

    Расширенный оператор: .

    Расширенный оператор позволяет разбить итерируемый объект на отдельные значения, например, что раньше реализовывалось при помощи метода a pply , теперь можно сделать при помощи .

    Javascript

    Javascript

    Расширенный оператор имеет множество применение, помимо разбиения итерируемого объекта.

    Новые кавычки для строк ` `

    1. В них разрешён перевод строки.

    Javascript

    2. Можно вставлять выражения при помощи $ <. >.

    Javascript

    Объект Object.assign

    Метод Object.assign получает список объектов и копирует в первый target свойства из остальных.

    При этом важно отметить, что последующие свойства перезаписывают предыдущие.

    Javascript

    пример взят с learn.javascript.ru


    Методы объекта (новый синтаксис)

    Чтобы задать метод нужно вместо «старого» синтаксиса prop: function() <. >использовать «новый»:
    prop()

    Javascript

    Также методами станут объявления геттеров get prop() и сеттеров set prop() :

    инструменты:

    Profiler

    Для profiler ф-и использовать следующим образом $(«.as»).click(clickHandler);

    Ручной замер

    правильный код:

    Самый простой способ работы с асинхронным кодом это callback.

    Promise

    Абстракция для обещания асинхронных данных

    Обещание можно выполнить, но можно и не сдержать

    Создание и использование

    Fulfilled (выполнено)
    Pending (состояние ожидания данных)
    Rejected (отклонено)

    Такой promises выглядит как обертка над некоторой асинхронной логикой (пример):

    Javascript

    Зачем использовать promise? Promise позволяют делать цепочки обработки из нескольких синхронных операций. См. след. Пример.

    Методы .then() и .catch() возвращают Promise. Можно строить цепочки:

    Javascript

    Обработка исключений

    Promise не потеряет ни одного исключения!

    Каждый раз, когда в promise встречается исключение создается promise в состояние отклонен.

    Это позволяет структурировать код:

    Javascript

    В цепочке исключение обрабатывается в ближайшем .catch()

    Javascript

    Это аналог try – catch в асинхронном виде.

    Дополнительно

    Promise.all([promise1, promise2, …])
    Дожидаемся, когда все промисы будут выполнены

    Promise.race([promise1, promise2, …])
    Завершится как только любой (один) промис завершится

    Есть возможность создавать промисы сразу resolve или reject:
    Promise.resolve(value)
    Promise.reject(error)

    Модули (export, import)

    Ранее модули определялись посредством: модули AMD (в стиле requireJS), модули CommonJS (в стиде nodejs), UMD (универсальная система).

    Модуль — отдельный файл с кодом

    export

    Ключевое слово export используется для экспорта функций, объектов или примитивов из файла (или модуля).
    developer.mozilla.org/ru: export

    export default

    Для ситуации, когда один модуль экспортирует одно значение, предусмотрено особое ключевое сочетание export default .

    import

    Другие модули могут подключать экспортированные значения при помощи ключевого слова import .
    developer.mozilla.org: import

    member , member2 – импортируемые переменные, которые должны быть обозначены в module-name ключевым словом export .

    Импортировать значения можно и под другим именем, указав его в as :

    Импортируем ВСЕ в виде объекта ( import * as obj )

    Контекст функции можно изменить пи помощи функций:

    bind — возвращает новую функцию с измененным контекстом.

    Принимает в качестве аргументов:

    • 1. новый контекст
    • 2. произвольной количество аргументов

    Изменить контекст функции можно только один раз.

    Имеет особенность накапливать аргументы.

    EXPORT

    • Использовать можно в любом месте подмодуля
    • Модуль может содержать множество export
    • В условии экспортировать нельзя
    • Нельзя экспортировать одно и тоже

    IMPORT

    Оператор import состоит из двух частей — имен импортируемых переменных и относ-го пути до модуля.

    Почему классы в ES6 такие убогие?

    Здравствуйте.
    Интересуюсь новым стандартом ES6. Посмотрел на реализацию классов и разочаровался. Больше всего не понравилось то, что в новом стандарте нельзя объявлять поля в теле объявления класса. Даже в ES5 мы могли в функции конструкторе имитировать приватные поля с помощью замыкания.

    Посмотрел на быдлокодерские приёмы с использованием Symbol и WeakMap для имитации приватности в ES6 и всё равно остался недоволен.

    Почему ES6 классы такие недоделанные? Сделали бы хотя бы как в TypeScript. Хоть там private и не приватный, но хоть нормальные поля есть.

    Мастер Йода рекомендует:  Свежие jQuery-плагины

    Введение в часто используемые особенности ES6. Часть 1

    Данная публикация является переводом статьи «Introduction to commonly used ES6 features» под авторством Zell Liew, размещенного здесь. Перевод разделён на 2 части.

    JavaScript серьезно развился в последние несколько лет. Если ты изучаешь язык в 2020 году и при этом не касался ES6, то упускаешь легкий способ читать и писать на нём.

    Не волнуйся, если ты еще не знаток языка. От тебя не требуется превосходно знать его, чтобы пользоваться преимуществами «бонусов», добавленных в ES6. В этой статье хотел бы поделиться восемью особенностями ES6, которые использую каждый день как разработчик, что поможет тебе легче погрузиться в новый синтаксис.

    Примечание переводчика: в статье представлены семь особенностей («Промисы» рассматриваются в отдельной статье).

    Список особенностей ES6

    Во-первых, ES6 — это огромное обновление JavaScript. Здесь приведён большой перечень особенностей (спасибо Luke Hoban), если тебе интересно, какие нововведения появились:

    • Стрелочные функции
    • Классы
    • Расширенные литералы объектов
    • Шаблонные строки
    • Деструктуризация
    • Default + rest + spread
    • let + const
    • Итераторы + for..of
    • Генераторы
    • Дополнения для поддержки Unicode
    • Модули
    • Загрузчики модулей
    • Типы коллекций Map + set + weakmap + weakset
    • Прокси
    • Тип данных Symbols
    • Создание подклассов
    • Промисы
    • Math + number + string + array + object api
    • Двоичные и восьмеричные литералы
    • Reflect api
    • Хвостовые вызовы

    Не пугайся такого большого списка особенностей ES6. От тебя не требуется знать все сразу. Далее поделюсь восемью особенностями, которые применяю каждый день. К ним относятся:

    1. let + const
    2. Стрелочные функции
    3. Параметры по умолчанию (Default parameters)
    4. Деструктуризация
    5. Rest parameter и spread operator
    6. Расширенные литералы объектов
    7. Шаблонные строки
    8. Промисы

    Кстати, браузеры очень хорошо поддерживают ES6. Почти все особенности обеспечиваются нативно, если пишешь код для последних версий браузеров (Edge, последние версии FF, Chrome и Safari).

    Для написания кода на ES6 не нужен такой инструмент, как Webpack. При отсутствии поддержки браузером всегда можно обратиться к полифиллам, созданными сообществом. Просто погугли!

    Итак, приступим к первой особенности.

    Let и const

    В ES5 («старый» JavaScript) было принято объявлять переменные через ключевое слово var . В ES6 это слово может быть заменено let и const , двумя мощными ключевыми словами, которые делают разработку проще.

    Сначала посмотрим на разницу между let и var , чтобы понять, почему let и const лучше.

    Let vs var

    Сначала рассмотрим знакомый нам var .

    Во-первых, мы можем объявлять переменные через ключевое слово var . Как только объявление произошло, переменная может быть использована везде в текущей области видимости.

    В примере выше объявлена глобальная переменная me . Эта переменная также может быть использована в функции. Например, так:

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

    Так, можем говорить, что у var область видимости «функциональная». Это означает, что всякий раз, когда переменная объявляется с помощью var в функции, она будет существовать только в пределах функции.

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

    У let , с другой стороны, область видимости «блочная». Это означает, что всякий раз, когда переменная объявляется с помощью let, она будет существовать только в пределах блока.

    Подождите, но что же значит «блок»?

    Блоком в JavaScript называется то, что находится внутри пары фигурных скобок. Ниже примеры блоков:

    Разница между переменными, объявленными «блочно» и «функционально», огромна. При объявлении переменной «функционально» в дальнейшем можно случайно переписать значение этой переменной. Ниже пример:

    Этот пример показывает, что значение me становится ‘Sleepy head’ после выполнения кода внутри if блока. Такой пример, скорее всего, не вызовет какие-либо проблемы, т.к. вряд ли будут объявляться переменные с одинаковым именем.

    Однако любой, кто будет работать с помощью var через цикл for , может оказаться в странной ситуации из-за способа, которым объявлены переменные. Представим следующий код, который выводить переменную i четыре раза, а затем выводит i c помощью функции setTimeout .

    Какой результат можно ожидать при выполнения этого кода? Ниже то, что в действительности произойдет:

    i будет четыре раза выведена со значением «5» в функции-таймере

    Как i получил значение «5» четыре раза внутри таймера? Всё из-за того, что var определяет переменную «функционально», и значение i становится равным «4» еще до того, как таймер начнёт выполняться.

    Для того чтобы получить правильное значение i внутри setTimeout , которая будет выполняться позже, необходимо создать другую функцию, допустим logLater , для гарантии того, что значение i не изменится в цикле for до начала выполнения setTimeout :

    i правильно выводится как 1, 2, 3 и 4

    Кстати, это называется замыканием.

    Хорошая новость в том, что «странность» «функционально» определенной области видимости, показанная на примере с for циклом, не происходит с let . Такой же пример с таймером может быть переписан так, что будет работать без добавления дополнительных функций:

    i правильно выводится как 1, 2, 3 и 4

    Как можно увидеть, «блочно» объявленные переменные, обходя недостатки «функционально» объявленных переменных, намного упрощают разработку. Для упрощения советую с этого момента использовать let вместо var каждый раз, когда необходимо объявлять переменные в JavaScript.

    Разобравшись, что делает let , рассмотрим разницу между let и const .

    Let vs const

    Как и let , const также имеет «блочно» определенную область видимости. Разница в том, что значение const нельзя изменять после объявления.

    Раз const нельзя изменить, то можно использовать для переменных, которые не будут меняться.

    Допустим, на сайте имеется кнопка, которая запускает модальное окно, и мы знаем, что такая кнопка одна и изменяться не будет. В этом случае, используем const :

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

    Далее рассмотрим стрелочные функции

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

    Стрелочные функции обозначаются стрелкой (=>), что можно увидеть повсюду в коде на ES6. Такое сокращенное обозначение применяется для создания анонимных функций. Они могут быть использованы везде, где имеется ключевое слово function . Например:

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

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

    Подробнее о стрелочных функциях

    Сначала обратим внимание на создание функций.

    В JavaScript, вероятно, привычно создавать функции следующим способом:

    Второй способ создания функций связан с написанием анонимной функции и её присвоением переменной. Для создания анонимной функции необходимо вынести её название из объявления функции.

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

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

    Ниже то, как это выглядит:

    Заметили сходство? По существу, удаляют ключевое слово function и заменяют стрелкой => в немного другом месте.

    Так в чём же заключается суть стрелочных функций? Только в замене function на =>?

    На самом деле дело не только в замене function на =>. Синтаксис стрелочной функции может быть изменён в зависимости от двух факторов:

    1. требуемого количества аргументов
    2. необходимости неявного возврата

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

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

    Под 2-ым фактором понимается необходимость неявного возврата. Стрелочные функции, по умолчанию, автоматически создают ключевое слово return, если код занимает одну строку и не обернут в фигурные скобки <>.

    Итак, ниже два равнозначных примера:

    Эти два фактора могут служить основанием для сокращения кода как с moreThan20 , который был представлен выше:

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

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

    Лексический this

    this — уникальное ключевое слово, значение которого меняется в зависимости от контекста вызова. При вызове снаружи функции this ссылается на объект Window в браузере.

    При вызове this через простую функцию оно ссылается на глобальный объект. В случае с браузерами this всегда будет Window .

    JavaScript всегда устанавливает this окну браузера при вызове простой функции. В свою очередь, это объясняет то, что this в функциях-таймерах типа setTimeout указывает на Window .

    При вызове this в методе объекта, оно ссылается на сам объект:

    При вызове функции-конструктора this ссылается на конструируемый объект.

    При использовании в обработчике события this ссылается на элемент, который запустил событие.

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

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

    Итак, это звучит запутанно, поэтому рассмотрим несколько реальных примеров.

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

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

    Однако всегда можно будет получить правильный контекст для this через event.currentTarget . По этой причине было сказано, что «могут не подойти».

    В-третьих, лексический this может использоваться в тех ситуациях, когда привязка this может неожиданно меняться. Примером является функция-таймер, при которой не нужно будет иметь дело с this , that или self глупостями.

    Такое применение особенно полезно, если необходимо добавить или удалить класс спустя некоторое время:

    В заключение, используй стрелочные функции везде, чтобы сделать код чище и короче, как в примере выше с moreThan20 :

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

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

    Создадим функцию, которая оглашает имя игрока команды. Если написать эту функцию на ES5, то получится:

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

    Текущий код просто не справиться с задачей, если пропустить teamName :

    Вполне уверен, что undefined — это не команда.

    Если игрок не относится ни к одной из команд, то оглашение Zell Liew, unaffiliated будет иметь больше смысла, чем Zell Liew, undefined . Согласен?

    Для того чтобы announcePlayer оглашала Zell Liew, unaffiliated , возможно, как вариант, передать строку unaffiliated вместо teamName :

    Хотя такой подход работает, но лучше внести улучшение в announcePlayer через проверку наличия teamName .

    В ES5 отрефакторенный код стал бы таким:

    Или при знании тернарных операторов возможен выбор более короткого варианта:

    В ES6 с помощью параметров по умолчанию можно добавлять знак равенства = всякий раз при указании параметра. При применении такого подхода ES6 автоматически присваивает значение по умолчанию, когда параметр не определён.

    Так в коде ниже, когда teamName не определён, то teamName принимает значение по умолчанию unaffiliated .

    Довольно не плохо, не правда?

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

    Выше рассмотрено то, что требуется знать о параметрах по умолчанию. Всё это просто и очень удобно.

    Что и как в ES6: хитрости, лучшие практики и примеры. Часть первая. let/const, блоки, стрелочные функции, строки, деструктуризация, модули, параметры, классы

    ES6 изнутри — серия статей про новые возможности, добавленные в язык программирования JavaScript в 6-е издание стандарта ECMAScript, сокращенно ES6.

    Стрелки существовали в JavaScript с самого начала. В первых руководствах по JavaScript советовали оборачивать встроенные скрипты в HTML-комментарии. Это помешало бы браузерам без поддержки JS ошибочно отобразить ваш код JS в виде текста.

    Старые браузеры увидели бы два непонятных тега и комментарий; и только новые браузеры — код JS.

    Ради поддержки этого необычного хака движок JavaScript в браузере обрабатывает символы

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

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