Руководство ES2018

ECMAScript - это стандарт, на котором основан JavaScript, часто сокращенно ES. Узнайте все о ECMAScript и функциях, добавленных в ES2018, также известном как ES9

ES2018 - последняя версияECMAScriptстандарт.

Что в нем нового?

Остаточные / спредовые свойства

ES6представил концепциюэлемент отдыхапри работе сдеструктуризация массива:

const numbers = [1, 2, 3, 4, 5]
[first, second, ...others] = numbers

иэлементы распространения:

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sumOfNumbers = sum(...numbers)

ES2018 представляет то же самое, но для объектов.

Остальные свойства:

const { first, second, ...others } = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

first // 1 second // 2 others // { third: 3, fourth: 4, fifth: 5 }

Распространение свойствпозволяют создать новый объект, объединив свойства объекта, переданного послеоператор распространения:

const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

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

Новая конструкцияfor-await-ofпозволяет использовать асинхронный итерируемый объект в качестве итерации цикла:

for await (const line of readLines(filePath)) {
  console.log(line)
}

Поскольку это используетawait, можно использовать только внутриasyncфункции, как обычныеawait(видетьасинхронный / ожидание)

Promise.prototype.finally ()

Когда обещание выполнено, оно успешно вызываетthen()методы, один за другим.

Если при этом что-то не получается,then()методы перепрыгивают, иcatch()метод выполняется.

finally()позволяют запускать некоторый код независимо от успешного или неуспешного выполнения обещания:

fetch('file.json')
  .then(data => data.json())
  .catch(error => console.error(error))
  .finally(() => console.log('finished'))

Улучшения регулярных выражений

Утверждения просмотра назад RegExp: сопоставить строку в зависимости от того, что ей предшествует

Это взгляд вперед: вы используете?=чтобы соответствовать строке, за которой следует определенная подстрока:

/Roger(?=Waters)/

/Roger(?= Waters)/.test(‘Roger is my dog’) //false /Roger(?= Waters)/.test(‘Roger is my dog and Roger Waters is a famous musician’) //true

?!выполняет обратную операцию, сопоставляя, если строканетза которой следует конкретная подстрока:

/Roger(?!Waters)/

/Roger(?! Waters)/.test(‘Roger is my dog’) //true /Roger(?! Waters)/.test(‘Roger Waters is a famous musician’) //false

Lookaheads используют?=символ. Они уже были в наличии.

Lookbehinds, новая функция, использует?<=.

/(?<=Roger) Waters/

/(?<=Roger) Waters/.test(‘Pink Waters is my dog’) //false /(?<=Roger) Waters/.test(‘Roger is my dog and Roger Waters is a famous musician’) //true

Просмотр назад отменяется с помощью?<!:

/(?<!Roger) Waters/

/(?<!Roger) Waters/.test(‘Pink Waters is my dog’) //true /(?<!Roger) Waters/.test(‘Roger is my dog and Roger Waters is a famous musician’) //false

Экраны свойств Unicode\p{…}и\P{…}

В шаблоне регулярного выражения вы можете использовать\dсоответствовать любой цифре,\sдля соответствия любому символу, кроме пробела,\wдля соответствия любому буквенно-цифровому символу и т. д.

Эта новая функция расширяет эту концепцию на все символы Unicode, вводя\p{}и его отрицание\P{}.

Любойюникодперсонаж имеет набор свойств. НапримерScriptопределяет языковую семью,ASCIIявляется логическим значением, истинным для символов ASCII и т. д. Вы можете поместить это свойство в круглые скобки графа, и регулярное выражение проверит его истинность:

/^\p{ASCII}+$/u.test('abc')   //✅
/^\p{ASCII}+$/u.test('[email protected]')  //✅
/^\p{ASCII}+$/u.test('ABC🙃') //❌

ASCII_Hex_Digit- еще одно логическое свойство, которое проверяет, содержит ли строка только допустимые шестнадцатеричные цифры:

/^\p{ASCII_Hex_Digit}+$/u.test('0123456789ABCDEF') //✅
/^\p{ASCII_Hex_Digit}+$/u.test('h')                //❌

Есть много других логических свойств, которые вы просто проверяете, добавляя их имена в скобки графика, в том числеUppercase,Lowercase,White_Space,Alphabetic,Emojiи больше:

/^\p{Lowercase}$/u.test('h') //✅
/^\p{Uppercase}$/u.test('H') //✅

/^\p{Emoji}+$/u.test('H')   //❌
/^\p{Emoji}+$/u.test('🙃🙃') //✅

В дополнение к этим двоичным свойствам вы можете проверить любое из свойств символа Юникода на соответствие определенному значению. В этом примере я проверяю, написана ли строка греческим или латинским алфавитом:

/^\p{Script=Greek}+$/u.test('ελληνικά') //✅
/^\p{Script=Latin}+$/u.test('hey') //✅

Узнайте больше обо всех свойствах, которые вы можете использоватьпрямо по предложению.

Именованные группы захвата

В ES2018 aгруппа захватаможет быть присвоено имя, а не просто назначен слот в массиве результатов:

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
const result = re.exec('2015-01-02')

// result.groups.year === ‘2015’; // result.groups.month === ‘01’; // result.groups.day === ‘02’;

Вsфлаг для регулярных выражений

Вsфлаг, сокращение отодна линия, вызывает.для соответствия символам новой строки. Без него точка соответствует обычным символам, но не новой строке:

/hi.welcome/.test('hi\nwelcome') // false
/hi.welcome/s.test('hi\nwelcome') // true

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: