Оригинальная ссылка:woohoo.sitepoint.com/starvation2018-что…
В этом посте я расскажу о новых функциях ES2018 (ES9) и покажу, как их использовать.
JavaScript (ECMAScript) — это развивающийся стандарт, реализуемый многими поставщиками на разных платформах. На завершение ES6 (ECMAScript 2015) ушло шесть лет, и это большой выпуск. Был введен новый процесс ежегодного выпуска, чтобы упростить процесс и ускорить добавление функций. ES9 (ES2018) — последняя версия на момент написания.
TC39 состоит из различных сторон, включая поставщиков браузеров, которые встречаются, чтобы продвигать предложение JavaScript по строгому пути разработки:
- Stage 0: strawman- Подача оригинальной идеи.
- Этап 1: предложение- Документ с официальным предложением, поддержанный хотя бы одним членом TC39, который включает пример API.
- Этап 2: черновик- начальная версия функциональной спецификации, которая содержит две экспериментальные реализации функциональной спецификации.
- Этап 3: кандидат- Спецификация предложения проходит проверку и отзывы от поставщиков
- Этап 4: завершен- Предложение готово для добавления в ECMAScript, но может потребоваться больше времени, чтобы добраться до браузера или Nodejs.
ES2016
ES2016 добавил две небольшие функции для иллюстрации процесса нормализации:
- множество
includes()Метод используется для определения, содержит ли массив указанное значение, в зависимости от ситуации, если да, возвращаетtrue, иначе возвратfalse. -
a ** bЭкспоненциальный оператор, аналогичныйMath.pow(a, b)такой же.
ES2017
ES2017 предоставляет больше новых функций:
- Асинхронные функции представляют более чистый синтаксис Promise
-
Object.valuesМетод возвращает массив всех перечислимых значений свойств данного объекта в том же порядке, что и при использованииfor...inПорядок петель тот же (разница в том, чтоfor...inПеребирать свойства в цепочке прототипов) -
Object.entries()Метод возвращает массив пар ключ-значение собственных перечисляемых свойств данного объекта, упорядоченных и используемых.for...inВозвращаемый порядок одинаков при циклическом просмотре измененных объектов (разница в том, чтоfor...inЦикл также перечисляет свойства в цепочке прототипов) -
Object.getOwnPropertyDescriptors()Возвращает дескрипторы всех собственных свойств объекта (.value,.writable,.get,.set,.configurable,enumerable) -
padStart()иpadEnd(), строка заполнения достигает текущей длины - Завершающие запятые, определения массивов и списки параметров функций
-
ShareArrayBufferиAtomicsДля чтения и записи из разделяемых областей памяти
Для получения дополнительной информации о ES2017 см.What's New in ES2017
ES2018
ECMAScript 2018 (или ES9) уже доступен. Следующие функции достигли стадии 4, но не полностью реализованы в браузерах на момент написания.
Асинхронная итерация
существуетasync/awaitВ какой-то момент вы можете попытаться вызвать асинхронную функцию в синхронном цикле. Например:
async function process(array) {
for (let i of array) {
await doSomething(i);
}
}
Этот код не будет работать, как и следующий:
async function process(array) {
array.forEach(async i => {
await doSomething(i);
});
}
В этом коде сам цикл остается синхронным и завершается до всех вызовов внутренней асинхронной функции.
ES2018 представляет асинхронные итераторы, которые аналогичны обычным итераторам, за исключениемnext()Метод возвращает обещание. следовательноawaitможет иfor...ofЦиклы используются вместе для последовательного выполнения асинхронных операций. Например:
async function process(array) {
for await (let i of array) {
doSomething(i);
}
}
Promise.finally()
Цепочка вызовов Promise либо успешно достигает последнего.then(), или не срабатывает.catch(). В некоторых случаях вы хотите запускать один и тот же код вне зависимости от того, успешно ли выполнено обещание или нет, например, очистка, удаление диалогового окна, закрытие соединения с базой данных и т. д.
.finally()Позволяет указать конечную логику:
function doSomething() {
doSomething1()
.then(doSomething2)
.then(doSomething3)
.catch(err => {
console.log(err);
})
.finally(() => {
// finish here!
});
}
Свойства отдыха/спреда
Представлен ES2015Параметр покояиспред оператор. Три точки (...) предназначены только для массивов. Синтаксис остальных параметров позволяет нам представить множество параметров в виде массива.
restParam(1, 2, 3, 4, 5);
function restParam(p1, p2, ...p3) {
// p1 = 1
// p2 = 2
// p3 = [3, 4, 5]
}
Оператор спреда работает наоборот, превращая массив в один параметр, который можно передать функции. НапримерMath.max()Возвращает наибольшее из заданных чисел:
const values = [99, 100, -1, 48, 16];
console.log( Math.max(...values) ); // 100
ES2018 предоставляет те же параметры Rest () и оператор распространения, что и массивы для деструктуризации объектов, простой пример:
const myObject = {
a: 1,
b: 2,
c: 3
};
const { a, ...x } = myObject;
// a = 1
// x = { b: 2, c: 3 }
Или вы можете использовать его для передачи аргументов функциям:
restParam({
a: 1,
b: 2,
c: 3
});
function restParam({ a, ...x }) {
// a = 1
// x = { b: 2, c: 3 }
}
Как и массивы, параметры Rest можно использовать только в конце объявления. Кроме того, он работает только на верхнем уровне каждого объекта, а не в том случае, если объекты вложены в объекты.
Оператор спреда можно использовать внутри других объектов, например:
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, z: 26 };
// obj2 is { a: 1, b: 2, c: 3, z: 26 }
Объект можно скопировать с помощью оператора распространения, напримерobj2 = {...obj1},ноЭто просто мелкая копия объекта. Кроме того, если атрибут объекта A является объектом B, то в клонированном объекте cloneB атрибут указывает на объект B.
Именованные группы захвата с помощью регулярных выражений
Регулярные выражения JavaScript могут возвращать объект соответствия — массив, подобный массиву, содержащий совпадающие строки, например, для анализа даты в формате ГГГГ-ММ-ДД:
const
reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/,
match = reDate.exec('2018-04-30'),
year = match[1], // 2018
month = match[2], // 04
day = match[3]; // 30
Такой код трудно читать, а изменение структуры регулярного выражения может привести к изменению индекса соответствующего объекта.
ES2018 позволяет именованным группам захвата использовать символы?<name>, в скобе захвата проема(Сразу после названия пример следующий:
const
reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
match = reDate.exec('2018-04-30'),
year = match.groups.year, // 2018
month = match.groups.month, // 04
day = match.groups.day; // 30
Любые именованные группы, которые не совпадают, будут возвращеныundefined.
Именованные захваты также могут использоваться вreplace()метод. Например, чтобы преобразовать дату в формат США ММ-ДД-ГГГГ:
const
reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
d = '2018-04-30',
usDate = d.replace(reDate, '$<month>-$<day>-$<year>');
Обратное утверждение регулярного выражения (lookbehind)
В настоящее время JavaScript поддерживает просмотр вперед в регулярных выражениях. Это означает, что совпадение происходит, но захвата не происходит, и утверждение не включается во все поле совпадения. Например, чтобы получить символ валюты из цены:
const
reLookahead = /\D(?=\d+)/,
match = reLookahead.exec('$123.89');
console.log( match[0] ); // $
Представленный ES2018 работает так же, но соответствует предыдущему ретроспективному анализу, поэтому я могу игнорировать символ валюты и просто фиксировать номер цены:
const
reLookbehind = /(?<=\D)\d+/,
match = reLookbehind.exec('$123.89');
console.log( match[0] ); // 123.89
Вышеположительное отрицательное утверждение, а не число\Dдолжен существовать. Так же естьОтрицательное обратное утверждение, указывающее, что значение не должно существовать, например:
const
reLookbehindNeg = /(?<!\D)\d+/,
match = reLookbehind.exec('$123.89');
console.log( match[0] ); // null
регулярное выражениеdotAllмодель
средняя точка регулярного выражения.соответствует любому одиночному символу, кроме возврата каретки, токенаsИзмените это поведение, чтобы разрешить разделители строк, например:
/hello.world/.test('hello\nworld'); // false
/hello.world/s.test('hello\nworld'); // true
Регулярные выражения Unicode Escape
До сих пор собственный доступ к свойствам символов Unicode в регулярных выражениях не разрешался. ES2018 добавил экранирование свойств Unicode - формы\p{...}и\P{...}, используя токен в регулярном выраженииu(Юникод), в\pВнутри блока вы можете установить атрибуты, которые должны сопоставляться, вместо определенного контента в виде пар ключ-значение. Например:
const reGreekSymbol = /\p{Script=Greek}/u;
reGreekSymbol.test('π'); // true
Эта функция позволяет избежать использования определенных диапазонов Unicode для суждения о типе контента, улучшая удобочитаемость и удобство сопровождения.
Строки-шаблоны без управляющих последовательностей
Наконец, ES2018 снимает ограничение синтаксиса для escape-последовательностей ECMAScript в теговых строках шаблона.
До,\uзапускает экранирование юникода,\xначинает побег из шестиугольника,\за которым следует цифра, чтобы начать восьмеричное escape-последовательность. Это делает невозможным создание определенных строк, таких как пути к файлам Windows.C:\uuu\xxx\111. Более подробная информациястрока шаблона.
Вот все новые функции ES2018, ES2019 стартовал, какие функции вы ожидаете увидеть в следующем году?