Автор оригинала: FreeCodeCamp Community Member.
В 2015 году ECMA International завершила Ecmascript 6 Технические характеристики и переименовал это на Ecmascript 2015 (ES 2015) Отказ Это означает, что у нас есть новый стандарт в письменном виде JavaScript код.
Звучит круто, могу ли я использовать это?
ES2015 поставляется с кучей прохладных новых функций, которые мы кратко обсудим позже. Теперь, когда эти функции в основном заморожены для этой итерации, безопасно начать работать с ними в полномасштабных производственных приложениях.
Более того, я призываю вас мигрировать свой старый код, как только вы можете на новый стандарт, потому что Любая линия кода, которую вы пишете, используя предыдущий стандарт ES5, устареют с 1 дня Отказ
Как вы можете видеть в Таблица совместимости , ES2015 принимается в быстрый темп всех браузеров, даже Сафари и Microsoft Edge (Необычное имя, которое они придумали для новой версии IE). Не все функциональные возможности еще реализованы, но вы уже можете использовать хороший кусок новых функций непосредственно в браузере.
Однако я не советую вам написать код ES2015, а затем запустить его непосредственно в браузере. Скажи привет Бабел Отказ
Babel.js это транспортер То, что вы можете очень легко интегрироваться в процесс сборки JavaScript.
Если вы хотите узнать больше о том, как использовать Babel для всех ваших приложений JavaScript – или как реализовать процесс сборки – я призываю вас читать Эта статья Отказ Тогда возьми себя знакомым с задачами, как Грунт и Гульп и с модульными бундурами, как WebPack и Брасифицировать Потому что они медленно, но наверняка становится отраслевыми стандартами.
Таким образом, мы пишем код ES2015 сегодня, код транспортируется на ES5, что почти на 100% поддерживается в большинстве современных браузеров. Как только большинство основных функций, предлагаемых ES2015, реализуются в современных браузерах, мы просто избавляемся от транспортера Бабела из нашего процесса сборки. Поэтому с одним шагом мы приводим наш текущий код в стандарт ES2015.
Какие новости?
Я помню, как быть очарованным количеством новых вещей, которые ES6 обещали принести, поэтому, если вы хотите полное руководство для новых функций, которые я могу посоветовать вам следовать этим «учебникам»:
- http://es6-features.org/
- https://github.com/lukehoban/es6features
- https://babeljs.io/docs/learn-es2015/
Теперь давайте обсудим некоторые из моих любимых новых функций.
Функции стрелки
Функции arrow позволяют писать анонимные функции гораздо более компактным способом, отбросив много кода котел. Это прокладывает путь для программирования функционального стиля и позволяет программистам сохранить свое здравоохранение при чтении функционального кода, написанного другими.
Прохладная часть с функциями стрелки состоит в том, что у вас никогда не будет написать слово Функция – За исключением случаев, в которых вам действительно нужна названная функция. Тогда вы читаете о новом Улучшенный объект буквальный обозначение И вы понимаете, что слово Функция Вероятно, будет забыть в ближайшее время.
Переменные
Функциональное переменное поведение уже давно было кульминацией любого интервью JavaScript. ES2015 облегчает жизнь тех, кто поступает от языков программирования на основе C, в котором переменная наносится в блок кода, в котором он объявлен. С ” Пусть ” и ” const “, ваш код гораздо более выразительный. Давайте посмотрим на несколько примеров:
Как вы, наверное, выяснили его сейчас, – пусть « » эквивалентно “ var” , но это так называется., Это означает, что он не существует вне блока, в котором он определен.
С другой стороны, « const» Позволяет определить переменную с фиксированным значением. Это может получить значение только тогда, когда оно создано, и любое последующее задание на « const» не имеет эффекта. Это очень важно с точки зрения выразительности, потому что вы можете объявить все переменные, которые вы не изменяете в своем коде с помощью « const» И все остальные с ” пусть . “ Таким образом, любое значение, которое имеет потенциал для мутата в вашем коде, легко отслеживается с самого начала. Если все ваши переменные являются постоянными (без каламбура), вам не нужно беспокоиться о побочных эффектах или нежелательных государственных мутациях.
Разрушение
Говоря о выраженности, разрушение предлагает тонны способов сказать больше с меньшими линиями кода. Эта функция в основном делает образец сопоставления на объектах и массивах, позволяя вам быстро доступа к частям.
С деструктурией вам больше не нужно создавать переменные, которые указывают на определенные свойства или к субъекту параметра функции, как в FullName () Пример выше. Также легче вернуть несколько значений из одной функции без записи слишком большого количества строк кода. Разрушивание – это весело, когда он сочетается с новыми способами обращения с параметрами функции: параметры по умолчанию и остальные и распространенные операторы.
Параметры функции – по умолчанию, отдых, распространение
Параметры по умолчанию довольно прямые, и уже присутствуют во многих языках программирования, поэтому ничего не в состоянии. Однако Отдых и Распространение Операторы позволяют обрабатывать параметры функции любым способом.
Генераторы
Хорошо, мы играем с синтаксисом, мы сделали несколько крутых функциональных программиров в стиле программирования, давайте выкопатем глубоко в одну из самых интересных функций, предлагаемых ES2015, а именно Генераторы Отказ Очень кратко объяснил, генераторы являются заводскими функциями для Итераторы Отказ Все еще запутался? Я тоже был, но давайте посмотрим на пример
Так что здесь происходит? Генератор в основном является функцией, которая может быть остановлена в любое время и возобновлено после этого. Генератор остановлен, когда доходность Заявление выполняется, и он возвращает какое-либо значение, которое мы размещаем рядом с заявлением о выходе. Мы используем Далее () Функция Вызов, чтобы пойти на один шаг за раз, собирая значение, полученное генератором.
В качестве дополнительной функции вы можете пройти параметр на следующую () функцию, и этот параметр считается возвратом оператора выхода в генераторе. Таким образом, мы в основном имеем двустороннюю связь между функцией генератора и внешним миром.
Большая сделка с генераторами является их потенциал для использования в частях кода, который обрабатывает асинхронные вызовы. Представьте, что ситуация, в которой вам необходимо выполнить 3 различных вызова API в определенном порядке, всегда используя результат одного вызова в качестве параметра к следующему вызову. Представьте, как этот код будет выглядеть с обратными вызовами или даже с обещаниями.
Что если мы можем сделать что-то вроде этого вместо этого?
Уже есть рабочие решения, позволяющие писать последовательные асинковые вызовы с генераторами и обещаниями. В качестве примера вы можете проверить это Статья, которая показывает аналогичное решение Отказ
Конечно, есть много других прохладных функций, таких как строковые шаблоны, родные обещания, модули в стиле AMD, новые функции, добавленные на прототипы номера, строки, массива и объекта и многое другое. Но я представил здесь те, которые я считаю наиболее полезным в обычных задачах кодирования. Тем не менее, есть темный поворот с одной из новых функций, которые я хочу обсудить.
Классы
Могу поспорить, что 50% людей, которые читают спецификации, с нетерпением ждали этого, а остальные 50% говорили: «Но … почему ???» Я во владение второй категории здесь.
ES2015 приносит синтаксис сахара, который использует прототипическую создание объекта в задней части. Вот пример:
Получите это из головы, JavaScript делает Не есть классы. JavaScript не реализует объектно-ориентированное программирование на основе классов, и этого не будет этого делать. Модель наследования в JavaScript является прототипом, объекты создаются на основе прототипов других объектов. Все эти синтаксические элементы, которые вы видите в фрассетере класса, как: Конструктор, Get, Set, Static только реализуются в спине, как обычные функции или простые значения, добавленные на прототипы.
Добавление класса в JavaScript – это, вероятно, худшая ошибка, движущаяся вперед. Подумайте, сколько людей неверно истолковывает смысл « это ». Умножьте, что на 10, и вы получаете количество людей, которые не будут неправильно интерпретировать значение « класс ».
Все эти конструкции исходят из мира ориентации на основе классовой объектной. Люди просто нужно бросить эти практики, потому что они не подходят с парадигмами, реализованными в JavaScript. Дальше больше, они путают новичков больше, чем когда-либо.
Мое стандартное интервью содержит следующий набор вопросов, которые я прошу последовательно:
- «Это занятия обязательными в ООП?»
- “Язык OOP JavaScript?”
- “У него есть классы?”
Представьте, сколько времени я потенциально отпущу, пытаясь объяснить людям, что «классы», которые они видят в JavaScript, на самом деле не классы.
Примите функциональное программирование
На светлой стороне, с ES2015 у нас есть все эти новые функции, которые позволяют нам писать лучше, очистить и в определенной степени более быстрый код. Я думаю, что сейчас самое время принять функциональное программирование как фундаментальную парадигму в JavaScript. Предпочтительно вам не придется снова писать одно оператор петли, кроме как в некоторых редких ситуациях.
С Const и Пусть Вы можете добавить еще один уровень выразительности для всех ваших переменных. Вы, вероятно, избегаете использования var с этого момента на. Функции стрелки в сочетании с классическими функциями итератора позволяют вам написать функциональное реактивное программирование, в основном создавая потоки функциональности.
Ваш код становится более сжатым, более функциональным и менее состоятельным. Это также означает, что ваш код проще тестирует и поддерживать, а также гораздо менее склонны к ошибкам, а также функции чистых функций, неизменных данных. Там есть много контента на преимуществах функционального программирования, и я думаю, что итерация на эти очки снова не имеет смысла в объеме этой статьи.
Работа с Babel не так сложно, и я призываю вас начать делать это сегодня. Помните, что код, который вы пишете сегодня, используя синтаксис ES5 устареют. Ярмарка и простая.
Что дальше?
ES2015 был огромным выпуском с большим количеством изменений. Комитет TC39 начался с другим подходом, и каждый год они будут стандартизировать новые функции, в основном расщепленные то, что изначально предназначено для использования в качестве ES7 на более мелкие куски.
Некоторые из будущих функций JavaScript будут включать в себя: Async-функции, декораторы объекта/функции и такие вещи, как SIMD (Однозначные инструкции, несколько данных).
Обычно все будущие функции называются в целом Esnext, если вы видите это где угодно. С Babel вы можете даже играть с некоторыми из этих будущих функций сегодня!
Вот некоторые статьи, которые я рекомендую чтение относительно функций Esnext: