Что нового в ES2018 JavaScript

Что нового в ES2018 JavaScript

От автора: в этой статье я расскажу о новых возможностях, представленных через ES2018 JavaScript (ES9), с примерами того, для чего они предназначены и как их использовать.

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

Технический комитет 39 (TC39) состоит из сторон, включающих поставщиков браузеров, которые собираются для продвижения предложений JavaScript в соответствии со строгой процедурой:

Этап 0: идеи -

Первоначальное представление идей для новых или улучшенных функций ECMAScript.

Этап 1: предложение -

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Этап 2: черновик -

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

Этап 3: кандидат -

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

Этап 4: окончательный -

Предложение готово для включения в ECMAScript. Функцию следует считать стандартом только после достижения этой стадии. Однако на реализацию в браузерах и на других платформах, например, Node.js, может потребоваться больше времени.

ES2016

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

Метод массива includes(), который возвращает true или false, когда значение содержится в массиве, и

Оператор экспоненции a ** b, который идентичен Math.pow(a, b).

ES2017

В ES2017 был представлен широкий спектр новых функций:

Асинхронные функции для более четкого синтаксиса Promise

Object.values () для извлечения массива значений из объекта, содержащего пары имя-значение

Object.entries(), который возвращает массив подмассивов, содержащих имена и значения в объекте

Object.getOwnPropertyDescriptors(), чтобы вернуть объект, определяющий дескрипторы свойств для собственных свойств другого объекта (.value, .writable, .get, .set, .configurable, .enumerable)

padStart() и padEnd () — элементы отступа строк

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

SharedArrayBuffer и Atomics для чтения и записи в разделяемые ячейки памяти (отключено в ответ на уязвимость Spectre).

ES2018

ECMAScript 2018 (или ES9, если вы предпочитаете старый формат) уже доступен. Следующие функции достигли этапа 4, хотя рабочие реализации в браузерах на момент написания могут быть на разных стадиях.

Асинхронная итерация

В какой-то момент потока async/await, вы пытаетесь вызвать асинхронную функцию внутри синхронного цикла. Например:

Это не будет работать. Как и это:

Сами циклы остаются синхронными и всегда будут выполняться перед их внутренними асинхронными операциями.

ES2018 представляет асинхронные итераторы, которые похожи на обычные итераторы, за исключением того, что метод next() возвращает Promise. Поэтому ключевое слово await можно использовать с циклами for … of для последовательного запуска асинхронных операций. Например:

Promise.finally()

Цепочка Promise может либо успешно завершиться и достичь последней .then(), либо дать сбой и запустить блок .catch(). В некоторых случаях нам нужно запустить тот же код независимо от результата — например, для очистки, удаления диалогового окна, закрытия соединения с базой данных и т. д.

Прототип .finally() позволяет указать конечную логику в одном месте, а не дублировать ее в последних .then() и .catch():

Свойства Rest/Spread

ES2015 представил параметры rest и операторы spread. Трехточечная нотация (…) применяется только к операциям массива. Параметры rest преобразуют последние аргументы, переданные функции, в массив:

Оператор spread работает наоборот — преобразует массив в отдельные аргументы, которые могут быть переданы функции. Например, Math.max() возвращает наибольшее значение, учитывая любое количество аргументов:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

ES2018 обеспечивает аналогичный функционал rest/spread для деструктуризации объектов, а также массивов. Пример:

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

Как и в случае массивов, вы можете использовать только один параметр rest в конце объявления. Кроме того, он работает только для верхнего уровня каждого объекта, но не для под-объектов. Оператор spread может использоваться в других объектах. Например:

Вы можете использовать оператор spread для клонирования объектов (obj2 = { …obj1 };), но имейте в виду, что вы получаете только частичные копии. Если свойство содержит другой объект, клон будет ссылаться на тот же объект.

Именованные группы захвата регулярных выражений

Регулярные выражения JavaScript могут возвращать объект соответствия — подобное массиву значение, содержащее строки соответствия. Например, для анализа даты в формате ГГГГ-ММ-ДД:

Это трудно для чтения, и изменение регулярного выражения также может изменить индексы объектов соответствия. ES2018 делает возможным именование групп с использованием обозначений ?<name> сразу после открытия скобки захвата (. Например:

Для любой именованной группы, которая не содержит соответствия, свойству присваивается значение undefined. Именованные группы захвата также могут использоваться в методах replace(). Например, для преобразования даты в формате ММ-ДД-ГГГГ в формат US:

Утверждения регулярных выражений lookbehind

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

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

Это положительное утверждение lookbehind; должен существовать нецифровой символ \D. Существует также отрицательное утверждение lookbehind, которое устанавливает, что значение не должно существовать. Например:

Флаг регулярных выражений s (dotAll)

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

Переход к свойствам Unicode через регулярные выражения

До сих пор в регулярных выражениях нельзя было получить доступ к свойствам символа Unicode через встроенные средства. ES2018 добавляет переход к свойствам Unicode — в форме \p{…} и \P{…} — в регулярных выражениях, в которых установлен флаг u (unicode). Например:

Изменения в литералах шаблонов

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

Раньше \u запускал переход к unicode, \x запускал переход к хекс, а символ \, за которым следовали цифры, обозначал переход к восьмеричным значениям. Это делало невозможным создание определенных строк, таких как путь к файлу Windows C:\uuu\xxx\111. Для получения дополнительной информации обратитесь к документацию по литералам шаблонов MDN.

Это что касается ES2018, но работа над ES2019 уже началась. Есть ли какие-либо функции, которые вы отчаянно хотите увидеть в следующем году?

Автор: Craig Buckler

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

FullStack-Мастер

FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular 6

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree