Вот примеры всего нового в ECMAScript 2016, 2017 и 2018

1656646483 vot primery vsego novogo v ecmascript 2016 2017 i 2018

Содержание статьи

от rajaraodv

Qf1LDT7ckSUhVlKPgo1AZbna-xqa4Tvlmak4

Трудно следить за тем, что нового в JavaScript (ECMAScript). И еще труднее найти полезные примеры кода.

В этой статье я расскажу обо всех 18 функциях, перечисленных в готовых предложениях TC39, добавленных в ES2016, ES2017 и ES2018 (последний проект), и покажу их на полезных примерах.

Это достаточно длинный пост, но читать его следует легко. Подумайте об этом как о «Чтение на Netflix». К концу этого, я обещаю, вы будете иметь массу знаний обо всех этих функциях.

Ладно, давайте просмотрим их один за другим.

44fYmBIMt2XrYNJgDfEFr5IX0SLCEdnNj2EP

1. Array.prototype.includes

includes это простой метод экземпляра в массиве, который помогает легко найти, есть ли элемент в массиве (включая NaN в отличии от indexOf).

0FvN0UrpiwG3vS7AwCxhgFdkmUtRBzsty8Fg
ECMAScript 2016 или ES7 — Array.prototype.includes()

Пустяки: люди хотели назвать спецификацию JavaScript contains но это, очевидно, уже использовалось Mootools, поэтому они использовали includes .

2. Подъем к степени infix operator

Математические операции, такие как сложение и вычитание, имеют такие инфиксные операторы, как + и - , соответственно. Подобные им, ** Инфиксный оператор обычно используется для операции экспонента. В ECMAScript 2016, ** было введено вместо Math.pow .

gtlnVadz1PTBCP3Quu9KLabgpNI-nC3Bw8-r
ECMAScript 2016 или ES7 — ** Инфиксный оператор экспоненты
HmFguQSmejxvd4hxOcVsTnWT8XhUoWclGsOj

1. Object.values()

Object.values() это новая функция, похожая на Object.keys() но возвращает все значения собственных свойств объекта, за исключением каких-либо значений в цепочке прототипов.

8R384SuwAciT2kI9YsAKBh-vxFrSvErxCjWa
ECMAScript 2017 (ES8)— Object.values()

2. Object.entries()

Object.entries() связанное с Object.keys , но вместо того чтобы возвращать только ключи, он возвращает и ключи, и значение в виде массива. Это делает очень простым такие действия, как использование объектов в циклах или преобразование объектов в карты.

Пример 1:

1b3wqDqdI1DW2qx9U2aBNjVHkdsK2PHsOfJB
ECMAScript 2017 (ES8) — Использование Object.entries() в циклах

пример 2:

96Jw9lz3xZ7QUsymo0x73YGz9gfTaNnlUhUd
ECMAScript 2017 (ES8) — использование Object.entries() для преобразования объекта в карту

3. Заполнение строк

К String добавлены два метода экземпляра. String.prototype.padStart и String.prototype.padEnd — которые позволяют добавлять/добавлять либо пустую строку, либо другую строку до начала или конца оригинальной строки.

'someString'.padStart(numberOfCharcters [,stringForPadding]); 

'5'.padStart(10) // '         5'
'5'.padStart(10, '=*') //'=*=*=*=*=5'

'5'.padEnd(10) // '5         '
'5'.padEnd(10, '=*') //'5=*=*=*=*='

Это пригодится, когда мы хотим выровнять вещи в таких сценариях, как красивый печатный дисплей или печать терминала.

3.1 padStart пример:

В следующем примере мы имеем список чисел разной длины. Мы хотим добавить «0», чтобы все элементы имели одинаковую длину в 10 цифр для отображения. Мы можем использовать padStart(10, '0') легко достичь этого.

pDLfNm4KHFG18gimi3kg37nufmeRaqlloadT
ECMAScript 2017 – пример padStart

3.2 пример padEnd:

padEnd очень полезно, когда мы печатаем несколько элементов разной длины и хотим правильно выровнять их по правому краю.

Пример ниже – хороший реалистичный пример того, как это сделать. padEnd , padStart и Object.entries все объединяются, чтобы получить отличный результат.

HvUh0bvyojcU7KfimZiTWoPlHybupuK-Lpaf
ECMAScript 2017 – пример padEnd, padStart и Object.Entries
const cars = {
  '?BMW': '10',
  '?Tesla': '5',
  '?Lamborghini': '0'
}

Object.entries(cars).map(([name, count]) => {
  //padEnd appends ' -' until the name becomes 20 characters
  //padStart prepends '0' until the count becomes 3 characters.
  console.log(`${name.padEnd(20, ' -')} Count: ${count.padStart(3, '0')}`)
});

//Prints..
// ?BMW - - - - - - -  Count: 010
// ?Tesla - - - - - -  Count: 005
// ?Lamborghini - - -  Count: 000

3.3 ⚠️ padStart и padEnd на Emojis и других двухбайтных символах

Emojis и другие двухбайтные символы представлены с помощью нескольких байтов Юникода. Потому padStart и padEnd могут работать не так, как ожидалось!⚠️

Например: Скажем, мы стараемся дополнить строчку heart достигать 10 персонажи из эмодзы ❤️. Результат будет выглядеть так:

//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd!
'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

Это потому, что ❤️ имеет 2 кодовые точки ('\u2764\uFE0F' )! Слово heart сам по себе состоит из 5 символов, так что у нас осталось только 5 символов для дополнения. Итак, JS использует два сердца '\u2764\uFE0F' и это создает ❤️❤️. Для последнего он просто использует первый байт сердца \u2764 который производит ❤

Итак, мы заканчиваем: ❤️❤️❤heart

PS: Вы можете использовать эту ссылку, чтобы проверить преобразование символов Unicode.

4. Object.getOwnPropertyDescriptors

Этот метод возвращает все детали (включая getter getи сеттер set методы) для всех свойств заданного объекта Основная мотивация для добавления этого состоит в том, чтобы разрешить неглубокое копирование/клонирование объекта в другой объект который также копирует функции getter и setter в отличие от Object.assign .

Object.assign копирует неглубоко все детали, кроме функций getter и setter оригинального исходного объекта.

Нижеследующий пример показывает разницу между Object.assign и Object.getOwnPropertyDescriptors вместе с Object.defineProperties копировать оригинальный объект Car в новый объект ElectricCar . Вы увидите это, используя Object.getOwnPropertyDescriptors ,discount функции getter и setter также копируются в целевой объект.

ПЕРЕД…

7ZlAkKKdplx53IOn-jYMIPLdZSq90XhAP5jR
Раньше – с помощью Object.assign

ПОСЛЕ…

23g3sL3-pFGkRri0wOT3g3N2Qzn-oDcKjxVB
ECMAScript 2017 (ES8) — Object.getOwnPropertyDescriptors
var Car = {
 name: 'BMW',
 price: 1000000,
 set discount(x) {
  this.d = x;
 },
 get discount() {
  return this.d;
 },
};

//Print details of Car object's 'discount' property
console.log(Object.getOwnPropertyDescriptor(Car, 'discount'));
//prints..
// { 
//   get: [Function: get],
//   set: [Function: set],
//   enumerable: true,
//   configurable: true
// }

//Copy Car's properties to ElectricCar using Object.assign
const ElectricCar = Object.assign({}, Car);

//Print details of ElectricCar object's 'discount' property
console.log(Object.getOwnPropertyDescriptor(ElectricCar, 'discount'));
//prints..
// { 
//   value: undefined,
//   writable: true,
//   enumerable: true,
//   configurable: true 
// }
//⚠️Notice that getters and setters are missing in ElectricCar object for 'discount' property !??

//Copy Car's properties to ElectricCar2 using Object.defineProperties 
//and extract Car's properties using Object.getOwnPropertyDescriptors
const ElectricCar2 = Object.defineProperties({}, Object.getOwnPropertyDescriptors(Car));

//Print details of ElectricCar2 object's 'discount' property
console.log(Object.getOwnPropertyDescriptor(ElectricCar2, 'discount'));
//prints..
// { get: [Function: get],  ??????
//   set: [Function: set],  ??????
//   enumerable: true,
//   configurable: true 
// }
// Notice that getters and setters are present in the ElectricCar2 object for 'discount' property!

5. Add trailing commas in the function parameters

Это незначительное обновление, которое позволяет нам иметь конечные запятые после последнего параметра функции. почему Чтобы помочь с такими инструментами, как git blame, чтобы обвинить только новых разработчиков.

Нижеследующий пример показывает проблему и ее решение.

KyY6NFFjMTOeAITlQNt-kKtE9q9E33vZrBbk
ECMAScript 2017 (ES 8) — Конечная запятая в параметре функции

Примечание. Вы также можете вызвать функции через запятую!

6. Async/Await

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

The async ключевое слово предписывает JavaScript обрабатывать функцию по-разному. Компилятор останавливается каждый раз, когда достигает await ключевое слово в этой функции. Предполагается, что выражение после await возвращает обещание и ждет, пока обещание будет решено или отклонено, прежде чем двигаться дальше.

В следующем примере getAmount функция вызывает две асинхронные функции getUser и getBankBalance . Мы можем сделать это обещано, но используя async await более элегантный и простой.

JYCOVItTbISYtWjgbt2lDVdyk8KOOjYVk2sc
ECMAScript 2017 (ES 8) – базовый пример Async Await

6.1 Асинхронные функции сами возвращают Promise.

Если вы ожидаете результата от асинхронной функции, вам нужно использовать Promise then синтаксис, чтобы зафиксировать результат.

В следующем примере мы хотим зарегистрировать результат с помощью console.log но не в пределах doubleAndAdd. Поэтому мы хотим подождать и использовать then синтаксис для передачи результата console.log .

xnz7tfy5QVKp9VXjcVjqUoMXDwHZuGFX8rd1
ECMAScript 2017 (ES 8) — Async Await возвращает Promise

6.2 Вызов async/await параллельно

В предыдущем примере мы вызываем await дважды, но каждый раз мы ждем одну секунду (в общей сложности 2 секунды). Вместо этого мы можем распаралелизовать это, поскольку a и b не зависят друг от друга с помощью Promise.all.

kWJN5r5sz0F5o2XIpO1qmspgT1BujE0YTTtk
ECMAScript 2017 (ES 8) — использование Promise.all для распараллеливания async/await

6.3 Ошибка обработки функций async/await

Существуют разные способы обработки ошибок при использовании async await.

Вариант 1 – используйте try catch в функции

PfUYa9Vo5hTFbCHaE5XnaiPjuV4VmUNVWtVh
ECMAScript 2017 Используйте try catch в функции async/await
//Option 1 - Use try catch within the function
async function doubleAndAdd(a, b) {
 try {
  a = await doubleAfter1Sec(a);
  b = await doubleAfter1Sec(b);
 } catch (e) {
  return NaN; //return something
 }
return a + b;
}

//?Usage:
doubleAndAdd('one', 2).then(console.log); // NaN
doubleAndAdd(1, 2).then(console.log); // 6

function doubleAfter1Sec(param) {
 return new Promise((resolve, reject) => {
  setTimeout(function() {
   let val = param * 2;
   isNaN(val) ? reject(NaN) : resolve(val);
  }, 1000);
 });
}

Вариант 2 – перехват каждого выражения ожидания

Поскольку каждый await Выражение возвращает Promise, вы можете обнаружить ошибки в каждой строке, как показано ниже.

wGCb4bAga1z9mkI1FwKRhYFugCL00pUTeavM
ECMAScript 2017 Используйте try catch каждое выражение ожидания
//Option 2 - *Catch* errors on  every await line
//as each await expression is a Promise in itself
async function doubleAndAdd(a, b) {
 a = await doubleAfter1Sec(a).catch(e => console.log('"a" is NaN')); // ?
 b = await doubleAfter1Sec(b).catch(e => console.log('"b" is NaN')); // ?
 if (!a || !b) {
  return NaN;
 }
 return a + b;
}

//?Usage:
doubleAndAdd('one', 2).then(console.log); // NaN  and logs:  "a" is NaN
doubleAndAdd(1, 2).then(console.log); // 6

function doubleAfter1Sec(param) {
 return new Promise((resolve, reject) => {
  setTimeout(function() {
   let val = param * 2;
   isNaN(val) ? reject(NaN) : resolve(val);
  }, 1000);
 });
}

Вариант 3 – Перехватить всю функцию async-await

bYcQiaVTX1wRzOGg0Vh13TYg5WW8qSVu0DS6
ECMAScript 2017 Перехватите всю функцию async/await в конце
//Option 3 - Dont do anything but handle outside the function
//since async / await returns a promise, we can catch the whole function's error
async function doubleAndAdd(a, b) {
 a = await doubleAfter1Sec(a);
 b = await doubleAfter1Sec(b);
 return a + b;
}

//?Usage:
doubleAndAdd('one', 2)
.then(console.log)
.catch(console.log); // ???<------- use "catch"

function doubleAfter1Sec(param) {
 return new Promise((resolve, reject) => {
  setTimeout(function() {
   let val = param * 2;
   isNaN(val) ? reject(NaN) : resolve(val);
  }, 1000);
 });
}
G9wavF5qssi1AP4C2lF9WgiQ7Hm766eWGt6J

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

1. Общая память и атомика

Это огромная, достаточно продвинутая функция, являющаяся основным усовершенствованием двигателей JS.

Основная идея состоит в том, чтобы привнести какую-либо функцию многопоточности в JavaScript, чтобы разработчики JS могли писать высокопроизводительные, параллельные программы в будущем, позволяя самостоятельно управлять памятью вместо того, чтобы разрешать механизм JS управлять памятью.

Это делается с помощью нового типа глобального объекта под названием SharedArrayBuffer, который фактически сохраняет данные в общий доступ пространство памяти. Таким образом, данные могут передаваться между основным потоком JS и потоками web-worker.

До сих пор, если мы хотим обмениваться данными между основным потоком JS и веб-воркерами, нам приходилось копировать данные и отправлять их другому потоку с помощью postMessage . Уж нет!

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

Но совместное использование памяти между потоками может вызвать гонку. Чтобы избежать гонки, «Атомика” вводится глобальный объект. Атомика предоставляет разные методы блокировки общей памяти, когда поток использует ее данные. Он также предоставляет способы безопасного обновления таких данных в этой общей памяти.

Рекомендуется использовать эту функцию через какую-либо библиотеку, но сейчас нет библиотек, созданных на основе этой функции.

Если вам интересно, рекомендую прочесть:

  1. От рабочих к общей памятив — лукосфкоста
  2. Мультяшное вступление в SharedArrayBuffers – Линн Кларк
  3. Общая память и атомика — Доктор Аксель Раушмайер

2. Литерал тегированного шаблона снят

Во-первых, нам нужно объяснить, что такое «литерал тегированного шаблона», чтобы мы могли лучше понять эту функцию.

В ES2015+ есть функция под названием литерал шаблона с тэгами, которая позволяет разработчикам настраивать способ интерполяции строк. Например, стандартным способом строки интерполируются, как показано ниже.

qijvAdivaNWMbUMxVg4rer3K1BWYl7bbCcO5

В литерале с тегами вы можете написать функцию для получения жестко закодированных частей строчного литерала, например [ ‘Hello ‘, ‘!’ ] и переменные замены, например,[ 'Raja'] как параметры в пользовательскую функцию (например greet ), и вернуть все, что вы хотите, с этой специальной функции.

Нижеследующий пример показывает, что наша специальная функция «Тег». greet добавляет время суток, например «Доброе утро!» «Здравствуйте» и так далее в зависимости от времени суток к строчному литературу и возвращает строчку.

aRMqlDhbYudFqPvnNhfrPYkyKXgTkaEn87t0
Пример функции тегов, показывающий специальную интерполяцию строк
//A "Tag" function returns a custom string literal.
//In this example, greet calls timeGreet() to append Good //Morning/Afternoon/Evening depending on the time of the day.

function greet(hardCodedPartsArray, ...replacementPartsArray) {
 console.log(hardCodedPartsArray); //[ 'Hello ', '!' ]
 console.log(replacementPartsArray); //[ 'Raja' ]
    
let str="";
 hardCodedPartsArray.forEach((string, i) => {
  if (i < replacementPartsArray.length) {
   str += `${string} ${replacementPartsArray[i] || ''}`;
  } else {
   str += `${string} ${timeGreet()}`; //<-- append Good morning/afternoon/evening here
  }
 });
 return str;
}

//?Usage:
const firstName="Raja";
const greetings = greet`Hello ${firstName}!`; //??<-- Tagged literal

console.log(greetings); //'Hello  Raja! Good Morning!' ?

function timeGreet() {
 const hr = new Date().getHours();
 return hr < 12
  ? 'Good Morning!'
  : hr < 18 ? 'Good Afternoon!' : 'Good Evening!';
}

Теперь, когда мы обсудили, что такое «обозначенные» функции, многие хотят использовать эту функцию в разных доменах, например, в терминале для команд и HTTP-запросов для создания URI и т.д.

⚠️Проблема с литералом Tagged String

Проблема состоит в том, что спецификации ES2015 и ES2016 не позволяют использовать символы экранирования, такие как “\u” (юникод), “\x” (шестнадцатеричный), если они не выглядят точно как `\u00A9` или \u{2F804} или \xA9.

Итак, если у вас есть функция Tagged, которая внутренне использует некоторые другие правила домена (например, правила терминала), возможно, придется использовать \ubla123abla который не выглядит как \u0049 или {@F804}, то вы получите синтаксическую ошибку.

В ES2018 правила смягчены, чтобы разрешить такие, казалось бы, недействительные управляющие символы, если функция Tagged возвращает значение в объекте с «вареным» свойством (где недействительные символы являются «неопределенными»), а затем «необработанным» свойством ( с чем угодно).

function myTagFunc(str) { 
 return { "cooked": "undefined", "raw": str.raw[0] }
} 

var str = myTagFunc `hi \ubla123abla`; //call myTagFunc

str // { cooked: "undefined", raw: "hi \\unicode" }

3. Флажок «dotall» для регулярного выражения

Сейчас в RegEx, хотя точка (“.”) должна соответствовать одному символу, она не соответствует символам новой строки, например \n \r \f etc.

Например:

//Before
/first.second/.test('first\nsecond'); //false

Это усовершенствование позволяет оператору точки соответствовать любому отдельному символу. Чтобы убедиться, что это ничего не нарушает, нам нужно использовать \s флажок, когда мы создаем регулярное выражение, чтобы это работало.

//ECMAScript 2018
/first.second/s.test('first\nsecond'); //true   Notice: /s ??  

Вот общий API по документации предложения:

leiiozJApb5rPA97rUqBOvzvEtVguXtPcOrk
ECMAScript 2018 — функция Regex dotAll позволяет совпадать даже через «.» через флажок /s

4. Записи RegExp Named Group?

Это усовершенствование содержит полезную функцию RegExp из других языков, таких как Python, Java и т.д., которая называется «Именованные группы». Эти функции позволяют разработчикам, пишут RegExp, предоставлять имена (идентификаторы) в формате(?<name>...) для разных частей группы в RegExp. Затем они могут использовать это имя, чтобы с легкостью увлечь любую нужную группу.

4.1 Основной пример именуемой группы

В следующем примере мы используем (?<year>) (?<month>) and (?<day>) имена для группировки разных частей даты RegEx. Полученный объект теперь будет содержать a groups имущество со свойствами year, month и day с соответствующими значениями.

TkGEzq1zFYdE-YP8YJadJ7VacNhF9gsyf7FB
ECMAScript 2018 – пример именуемых групп регулярных выражений

4.2 Использование именуемых групп в самом регулярном выражении

Мы можем использовать \k<group name> формат обратной ссылки на группу в самом регулярном выражении. Следующий пример показывает, как это работает.

hc1rRx9L0IPX0BG0CGtqUWIRf2KRAHC-5P7R
ECMAScript 2018 — Regex именуемые группы возвращаются через \k<назва групи>

4.3 Использование именуемых групп в String.prototype.replace

Именуемая функция группы теперь записана в String replace метод экземпляра. Потому мы можем просто поменять местами слова в строке.

Например, смените «имя, фамилию» на «фамилию, имя».

bQvxKQY6VfUNRGjeAsCXm0EJEDCbgPe0ti0S
ECMAScript 2018 – использование функции именуемых групп RegEx в функции замены

5. Свойства Rest для объектов

Оператор отдыха ... (три точки) позволяет извлечь свойства объекта, которые еще не добыты.

WBZ31BCucgiEXjxal3IkEEdHFbkk3PwpbzGF
ECMAScript 2018 — Деструктурирование объектов через rest

5.2 Еще лучше, вы можете удалить ненужные элементы! ??

jMNJhSOaReoiWi9Z6LZdQYmxT0aVHedQiRKO
ECMAScript 2018 — Деструктурирование объектов через rest

6. Свойства распространения для объектов

Свойства распространения также смотрятся так же, как другие свойства с тремя точками ... но разница в том, что вы используете spread для создания (реструктуризации) новых объектов.

Совет: оператор расширения используется в правой части знака равенства. Остальные используются в левой части знака равенства.

Kw63nZhNAIkprEucTKQou35zzTDcvoXenX4D
ECMAScript 2018 — Реструктуризация объектов через распространение

7. RegExp Lookbehind Assertions

Это усовершенствование RegEx, которое позволяет нам гарантировать, что строка существует немедленно.раньше* какая-то другая строка.

Теперь вы можете использовать группу (?<=…) (знак вопроса, меньше, равен) искать положительное утверждение сзади.

Далее можно использовать (?<!…) (знак вопроса, меньше чем, оклик), искать сзади негативное утверждение. По сути это будет совпадать до тех пор, пока проходит утверждение -ve.

Позитивное утверждение: Скажем, мы хотим убедиться, что # знак стоит перед словом winning (это: #winning) и хотите, чтобы регулярное выражение возвращала только строка «победная». Вот как бы вы это написали.

sz6nM4Fzby9XVG96i8eUCvzoE705bGAEeHb7
ECMAScript 2018 (?<=…) for positive assertion

Негативное утверждение: Скажем, мы хотим получить числа из строк, имеющих знаки €, а не знаки $ перед этими числами.

KA-ZXAVf2GOH65G1ndEwkkl7fEFyTaxWDPlL
ECMAScript 2018 — (?

8. Escapes свойств RegExp Unicode

Было нелегко написать RegEx, чтобы соответствовать разным символам Unicode. Такие вещи, как \w , \W , \d и т.д. отвечают только английским символам и цифрам. Но как насчет цифр в других языках, таких как хинди, греческий и т.д.?

Вот где на помощь приходят начальные средства Unicode Property Escapes. Оказывается, Unicode добавляет свойства метаданных для каждого символа (символа) и использует их для группировки или характеристики разных символов.

Например, база данных Unicode группирует все символы хинди в свойстве под названием Script со значением Devanagari и другое свойство наз Script_Extensions с одинаковым значением Devanagari. Так что мы можем искать Script=Devanagari и получить все хинди символы.

Деванагари можно использовать для разных индийских языков, таких как маратхи, хинди, санскрит и т.д.

Начиная с ECMAScript 2018 мы можем использовать \p чтобы экранировать символы вместе с {Script=Devanagari} чтобы соответствовать всем этим индийским символам. То есть мы можем использовать: \p{Script=Devanagari} в RegEx, чтобы соответствовать всем символам Деванагари.

zCjtuGGGmBvzUO9b2cCdqraXfEavM4KrQBhN
ECMAScript 2018 – показ \p
//The following matches multiple hindi character
/^\p{Script=Devanagari}+$/u.test('हिन्दी'); //true  
//PS:there are 3 hindi characters h

Подобным образом, база данных Unicode группирует все греческие символы. Script_ExtensionsScript ) свойство со значением Greek . Таким образом, мы можем искать все греческие символы с помощью Script_Extensions=Greek или Script=Greek .

То есть мы можем использовать: \p{Script=Greek} в RegEx, чтобы соответствовать всем греческим символам.

hXu3bf5S3R68S0NgqCY6qpBP69HdAShaJdgx
ECMAScript 2018 – показ \p
//The following matches a single Greek character
/\p{Script_Extensions=Greek}/u.test('π'); // true

Кроме того, база данных Unicode сохраняет разные типы Emojis под логическими свойствами. Emoji, Emoji_Component, Emoji_Presentation, Emoji_Modifierи Emoji_Modifier_Base со значениями свойств как `true`. Так что мы можем искать все Emojis, просто выбрав Emoji быть правдой.

То есть мы можем использовать: \p{Emoji} ,\Emoji_Modifier и так далее, чтобы соответствовать разным видам Emojis.

Следующий пример все прояснит.

hp2GXlB3IanbeH9m1fEOzXglZJiofBKUxdY6
ECMAScript 2018 — показывает, как можно использовать pp для различных эмодз
//The following matches an Emoji character
/\p{Emoji}/u.test('❤️'); //true

//The following fails because yellow emojis don't need/have Emoji_Modifier!
/\p{Emoji}\p{Emoji_Modifier}/u.test('✌️'); //false

//The following matches an emoji character\p{Emoji} followed by \p{Emoji_Modifier}
/\p{Emoji}\p{Emoji_Modifier}/u.test('✌?'); //true

//Explaination:
//By default the victory emoji is yellow color.
//If we use a brown, black or other variations of the same emoji, they are considered
//as variations of the original Emoji and are represented using two unicode characters.
//One for the original emoji, followed by another unicode character for the color.
//
//So in the below example, although we only see a single brown victory emoji,
//it actually uses two unicode characters, one for the emoji and another
// for the brown color.
//
//In Unicode database, these colors have Emoji_Modifier property.
//So we need to use both \p{Emoji} and \p{Emoji_Modifier} to properly and
//completely match the brown emoji.
/\p{Emoji}\p{Emoji_Modifier}/u.test('✌?'); //true

Наконец, мы можем использовать большое «P»(\P ) escape-символ вместо маленького p(\p )чтобы отрицать совпадения.

Ссылки:

  1. Предложение ECMAScript 2018
  2. https://mathiasbynens.be/notes/es-unicode-property-escapes

8. Promise.prototype.finally()

finally() это новый метод экземпляра, добавленный в Promise. Основная идея состоит в том, чтобы разрешить выполнение обратного вызова после любого resolve или reject чтобы помочь убрать вещи. The finally callback вызывается без всякого значения и всегда выполняется несмотря ни на что.

Рассмотрим разные случаи.

yQ99TgkxFshSnmlQqdfFMM73kQcxAcKH2VHl
ECMAScript 2018 — finally() в решении случая
KlH72OCk03Fj3AXXtaB-gXVnxDFKEtWz7nUp
ECMAScript 2018 — finally() в случае отклонения
WFFh7DJihhy4C2bGH86n2g5bZ9vyoNu1h7WU
ECMASCript 2018 — finally() в ошибке, выброшенной из случая Promise
Y34QmvZuh3kYeob2HC3W4fFXB2fFkpRLvfND
ECMAScript 2018 — Ошибка, выброшенная в пределах **catch** case

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

Это *чрезвычайно полезная функция. По сути это позволяет нам легко создавать циклы асинхронного кода!

Эта функция добавляет новое «для-ожидания» цикл, позволяющий нам вызвать асинхронные функции, возвращающие промеси (или массивы с кучей промесей) в цикле. Интересно, что цикл ждет решения каждого Promise, прежде чем перейти к следующему циклу.

XAZiwAIhT8JdwhA5y7GMP8Dm4oJ1tyqsI5Qo
ECMAScript 2018 – асинхронный итератор через for-await-of

Это почти все!

Если это было полезно, щелкните, пожалуйста, мальчик? нажмите кнопку внизу несколько раз, чтобы показать поддержку! ⬇⬇⬇ ??

https://medium.com/@rajaraodv/latest

  1. Просмотрите эти полезные советы и рекомендации по ECMAScript 2015 (ES6).
  2. 5 «плохих» частей JavaScript, исправленных в ES6
  3. Является ли «Класс» в ES6 новой «плохой» частью?

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

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