Заглянем в светлое будущее JavaScript
Javascript разворачивается каждый день. Он удивляет нас совершенно новыми функциями и идеями, которые заворожили нас. Спасибо комитету TC39, который дает разработчикам множество причин любить язык Javascript. И когда мы говорим о ECMAScript 2020, также известном как ES11, неудивительно, что TC39 проделал огромную хорошую работу и предоставил новые захватывающие обновления.
Но попадают ли эти обновления в актуальную область, которую могут использовать разработчики? Что ж, комитет работает на основе консенсуса и имеет исключительное право изменять или модифицировать какие-либо функции. Каждое изменение языка проходит четыре стадии, которые в основном определяют, насколько далеко оно от завершения.
Что такое ECMAScript?
Как мы все знаем, JavaScript - популярный язык, в основе которого лежит ECMAScript. Помимо JavaScript, такое же ядро используют такие языки, как ActionScript, TypeScript и JScript. Каждый из них отличается друг от друга и имеет определенные модификации, которые делают каждый из них уникальным.
Теперь, без лишних слов, давайте перейдем к…
Новые функции ECMAScript 2020, которые меня больше всего радуют!
1. Дополнительная цепочка:
Как разработчик, я верю в концепцию «СУХОЙ» или «Не повторяйся». Этот принцип является хорошей практикой, но можем ли мы действительно следовать ему, когда нам нужно проверить, присутствует ли значение в многоуровневом объекте?
Мой ответ - НЕТ.
const employee = {
name: {
first: "Pritam",
last: "Guha"
}
};
Допустим, нам нужно проверить длину фамилии. Но фамилия имеет значение null, или объект имени также может отсутствовать в объекте сотрудника. Итак, теперь, если мы хотим добиться этого, мы должны проверить таким образом
if (employee && employee.name && employee.name.last) {
//finally we get the length of the last name of an employee (employee.name.last.length)
}
Но в каждой следующей проверке мы повторяем предыдущую. Предположим, длина вложенности равна 50, и нам нужно узнать длину некоторой переменной! О, нет! Это будет сложно.
Но в ECMAScript 2020 НЕ НУЖНО ПОВТОРИТЬ предыдущий. Вы можете просто использовать
if (employee?.name?.last) {
// and you’ll get the length of the last name of an employee (employee.name.last.length)
}
Итак, главное преимущество этой функции в том, что ваш код компактный, аккуратный и чистый.
2. Нулевое слияние
Узнав о большинстве функций ECMAScript 2020, я понял, что нужно сделать ваш код более оптимизированным. И нет ничего удивительного в том, что функция нулевого объединения эффективно справляется с созданием оптимизированного кода.
Ранее предположим, что возникает ситуация, когда переменная (скажем, x) будет устанавливать значение по умолчанию true, если значение другой переменной (скажем, y) либо равно нулю, либо не определено. Независимо от значения y - true или false, просто скопируйте это значение в x. Итак, в ES6 мы бы сделали это правильно
if (y === null || y === undefined) {
x = true;
} else {
x = y;
}
Но в ES11 вам не нужно выписывать все эти чеки. Вы можете просто записать-
x = y ?? true;
На самом деле, есть разница между нулевым и ложным. Нулевые значения могут быть либо нулевыми, либо неопределенными, но ложные значения - это такие значения, как пустая строка, число 0, неопределенное, нулевое, Nan, ложное.
3. Динамический импорт
Эта функция определенно поможет вашему приложению работать более эффективно. Теперь вы можете импортировать модуль именно тогда, когда он нужен.
До ES11
Import {showModal} from ‘./show-modal’;
Const showModalButton = document.querySelector(‘’.showModalBtn”);
showModalButton.addEventListener(‘click”,showModalButton);
В ES6 вы могли бы сделать это, используя ленивые загружаемые модули, используя веб-пакет или другие сборщики модулей, вы можете добиться этого (известное как разделение кода).
Но в ES11 мы можем добиться этого без использования сборщика модулей!
In ES11
const showModalButton = document.querySelector(‘’.showModalBtn”);
showModalButton.addEventListener(‘click”, () => {
import( ‘./show-modal’)
.then(modal => {
modal.showModal()
})
.catch(error => {
// if the module fails
})
})
Таким образом, теперь вы можете загружать модуль, когда он нужен, без использования какого-либо сборщика модулей, и это определенно ускорит ваше приложение.
4. Promise.allSettled
Предположим, есть сценарий, когда вы запускаете новую задачу после выполнения всех обещаний. Именно здесь раньше вы использовали Promise.all (). У этого метода есть один недостаток: он может вызвать ошибку, если ваше одно обещание будет отклонено. Это означает, что ваш код не будет ждать, пока все ваши обещания будут выполнены.
В ES11 вы можете решить эту проблему с помощью обещания.allSettled (). Этот метод не заботится о единственном значении обещания, он вернет ответ, когда все обещания будут выполнены.
До ES11
Promise.resolve(100), Promise.reject(null), Promise.resolve(‘resolved’’), Promise.reject(new Error(‘Something went wrong’))]; Promise.all(PromiseArray) .then(data => console.log(‘all resolved and the resolved values are — ->’, data)) .catch(err => console.log(‘rejected! reason:’, err)) //rejected! reason: null
Итак, вы можете видеть, что обещание выдает ошибку, когда из обещаний отклоняется
Promise.resolve(100),
Promise.reject(null),
Promise.resolve(‘resolved’’),
Promise.reject(new Error(‘Something went wrong’))];
Promise.allSettled(PromiseArray).then(res =>{
console.log(res);
}).catch(err => console.log(err));
//[
//{status: “fulfilled”, value: 100},
//{status: “rejected”, reason: null},
//{status: “fulfilled”, value: “resolved”},
//{status: “rejected”, reason: Error: Something went wrong}
//]
Promise.allSettled возвращает все значение независимо от того, отклонено это значение или разрешено.
5. globalThis
Когда у нас уже есть окно в браузере,
console.log(this); console.log(window); console.log(self);
Кроме того, эти три вышеупомянутых возвращают одно и то же окно, тогда зачем понадобилась эта функция globalThis, спросите вы?
Когда вы используете веб-мастера, работать будет только я. А если вы используете Node.js, то у них есть отдельный объект с именем global, и вы не можете получить доступ к окну.
Итак, избегая привязки к конкретной платформе, в ES11 появилась globalThis, которая будет работать независимо на любой платформе.
6. BigInt
BigInt - это встроенный объект, представляющий целое число, которое больше 2ˆ53–1, что является самым высоким поддерживаемым числом в JS.
BigInt создается добавлением n в качестве суффикса любого числа или просто вызовом BigInt ()
const n = 4983748730743874n const another = BigInt(43764639463964); / / 43764639463964n
7. String.matchAll
В настоящее время в javascript нет строкового метода, с помощью которого можно было бы искать все вхождения строки вместе с группами захвата.
Мы должны использовать регулярное выражение для поиска всех экземпляров с помощью метода сопоставления.
const dummyString = ‘foo bar foo foobar foofoobarbarbar foobarbar’; const matches = str.match(/foo(bar)+/g); console.log(matches); // [“foobar” , “foobarbarbar”, “foobarbar”]
Теперь поговорим о matchAll. Этот метод принимает регулярное выражение и преобразует любой объект нерегулярного выражения в регулярное выражение с помощью конструктора RegExp.
Если мы используем matchAll вместо match для приведенного выше кода, мы получим
[[“foobar”,”bar”], [“foobarbarbar”, “bar”], [“foobarbar”, “bar”]]
Как мы видим, группа захвата (полоса) возвращается с каждым результатом с помощью matchAll. Еще одно важное отличие состоит в том, что итератор, возвращаемый методом matchAll, нельзя перезапустить.
8. Числовые разделители.
В более ранних версиях javascript было практически невозможно определить, сколько цифр в больших числах, невооруженным глазом. Но теперь Javascript добавил разделители цифр для чисел, чтобы сгруппировать их в меньшие группы цифр с подчеркиванием.
const d = 1_000_000_000_000
И он будет возвращен 1000000000000, если мы запустим console.log на d.
Он также работает с десятичными числами.
const d = 9_038_390_890_990.789_546
И d отобразит 9038390890990.789546, если мы запустим console.log на d.
Итак, какая особенность ES11 вас больше всего волнует. Упоминайте их в комментариях.
Спасибо
https://tc39.es/ecma262/,
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/. matchAll
https://v8.dev/features/numeric-separators
Удачного кодирования !!
