Что лучше изучить JavaScript стандарта ES5, стандарта ES6 или TypeScript


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

Что лучше изучить: JavaScript стандарта ES5, стандарта ES6 или TypeScript?

Это – перевод спецификации EcmaScript 5 с аннотациями. Исходный код доступен на https://github.com/iliakan/es5.

Официальная спецификация доступна на сайте https://www.ecma-international.org. Версия спецификации, послужившая исходной для перевода, находится на es5.github.com.

Любое использование текста (кроме таблицы содержания) должно сопровождаться указанием копирайта ECMA и лицензии. Будет полезно также дать ссылку на этот перевод, т.к. мы будем улучшать его и поддерживать в актуальном состоянии.

Улучшения и исправления вы можете присылать pull-запросом на GitHub или на e-mail: iliakan@gmail.com (Илья Кантор).

Для просмотра аннотаций, следуйте по ссылкам , , , , , и в заголовках. Ключ к маркерам описывает значения аннотаций.

Оглавление

Содержание

© Ecma International 2010

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

На стадии стандартизации выдаются ограниченные разрешения, которые организация Ecma International или ее преемники или правопреемники не будут отменять в течение этого времени.

Настоящий документ и содержащаяся в нём информация предоставляются на условиях «КАК ЕСТЬ», и ECMA INTERNATIONAL ОТКАЗЫВАЕТСЯ ОТ ГАРАНТИЙ, ПРЯМЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, СРЕДИ ПРОЧЕГО, ГАРАНТИЮ ТОГО, ЧТО ИСПОЛЬЗОВАНИЕ СОДЕРЖАЩЕЙСЯ В НАСТОЯЩЕМ ДОКУМЕНТЕ ИНФОРМАЦИИ НЕ НАРУШИТ ЧЬИХ-ЛИБО ПРАВ СОБСТВЕННОСТИ, ИЛИ ПОДРАЗУМЕВАЕМЫЕ ГАРАНТИИ ТОВАРНОГО СОСТОЯНИЯ ИЛИ ПРИГОДНОСТИ ДЛЯ КАКОГО-ЛИБО КОНКРЕТНОГО ПРИМЕНЕНИЯ.

ES6: Вместо введения

Открывая любую книгу, посвященную JavaScript, вы с огромной долей вероятности обнаружите в ней целую главу посвященную истории развития ECMAScript, избыточно описывающую тот долгий путь, пройденный стандартом. Но, на самом деле, ES практически не развивался с момента релиза третьей версии (ES3), который состоялся в декабре 1999 года. Позже, в июне 2011 года, ES5 стал официальным стандартом. Путем нехитрых вычислений вы можете подсчитать, что между релизами двух стандартов прошло чуть менее 12 лет. Что было добавлено в стандарт ES5 в результате 12 лет разработки:

  • Strict mode
  • Аксессоры (геттеры и сеттеры)
  • Небольшие изменения синтаксиса:
    • появилась возможность использовать ключевые слова в качестве свойств объектов
    • строковые литералы теперь можно размещать в несколько строк кода
    • после последнего элемента массива и объекта можно ставить запятую
  • Несколько десятков новых функций в стандартной библиотеке для работы с массивами, объектами (Object.create, Object.defineProperty, Object.keys и так далее), функциями и датами
  • Поддержка JSON

Более подробное описание всех нововведений ES5 можно посмотреть в книге Speaking JavaScript (доступна онлайн).

Список новых возможностей, добавленных в стандарт ES5, можно пересчитать по пальцам одной руки. Из всего вышеперечисленного может сложиться впечатление, что развитие JavaScript и в будущем будет происходить крайне медленно. Это не так. Новый стандарт ES6 принёс с собой огромное количество нововведений, наиболее полный список которых можно посмотреть в этом репозитории (список содержит 350 пунктов).

Все нововведения подразделяются на три группы:

  • Улучшение синтаксиса для уже существующих решений (например, в библиотеках):
    • Классы
    • Модули
  • Новая функциональность в стандартной библиотеке:
    • Новые методы для массивов и строк
    • Promises
    • Maps и Sets
  • Абсолютно новые возможности:
    • Генераторы (Generators)
    • Прокси (Proxies)
    • WeakMaps

ES6 был утвержден в июне 2015 года. Уже сейчас вы можете использовать многие возможности нового стандарта в свежих версиях браузеров и node.js. Подробную таблицу совместимости можно посмотреть здесь.

ES6 или ES2015? Что вообще происходит?

Официальное название нового стандарта − ES2015. Тем не менее, ES6 − название, которое все понимают и используют.

Зачем было менять систему названий версий? Подобное решение связано с новым процессом разработки стандарта. Все предыдущие стандарты разрабатывались крупными компаниями (Google, Microsoft, Yahoo и прочими), связанными с созданием браузеров или других сред, поддерживающих JavaScript. При подобном подходе к разработке стандарта рядовой разработчик практически никак не мог повлиять на развитие языка.

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

  1. Создается предложение внести новую возможность, поменять текущую синтаксическую конструкцию или любое другое улучшение.
  2. Создается “черновик” − подробное описание того, как работает предлагаемое изменение.
  3. Изменение становится “кандидатом” на внесение в стандарт. Будучи “кандидатом” изменение рассматривается теми, кто будет создавать имплементации, а также обычными пользователями.
  4. Изменение вносится в стандарт.

Подобная схема разработки стандарта позволяет тестировать огромное количество изменений и нововведений, а также учитывать мнение людей, ежедневно использующих JavaScript в своей работе. В связи с такими объемными работами над стандартом каждый год (скорее всего, летом) будет выходить новая версия. Таким образом, уже в июне 2020 года новым стандартом станет ES2020, или ES7 (по старой системе наименования).

Стоит ли вообще изучать стандарт ES5 сейчас?

Да, стоит. Вот почему:

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

UA Blog

Blog on instersting topics

TypeScript vs JavaScript

Что такое JavaScript ?

JavaScript был представлен в 1995 году как слабо типизированый скриптовый язык разработанный компанией Netscape чтобы добавить больше динамики в HTML страницы. Но Веб сильно изменился с тех пор. Что было простенькими страничками с одной формой в 1995 теперь большие и сложные веб-приложения. JavaScript изначально не был создан для разработки сложных корпоративных приложений. Сейчас большинство браузеров поддерживают ECMAScript 5 стандарт. То есть обычно когда кто-то говорит «JavaScript» он имеет в виду язык стандарта ES5. Хотя ES5 не последняя версия стандарта. В 2015 году был введен 6 стандарт ES6, в 2020 — ES7 или ES 2020. Но не все браузеры поддерживают новые фичи в полной мере.

Проблему несовместимости можно решить с помощью транспайлеров, таких как Babel или с помощью языка TypeScript.

Что такое TypeScript ?

TypeScript это язык который компилируется в JS, поддерживает статическую типизацию, дает более расширенные возможности для программирования в объектно ориентированном стиле.

Сильные стороны TypeScript

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

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

Мастер Йода рекомендует:  Работа с датой и временем в MySQL

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

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

Сильные стороны JavaScript

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

Вывод — TypeScript vs JavaScript

Если вы не знакомы с TypeScript / ES6 / ES7 и вам нужно написать небольшое веб-приложения, из пару страниц, самым быстрым способом, это сделать будет использования обычного JavaScript(ES5). Но также стоит заметить, что ES5 считается устаревшей(deprecated) версией JavaScript, по этому лучше для вашего проекта и карьеры в целом, углубится в изучения новых стандартов ES6, ES7 и языка TypeScript. По началу вас будут пугать все эти сборщики и транспайлеры, но ваши затраты на обучения оправдают себя если вы хотите остаться в тренде веб разработки. Если вы работаете в команде, и вам нужно создать масштабируемый продукт, который нужно будет поддерживать длительное время, напишите его на TypeScript. Так как сейчас ES6 / ES7 нужно транслировать в ES5, то можно использовать TypeScript вместо Babel, таким образом вы будете поддерживать безопасность типов и ваш код будет работать в всех браузерах.

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

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

ES5 ES6 и т.д. что это все за ху**я?

Читая статьи про Javascript новички(да и я собственно) часто сталкиваются аббревиатурами такими как эти:

  • ES3
  • ES5
  • ES6
  • ES7
  • ES8
  • ES2015
  • ES2020
  • ES2020
  • ECMAScript 2020
  • ECMAScript 2020
  • ECMAScript 2015

Что это все значит?

Все это относится к описанию стандарта, который называется ECMAScript

По сути, ECMAScript — это стандарт на котором базируется язык JavaScript, и часто для сокращения его обозначают как ES.

История стандартизации JavaScript

Дело в том что JavaScript был выпущен в компании NetScape Navigator в 1995 году, но его изначальное название было другим — LiveScript. Лишь через год, в попытках придать ему больший охват и популярность его переименовали в JavaScript, пытаясь сыграть популярном в то время языке Java.

в 1996 году NetScape попросил ECMA International стандартизировать JavaScript. Это привело к появлению официального стандарта ECMAScript.

С тех самых пор термин JavaScript применяется в контексте упоминания самого языка программирования, а ECMAScript — когда говорят о стандарте языка или версии этого стандарта.

До начала 21 века в 1999 году было выпущено 3 версии стандарта ECMAScript и затем на целое десятилетие все затихло…

ECMAScript 3 стала наиболее популярной версий JavaScript и именно ее традиционно использовали веб-разработчики по всему миру при создании сайтов.

Для разработчиков браузеров стандарт ECMAScript по сути является руководством: какие функции и конструкции языка должны поддерживаться и выполняться браузером

За десять лет после выхода третей версии стандарта была неудачная попытка выпуска 4 версии, и лишь в 2009 году комитет смог родить ECMAScript 5 — стандарт, который предусматривал новые/современные возможности JavaScript… Но браузеры не особо быстро отреагировали, а значительная доля пользователей браузера от MicroSoft — Internet Explorer тормозило внедрение и использование новых стандартов языка.

Новый JavaScript

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

Одновременно, ECMA International подхватила активность, пересмотрев свой подход к стандартизации языка.

В результате в 2015 году был «рожден» новый стандарт получивший сокращенное название ES и согласно исторической последовательности версии присвоили 6 — в итоге получилось ES6.

Также значительным прорывом стало то что комитет принял решение о ежегодном пересмотре и выпуске стандарта, в результате начиная с 2015 года мы каждый год получаем новый стандарт ECMAScript.

Для лучшего понимая исторической последовательности развития JavaScript и его стандартов смотрите табличку ниже

Издание Официальное название Дата публикации
ES8 ES2020 июнь 2020
ES7 ES2020 июнь 2020
ES6 ES2015 июнь 2015
ES5.1 ES5.1 июнь 2011
ES5 ES5 декабрь 2009
ES4 ES4 отменен
ES3 ES3 декабрь 1999
ES2 ES2 июнь 1998
ES1 ES1 июнь 1997

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

Синтаксис и обзор функций ES6

Дата публикации: 2020-04-27

От автора: введение в ES6 синтаксис и функции, такие как классы, promises, константы, деструктуризация. А также сравнение со старыми версиями JS. ECMAScript 2015 или ES6 ввел множество изменений в JS. Это обзор самых распространенных функций и различий синтаксисов со сравнением с ES5 там, где это возможно.

Смотреть на GitHub. Заметка: общепринято использовать const, за исключением циклов и переназначений. Однако в этом уроке я буду использовать let вместо var для всех примеров ES6.

Легенда

Я не фанат foo bar baz. Ниже представлена большая часть имен, используемых в этой статье.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Параметр, метод: a, b, c

Объявление переменных

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

ES6: Вместо введения

Открывая любую книгу, посвященную JavaScript, вы с огромной долей вероятности обнаружите в ней целую главу посвященную истории развития ECMAScript, избыточно описывающую тот долгий путь, пройденный стандартом. Но, на самом деле, ES практически не развивался с момента релиза третьей версии (ES3), который состоялся в декабре 1999 года. Позже, в июне 2011 года, ES5 стал официальным стандартом. Путем нехитрых вычислений вы можете подсчитать, что между релизами двух стандартов прошло чуть менее 12 лет. Что было добавлено в стандарт ES5 в результате 12 лет разработки:

  • Strict mode
  • Аксессоры (геттеры и сеттеры)
  • Небольшие изменения синтаксиса:
    • появилась возможность использовать ключевые слова в качестве свойств объектов
    • строковые литералы теперь можно размещать в несколько строк кода
    • после последнего элемента массива и объекта можно ставить запятую
  • Несколько десятков новых функций в стандартной библиотеке для работы с массивами, объектами (Object.create, Object.defineProperty, Object.keys и так далее), функциями и датами
  • Поддержка JSON

Более подробное описание всех нововведений ES5 можно посмотреть в книге Speaking JavaScript (доступна онлайн).

Список новых возможностей, добавленных в стандарт ES5, можно пересчитать по пальцам одной руки. Из всего вышеперечисленного может сложиться впечатление, что развитие JavaScript и в будущем будет происходить крайне медленно. Это не так. Новый стандарт ES6 принёс с собой огромное количество нововведений, наиболее полный список которых можно посмотреть в этом репозитории (список содержит 350 пунктов).

Все нововведения подразделяются на три группы:

  • Улучшение синтаксиса для уже существующих решений (например, в библиотеках):
    • Классы
    • Модули
  • Новая функциональность в стандартной библиотеке:
    • Новые методы для массивов и строк
    • Promises
    • Maps и Sets
  • Абсолютно новые возможности:
    • Генераторы (Generators)
    • Прокси (Proxies)
    • WeakMaps

ES6 был утвержден в июне 2015 года. Уже сейчас вы можете использовать многие возможности нового стандарта в свежих версиях браузеров и node.js. Подробную таблицу совместимости можно посмотреть здесь.

ES6 или ES2015? Что вообще происходит?

Официальное название нового стандарта − ES2015. Тем не менее, ES6 − название, которое все понимают и используют.

Зачем было менять систему названий версий? Подобное решение связано с новым процессом разработки стандарта. Все предыдущие стандарты разрабатывались крупными компаниями (Google, Microsoft, Yahoo и прочими), связанными с созданием браузеров или других сред, поддерживающих JavaScript. При подобном подходе к разработке стандарта рядовой разработчик практически никак не мог повлиять на развитие языка.

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

  1. Создается предложение внести новую возможность, поменять текущую синтаксическую конструкцию или любое другое улучшение.
  2. Создается “черновик” − подробное описание того, как работает предлагаемое изменение.
  3. Изменение становится “кандидатом” на внесение в стандарт. Будучи “кандидатом” изменение рассматривается теми, кто будет создавать имплементации, а также обычными пользователями.
  4. Изменение вносится в стандарт.

Подобная схема разработки стандарта позволяет тестировать огромное количество изменений и нововведений, а также учитывать мнение людей, ежедневно использующих JavaScript в своей работе. В связи с такими объемными работами над стандартом каждый год (скорее всего, летом) будет выходить новая версия. Таким образом, уже в июне 2020 года новым стандартом станет ES2020, или ES7 (по старой системе наименования).

Стоит ли вообще изучать стандарт ES5 сейчас?

Да, стоит. Вот почему:

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

Нововведения в ES6 для новичков

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

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

Регулярки

Разное

Работа с канвасом

Практика

  • урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
    Работа с
    AJAX в JavaScript
    Работа с
    AJAX + PHP

Контекст

Drag-and-Drop

  • Урок №
    Введение
    в ООП в стиле ES6
  • Урок №
    Основы
    работы с ООП
  • Урок №
    Наследование
    классов в JavaScript
    Продвинутая работа
    с классами на JavaScript
  • Урок №
    Применение
    ООП при работе с DOM
  • Урок №
    Практика
    по ООП в JavaScript
  • Тут скоро будут еще уроки
    по функциональному и прототипному
    стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

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

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

Команда let вместо var

Кроме команды var для объявления переменных появилась еще и команда let. Эта команда более строгая и нужна для того, чтобы ограничить область видимости переменных фигурными скобками.

Давайте посмотрим разницу между var и let. Посмотрите, как работает var: он не создает область видимости внутри if — если объявить переменную снаружи if, а потом переопределить ее внутри — снаружи эта переменная тоже поменяется:

А теперь посмотрим, как работает let — он создает разные области видимости снаружи и внутри if. И, если объявить переменную снаружи if, а затем попытаться затереть ее внутри — она не изменится:

Команда let создает разные области видимости не только в if, но и в циклах и вообще в любых фигурных скобках.

Константы

В ES6 также появились константы. Константы — это такие переменные, значения которых нельзя изменить. Зачем нужны константы: в константу можно задать некоторое значение в начале работы скрипта — и можно будет гарантировать, что это значение в дальнейшем случайно не поменяется.

Константа объявляется командой const вместо команды var:

Если попытаться сменить значение константы — мы получим ошибку:

Константы-объекты

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

А вот затереть объект и записать туда что-нибудь другое уже не получится — вы увидите ошибку:

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

Следующее понятие, которое появилось в ES6 называется деструктуризация. Деструктуризация — это разделение массива или объекта в отдельные переменные.

Пусть у нас дан массив [‘Иванов’, ‘Иван’]. Давайте фамилию положим в переменную surname, а имя — в переменную name. Для этого массив присвоим вот такой конструкции: var [surname, name], вот так: var [surname, name] = [‘Иванов’, ‘Иван’].

Эта конструкция [surname, name] и есть деструктуризация. Получится, что первый элемент массива (то есть ‘Иванов’) запишется в переменную surname, а второй — в переменную name.

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

Можно начать записывать в переменные не сначала массива, а пропустить некоторые значения. Давайте, к примеру, пропустим фамилию, а имя и возраст запишем в переменные. Для этого при указании переменных перед первой переменной поставим запятую, вот так: [, name, age].

Посмотрим на примере:

Можно пропустить не одно значение, а несколько:

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

Можно сохранить оставшиеся значения массива в отдельный массив. Для этого перед переменной, в которую положится остаток, следует написать троеточие. В следующем примере фамилия и имя запишутся в соответствующие переменные, а остаток массива в переменную rest:

Если в массиве меньше элементов, чем переменных, то в «лишние» переменные запишется undefined:

Для переменных можно указывать значения по умолчанию. В этом случае, если переменной не хватит элемента массива — возьмется значение по умолчанию.

В следующем примере переменной name по умолчанию указано значение ‘Аноним’:

А вот если для переменной name будет значение в массиве — значение по умолчанию будет проигнорировано:

В качестве значения по умолчанию можно также указывать функцию:

Интересный пример применения деструктуризации — поменяем переменные местами:

Деструктуризация объектов

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

Можно сделать так, чтобы имена переменных не совпадали в именами ключей объекта:

Можно также указывать значения по умолчанию. К примеру, укажем для цвета по умолчанию значение ‘black’, закомментируем элемент объекта с ключом color — и теперь в переменную color положится ‘black’:

Можно также менять названия переменных на свои при этом задавая значения по умолчанию:

Итераторы

В ES6 появились так называемые итераторы for-of, которые позволяют более удобно перебирать элементы массива, подобно объектам через for-in:

Напоминаю, почему массивы нельзя перебирать через for-in — это вызовет проблемы, если с массивом поработали как с объектом и добавили в него какое-либо свойство: в этом случае это свойство также попадет в перебор (а мы этого не хотели):

Итераторы для строк

Итераторы работают и для строк — в этом случае в цикле строка будет перебираться посимвольно:

Строки

В JavaScipt в строках не должно быть переноса строки — это приведет к ошибке:

Это поправили в ES6 — только строки нужно брать не в обычные кавычки, а в косые:

В косых кавычках можно вставлять выражения в формате $ <имя переменной>— в этом случае туда подставятся значения переменных, а также выполнятся математические операции:

Нововведения в функциях

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

Значения по умолчанию

В функциях наконец-то появились значения по умолчанию. Давайте разберем их на примере: у нас есть функция square, которая возводит число в квадрат. Сделаем так, чтобы, если параметр функции не передан, она возводила в квадрат число 3, а если передан — то переданное число:

Значением по умолчанию также может служить результат работы другой функции:

Деструктуризация в функциях

В параметрах функций также доступна деструктуризация.

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

Функция также может принимать объект, элементы которого запишутся в разные переменные:

Также можно указывать параметры по умолчанию:

Также можно переименовывать переменные:

Ну, и можно комбинировать параметры по умолчанию и переименование:

Функции через =>

В ES6 появился упрощенный синтаксис функций через =>. Эта стрелка заменяет команду function и, если внутри функции только одна строка, — то return тоже не нужен — функция вернет результат выполнения этой строки.

В следующем примере вы видите функцию в новом стиле, а ниже эквивалент в старом стиле:

Если у функции несколько параметров — их надо брать в скобки:

Если функция вообще без параметров — то нужны пустые круглые скобки:

Если в функции несколько строк — необходим return:

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

Доступность this

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

Пусть у нас дан элемент и массив:

Давайте к этому элементу привяжем функцию, а в этой вызовем другую функцию, например, через forEach:

Все переменные, определенные выше forEach — доступны и в нем:

Однако, это не касается this — снаружи forEach он ссылается на наш элемент, а вот внутри него this будет недоступен или будет ссылаться на объект window (так устроен this — его значение зависит от контекста):

Чтобы сделать this доступным внутри вложенной функции обычно поступают так: записывают его в какую-либо переменную снаружи вложенной функции (переменную можно назвать как угодно, обычно это that или self). Получается, что внутри вложенной функции наш this будет доступен как that:

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

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

Что лучше изучить: JavaScript стандарта ES5, стандарта ES6 или TypeScript?

334 просмотра

1 ответ

145 Репутация автора

Я новичок в TypeScript, и у меня возникли некоторые проблемы при компиляции кода ES6.

У меня есть файл .ts:

Когда я запускаю, tsc —module es6 —target es2015 src/test.ts он компилируется нормально, но tsc —module es6 —target es5 src/test.ts , кажется, не работает? Я хотел бы нацелиться на es5, но при этом выдает ошибку:

Не могу ли TypeScript скомпилировать в es5, или мне нужно будет запустить babel поверх компилятора TypeScript?

Ответы (1)

3 плюса

90858 Репутация автора

Typescript может компилироваться в es5, единственная проблема в том, что find метод определен в es2015 стандарте, поэтому typcript будет предполагать, что его не будет.

Typescript имеет два способа управления тем, какой стандарт вы компилируете, target который сообщает компилятору, как компилировать синтаксис, и lib который сообщает компилятору, как выглядит среда выполнения ( более подробный ответ см. Здесь )

Чтобы нацелиться, es5 но получить find метод, вам также нужно указать lib:

Обратите внимание, что машинопись не предоставит полифилы, вы либо предоставите свои собственные, либо надеетесь, что они find существуют во время выполнения.

Flow+Babel или TypeScript?

30.01.2020, 07:48

TypeScript вместо babel и webpack
Создал tsconfig.json При помоще него можно транслировать esnext в es5, это хорошо работает, но.

Babel не хочет трансплитить
Здравствуйте, вот есть конфиг: var webpack = require(‘webpack’); module.exports = < entry.

Сохранение this в TypeScript
Доброго дня. Подскажите пожалуйста, как можно сохранить this класса так, чтобы можно было.

Перевод C# на TypeScript
Доброго времени суток))) (Извините если не в ту тему) Существует рабочая программы для локального.

Пространства имен в TypeScript
П.С Интересно , глядя на исходники ангуляр 2 , нет ни одного обьявления пространства имен , все.

06.02.2020, 10:55 2

Новый Angular написан на TypeScript и использует для программирования TypeScript.

Я пока решил отложить изучение ECMAScript 6 (и более новых стандартов) в пользу TypeScript. На TS написан 3D движок Babylon.js, который поддерживает программирование на TS. Для BJS TS нативный. Среда VSCode написана на TS и для неё он нативный. Поэтому я думаю, есть перспектива изучать TS.

Так же изучаю старый JS, который поддерживается на всех браузерах и в который компилируется TS. Да, я понимаю, что код на новом стандарте JS можно переводить в старый с помощью Babel, но сил и времени не хватает, чтобы охватить и эту область. Поэтому пока мой выбор: старый JS и TS

На старом JS тоже можно писать в ООП стиле. Хорошая краткая книга: The Principles of Object-Oriented JavaScript — Nicholas C. Zakas

В тоже время для поиска работы JS препочтительнее, чем TS. Но тут спорный вопрос, что заказчики чаще требуют: старый JS или новый JS+Babel.

06.02.2020, 11:41 [ТС] 3

8Observer8, да в принципе я использую TypeScript на работе, т.к. у нас там Angular 5.
Для личного же проекта решил попробовать react, прикрутил туда TypeScript и собственно пожалел) Комьюнити реакта в большей степени не используют TypeScript, в связи с этим и проблемы подключить сторонние пакеты к своему ts-проекту.

Посмотрел в сторону Flow, и вот пока не знаю стоит ли его изучать.

Мастер Йода рекомендует:  Распознавание голоса и чтение текста в браузере в 3 строки на JavaScript демонстрация и примеры кода
Добавить комментарий