Оригинальный автор: Фараз Кельхини
Переводчик: Джоти, UC International R&D
Спереди написано: Добро пожаловать в официальный аккаунт «UC International Technology», мы предоставим вам качественные технические статьи, связанные с клиентом, сервером, алгоритмом, тестированием, данными, интерфейсом и т. д., не ограничиваясь оригинальностью и перевод.
Примечание редактора: Когда-то давно, когда я был молод, я держал в руках «Введение в стандарты ES6» Учителя Руана Ифэна и сетовал на то, что JS меняется так быстро, что я боялся, что не смогу его изучить. Пока я не написал ES6 несколько лет сегодня, я оглядываюсь назад и знаю: не учите ES X ради изучения ES X, как бы ES на самом деле не был синтаксическим сахаром, это вспомогательная роль, ключ к разгадке что это может дать нашему развитию.выгоды,не ставить телегу впереди лошади. Новые функции ES2018, представленные сегодня, по-прежнему имеют немало важных моментов, давайте посмотрим.
Девятая редакция стандарта ECMAScript, официально объявленная как ECMAScript 2018 (или сокращенно ES2018), была выпущена в июне 2018 года. Начиная с ES2016, новая версия спецификации ECMAScript выпускается раз в два года, добавляя не больше функций, чем основная версия. Эта последняя версия продолжает ежегодный цикл выпуска, добавляя четыре новыхRegExpфункции, свойства rest/spread, асинхронная итерация иPromise.prototype.finally. Кроме того, он снимает синтаксические ограничения escape-последовательностей из шаблонов разметки.
Мы подробно объясним эти новые изменения в следующих подразделах 😉.
свойства покоя/распространения
Еще в ES2015 самой интересной особенностью был оператор спреда. Этот оператор значительно упрощает копирование и объединение массивов. вы можете использовать его для заменыconcat()илиslice()метод:
Оператор распространения также удобен в ситуациях, когда отдельные элементы массива должны быть переданы в функции по отдельности в качестве аргументов. Например:
ES2018 расширяет этот синтаксис, добавляя свойство распространения в грамматику объекта. Используя свойство распространения, вы можете скопировать собственные перечисляемые свойства объекта в новый объект. Например 🌰:
В этом коде...Оператор используется для получения свойств объекта obj1 и присвоения их объекту obj2. До ES2018 это приводило к ошибке. Если есть несколько свойств с одинаковым именем, будет взято последнее значение:
Свойство Spread также предоставляет новый способ объединения двух или более объектов вместоObject.assign()Использование метода:
В этом кодеObject.assign()Метод выполняет свое унаследованное свойство установки, в то время как свойство распространения полностью игнорирует этот шаг.
Запомнить! Свойство распространения копирует только перечисляемые свойства. В приведенном ниже примереtypeСвойство не появляется в скопированном объекте, потому что егоenumerableсобственностьfalse:
Унаследованные свойства игнорируются, даже если они являются перечисляемыми:
В этом кодеcar2наследоватьcarизcolorАтрибуты. Поскольку спред копирует только свойства самого объекта, возвращаемое значение не содержитcolorАтрибуты.
Помните, что разворот — это всего лишь поверхностная копия объекта. Если свойство содержит объект, копируется только ссылка на объект:
copy1серединаxатрибут сcopy2серединаxСвойства ссылаются на один и тот же объект в памяти, поэтому оператор строгого равенства возвращает true.
Еще одна полезная функция, добавленная в ES2015, — это остаточные параметры, которые позволяют программистам JavaScript использовать...Представляет значения в виде массива. Например:
arrПервый элемент присваивается x, остальные присваиваютсяrestПеременная. Этот паттерн, называемый деструктурированием массива, был настолько популярен, что Технический комитет Ecma решил привнести аналогичную функциональность в объекты:
Этот код использует объект присваивания свойств деконструкции остатка.objСкопируйте оставшиеся самоперечисляемые свойства в новый объектrestсередина. Важно отметить, что свойство rest всегда должно быть в конце объекта, иначе будет сообщено об ошибке:
Кроме того, использование нескольких остальных синтаксисов в объекте вызовет ошибку, если они не вложены друг в друга:
Поддержка свойств Rest/Spread
8.0.0 (требуется флаг --harmony runtime)
-
8.3.0 (полная поддержка)
Асинхронная итерация
Перебор наборов данных является неотъемлемой частью программирования. До ES2015 JavaScript предоставлялfor,for...inа такжеwhileзаявления и т.д.map(),filter()а такжеforEach()и другие методы. Чтобы программистам было проще обрабатывать элементы коллекции один за другим, в ES2015 был представлен интерфейс итератора.
если объект имеетSymbol.iteratorсвойство, это означает, что оно является итерируемым. В ES2015 строки и объекты коллекций, такие какSet, Mapа такжеArray) с участиемSymbol.iteratorсвойства и, следовательно, повторяемые. Следующий код иллюстрирует, как получить доступ к итерируемым элементам по одному ☝️:
Symbol.iterator— известная нотация для функций, возвращающих итераторы. Взаимодействие с итераторами в основном используетсяnext()метод. Этот метод возвращаетvalueа такжеdoneОбъект с двумя свойствами.valueСвойство содержит значение следующего элемента в коллекции.doneсвойство содержитtrueилиfalse, указывая, был ли достигнут конец набора.
Простые объекты по умолчанию не являются итерируемыми, но если они определены наSymbol.iteratorсвойство, оно может стать итерируемым объектом следующим образом:
collectionОбъект является итерируемым, потому что он определяетSymbol.iteratorАтрибуты. использование итератораObject.keys()метод принимает массив имен свойств объекта и присваивает их константамvalues.Он также определяет переменную счетчикаi, начальное значение равно 0. Когда итератор выполняется, он возвращаетnext()объект метода. каждый звонокnext()метод, он возвращает{value, done}пара ключ-значение, гдеvalueсохраняет следующий элемент в коллекции,doneСодержит логическое значение, указывающее, достиг ли итератор конца коллекции.
Хотя приведенный выше код работает отлично, он не должен быть таким сложным. К счастью, функции-генераторы могут значительно упростить этот процесс:
В этом генератореfor...inЦикл используется для перечисления коллекции, что дает значение каждого свойства. Результат точно такой же, как и в предыдущем примере, но с гораздо меньшим количеством кода.
Недостатком итераторов является то, что они не подходят для представления асинхронных источников данных. Средство от ES2018 — это асинхронные итераторы и асинхронные итерации. Асинхронные итераторы отличаются от традиционных итераторов тем, что они не возвращают{value，done}Обычный объект формы, но возвращает выполнение{value，done}изpromise.async iterable определяет асинхронный итератор, который возвращает асинхронный итератор.Symbol.asyncIteratorметод (обратите внимание, что это неSymbol.iterator).
Пример 🌰 может быть более понятным:
Обратите внимание, что невозможно добиться того же результата, используя итератор промисов. Хотя обычный синхронный итератор может асинхронно генерировать детерминированные значения, он по-прежнему требует синхронного детерминированного состояния «выполнено».
Опять же, вы можете упростить этот процесс, используя такие функции генератора:
Обычно функция-генератор возвращаетnext()Объект Builder для методов. при звонкеnext(), он возвращает{value，done}пара ключ-значение, котораяvalueСвойство содержит значение доходности. Асинхронный генератор аналогичен, за исключением того, что он возвращает завершенный{value，done}обещания.
использоватьfor...ofоператор может легко перебирать итерации, ноfor...ofнельзя использовать с асинхронными итерациями, потому чтоvalueа такжеdoneне синхронно. По этой причине ES2018 предоставляетfor...await...ofутверждение. Давайте посмотрим на пример:
В этом кодеfor...await...ofоператор неявно вызываетSymbol.asyncIteratorметод для получения асинхронного итератора. Каждый раз в цикле итераторnext()метод, который возвращает промис. После того, как промис выполнен, объект результатаvalueсвойство читать вxПеременная. Цикл продолжается до тех пор, пока объект неdoneСтоимость свойстваtrue.
Стучите по доске!for...await...ofОператоры допустимы только в асинхронных генераторах и асинхронных функциях. Нарушение этого правила вызовет SyntaxError.
next()Способ может вернуться отклоненным обещанием. Для изящной обработки будет отклонение обещания, вы можете использоватьtry...catchупаковка оператораfor...await...ofзаявление следующим образом:
Поддержка асинхронного итератора
Node.js:
8.10.0 (требуется флаг --harmony_async_iteration)
10.0.0 (полная поддержка)
Promise.prototype.finally
Еще один захватывающий спецэффект с ES2018 —finally()метод. Несколько библиотек JavaScript ранее реализовывали подобный подход, и он оказался полезным. Это побудило технический комитет Ecma официальноfinally()добавлено в спецификацию. Используя этот метод, разработчик может напрямую выполнить код в этом блоке кода, не беспокоясь о судьбе промиса. Давайте рассмотрим простой пример:
finally()Методы могут выполнять некоторую очистку после завершения операции, независимо от того, была ли операция успешной или нет. В этом кодеfinally()Метод скрывает счетчик загрузки сразу после обработки сбора данных. Регистрационный код в функции будет выполняться вне зависимости от того, выполнено обещание или нет, и разработчику не нужноthen()а такжеcatch()Повторите логику в методе.
использоватьpromise.then(func, func)также может быть достигнуто сpromise.then(func, func)Тот же эффект, но вы должны повторить тот же код в обработчике выполнения и обработчике отклонения или ввести переменную:
а такжеthen()а такжеcatch()такой же,finally()Методы всегда возвращают обещание, поэтому вы можете связать больше методов. Как правило, мы будемfinally()как последняя ссылка. Но в некоторых случаях, например при создании HTTP-запроса,finally()После подключения другогоcatch(), рекомендуется обрабатывать ошибки, которые могут возникнуть в запросе.
Promise.prototype.finally поддержка
Node.js:
10.0.0 (полная поддержка)
Что нового в регулярном выражении
ЕС2018 этоRegExpОбъекты добавляют четыре новые функции, которые еще больше улучшают возможности обработки строк в JavaScript. Эти особенности заключаются в следующем:
флаг s (dotAll)
Названные захватывающие группы
Утверждение просмотра назад
Экранирование свойства Unicode
s (dotAll) Flag
Точка (.) — это специальный символ в шаблонах регулярных выражений, который соответствует любому символу, кроме символа новой строки, например символу новой строки (\n) или возврат каретки (\r). Чтобы сопоставить все символы, включая символы новой строки, можно использовать два класса символов противоположных коротких слов, например.[\d\D], Этот класс символов указывает механизму регулярных выражений найти число (\d) или нечисловой (\D) характер. Таким образом, он соответствует любому символу:
ES2018 представил шаблон, в котором точки можно использовать для достижения того же результата. можно использоватьsФлаг активирует этот режим для каждого регулярного выражения:
Преимущество использования флагов для выборочного использования новых функций заключается в обратной совместимости, гарантирующей, что существующие шаблоны регулярных выражений, использующие символы точки, не будут затронуты.
Именованные группы захвата
В некоторых шаблонах регулярных выражений использование чисел для обозначения захватываемых групп может сбивать с толку. Например, используя регулярное выражение/(\d{4})-(\d{2})-(\d{2})/дата матча. Поскольку символы даты в американском английском отличаются от британского английского, трудно понять, какая группа относится к дню, а какая к месяцу:
ES2018 представлен с использованием(?<name>...)Синтаксис именованных групп захвата. Таким образом, шаблон, который соответствует датам, может быть записан менее двусмысленно:
вы можете использовать\k<name>Синтаксис снова вызывает указанную группу захвата в шаблоне. Например, чтобы найти последовательные повторяющиеся слова в предложении, вы можете использовать/\b(?<dup>\w+)\s+\k<dup>\b/:
Чтобы использовать именованные группы захвата дляreplace()строку замены метода, вы можете использовать$<name>структура. Например:
ретроспективное утверждение
ES2018 привносит в JavaScript проверки назад, которые уже много лет используются в регулярных выражениях на других языках. Раньше JavaScript поддерживал только прогнозные утверждения. Утверждение просмотра назад(?<=...)Представляет, что позволяет сопоставить шаблон на основе предшествующей ему подстроки. Например, если вы хотите сопоставить цену продукта в долларах США, фунтах стерлингов или евро без захвата символа валюты, вы можете использовать/(?<=\$|£|€)\d+(\.\d*)?/:
Существует также отрицательное ретроспективное утверждение, с(?<!...)Выражать. Отрицательные утверждения просмотра назад позволяют сопоставлять шаблоны, которые не следуют утверждению просмотра назад.(?<!a)b: утверждает, что b не предшествует a, соответствует bb, но не ab, и, наконец, захватывает b). Например, узор/(?<!un)available/Может сопоставляться при отсутствии префикса «un», если он доступен:
Экранирование свойства Unicode
ES2018 предоставляет новый тип escape-последовательности, называемый escape-последовательностью свойства Unicode, который обеспечивает полную поддержку Unicode в регулярных выражениях. Предположим, вы хотите сопоставить символ Юникода ㉛ в строке. Хотя мы рассматриваем ㉛ как число, мы не можем использовать\dсоответствует ему, потому что он поддерживает только символы ASCII [0-9]. Кроме того, escape-последовательности свойств Unicode также можно использовать для соответствия любому десятичному числу в Unicode:
Точно так же, если вы хотите сопоставить любое слово Unicode (перечеркнутое) с буквенными символами, вы можете использовать\p{Alphabetic}:
Есть и негативная версия\p{...},использовать\P{...},Выражать:
В дополнение к буквам и цифрам есть несколько свойств, которые можно использовать в escape-последовательности свойств Unicode. Вы можете найти список поддерживаемых свойств Unicode в текущем предложении спецификации.
Адрес: https://tc39.github.io/proposal-regexp-unicode-property-escapes/#sec-static-semantics-unicodematchproperty-p.
Поддержка новой функции RegExp
Node.js:
8.3.0 (требуется флаг --harmony runtime)
8.10.0 (поддерживает флаг s(dotAll) и проверки назад)
10.0.0 (полная поддержка)
Версия строки шаблона
Когда строка шаблона следует сразу за выражением, она называется строкой шаблона с токенами. Шаблоны разметки удобны, когда вы хотите использовать функции для разбора строк шаблона. Посмотрите этот пример:
Приведенный выше код вызывает выражение токена (которое является обычной функцией) и передает строку шаблона. Функция просто изменяет динамическую часть строки и возвращает ее.
До ES2018 помеченные строки шаблона имели синтаксические ограничения, связанные с управляющими последовательностями. Обратная косая черта, за которой следуют определенные последовательности символов, рассматриваются как специальные символы:\xанализируется как шестнадцатеричный escape-символ,\uанализируется как экранирование юникода,\_за которым следует число, анализируется как восьмеричный escape-символ. Поэтому интерпретатор будет что-то вроде"C:\xxx\uuu"или"\ubuntu"Такие строки, как считаются недопустимыми escape-последовательностями и будут выбрасыватьSyntaxError.
ES2018 удалил эти ограничения из шаблонов разметки, которые представляли бы недопустимые escape-последовательности какundefined, вместо того, чтобы выдавать ошибку:
Имейте в виду, что использование недопустимой escape-последовательности в обычной строке шаблона все равно вызовет ошибку:
Поддержка версий строки шаблона
Node.js:
8.3.0 (требуется флаг --harmony runtime)
8.10.0 (полная поддержка)
Суммировать
Мы более подробно рассмотрели несколько ключевых функций, представленных в ES2018, включая асинхронную итерацию, свойства rest/spread,Promise.prototype.finallyтак же какRegExpНовые свойства объектов. Хотя некоторые поставщики браузеров не полностью реализовали некоторые из этих функций, мы все еще можем использовать их сегодня благодаря транспиляторам JavaScript, таким как Babel.
ECMAScript быстро развивается, и время от времени появляются новые функции, ознакомьтесь с полным списком предложений 👏, чтобы узнать обо всех новых функциях. Есть ли какая-то особенность, которая вас волнует? Поделись со мной скорей~
Адрес предложения: https://github.com/tc39/proposals/blob/master/finished-proposals.md
Оригинальный адрес: https://css-tricks.com/new-es2018-features-every-javascript-developer-should-know/
Хорошая рекомендация статьи:
Сожжем «калории» связки вместе
«UC International Technology» стремится делиться с вами высококачественными техническими статьями.
Добро пожаловать, чтобы подписаться на наш официальный аккаунт и поделиться статьей с друзьями