10 нових функцій JavaScript у ES2020, які ви повинні знати

Хороші новини - нові функції ES2020 тепер доопрацьовані! Це означає, що ми тепер маємо повне уявлення про зміни, що відбуваються в ES2020, новій та вдосконаленій специфікації JavaScript. Тож давайте подивимось, що це за зміни.

№1: BigInt

BigInt, одна з найбільш очікуваних функцій JavaScript, нарешті, тут. Це фактично дозволяє розробникам мати набагато більше цілочисельного представлення в коді JS для обробки даних для обробки даних.

На даний момент максимальна кількість, яку ви можете зберегти як ціле число в JavaScript pow(2, 53) - 1. Але BigInt насправді дозволяє вам піти навіть далі.  

Однак ви повинні мати nдоданий у самому кінці номера номер, як ви можете бачити вище. Це nвказує на те, що це BigInt і до нього повинен по-різному ставитися механізм JavaScript (механізм v8 або будь-який інший механізм, який він використовує).

Це вдосконалення не є зворотно сумісним, оскільки традиційною системою числення є IEEE754 (яка просто не може підтримувати номери такого розміру).

№2: Динамічний імпорт

Динамічний імпорт у JavaScript дає можливість імпортувати файли JS динамічно як модулі у вашій програмі. Це подібно до того, як ви робите це зараз за допомогою Webpack та Babel.

Ця функція допоможе вам доставити код за запитом, більш відомий як розбиття коду, без накладних витрат на веб-пакет або інші пакети модулів. Ви також можете умовно завантажити код у блок if-else, якщо хочете.

Добре в тому, що ви насправді імпортуєте модуль, і тому він ніколи не забруднює глобальний простір імен.

№3: Нульове злиття

Нульове злиття додає можливість справді перевіряти nullishзначення замість falseyзначень. У чому різниця між nullishі falseyзначеннями, ви можете запитати?

В JavaScript, багато цінностей falsey, як порожні рядки, число 0, undefined, null, false, NaN, і так далі.

Однак багато разів вам може знадобитися перевірити, чи є змінна нульовою - тобто, якщо вона є undefinedабо null, наприклад, коли для змінної нормально мати порожній рядок або навіть хибне значення.

У цьому випадку ви будете використовувати новий нульовий оператор злиття, ??

Ви можете чітко бачити, як оператор OR завжди повертає достовірне значення, тоді як нульовий оператор повертає ненульове значення.

# 4: Необов’язковий ланцюжок

Необов’язковий синтаксис ланцюжка дозволяє отримати доступ до глибоко вкладених властивостей об’єкта, не турбуючись про те, чи існує це властивість чи ні. Якщо воно існує, чудово! Якщо ні, undefinedбуде повернуто.

Це працює не тільки на властивості об'єкта, але також на виклики функцій та масиви. Супер зручно! Ось приклад:

No5: Promise.allSettled

Promise.allSettledМетод приймає масив Обіцянки і тільки вирішує , коли всі вони вирішуються - або вирішені або відхилено.

Раніше це було недоступно, хоча деякі близькі реалізації подобаються raceі allбули доступними. Це приносить "Просто виконайте всі обіцянки - я не дбаю про результати", нативно для JavaScript.

# 6: Рядок # matchAll

matchAll- це новий метод, доданий до Stringпрототипу, який пов’язаний із регулярними виразами. Це повертає ітератор, який повертає всі узгоджені групи одна за одною. Давайте подивимось на короткий приклад:

No7: глобальний

Якби ви написали якийсь крос-платформний код JS, який міг би працювати на Node, у середовищі браузера, а також всередині веб-співробітників, вам було б важко дістати глобальний об'єкт.

Це тому, що це windowдля браузерів, globalNode та selfвеб-працівників. Якщо часу виконання буде більше, глобальний об'єкт буде іншим і для них.

Отже, вам довелося б мати власну реалізацію виявлення середовища виконання, а потім використовувати правильний глобальний - тобто дотепер.

ES2020 пропонує нам, globalThisякий завжди посилається на глобальний об'єкт, незалежно від того, де ви виконуєте свій код:

№8: Експорт простору імен модулів

У модулях JavaScript вже можна було використовувати такий синтаксис:

import * as utils from './utils.mjs'

Однак exportдо сих пір не існувало симетричного синтаксису:

export * as utils from './utils.mjs'

Це еквівалентно наступному:

import * as utils from './utils.mjs' export { utils }

№9: Чітко визначений порядок

Специфікація ECMA не визначає, в якому порядку for (x in y)  слід виконувати. Незважаючи на те, що до цього часу браузери самостійно впроваджували послідовне замовлення, це офіційно стандартизовано в ES2020.

No10: import.meta

import.metaОб'єкт був створений реалізації ECMAScript, з nullпрототипом.

Розглянемо модуль module.js:

Ви можете отримати доступ до метаінформації про модуль за допомогою import.metaоб’єкта:

console.log(import.meta); // { url: "file:///home/user/module.js" }

Він повертає об'єкт із urlвластивістю, що вказує базову URL-адресу модуля. Це буде або URL-адреса, з якої отримано сценарій (для зовнішніх сценаріїв), або основна URL-адреса документа, що містить документ (для вбудованих сценаріїв).

Висновок

Мені подобається послідовність і швидкість розвитку спільноти JavaScript, яка розвивається. Дивовижно і по-справжньому чудово бачити, як JavaScript прийшов з мови, яку освічували через 10 років, до однієї з найсильніших, найгнучкіших та універсальніших мов усіх часів сьогодні.

Ви хочете вивчити JavaScript та інші мови програмування абсолютно по-новому? Перейдіть до нової платформи для розробників, над якою я працюю, щоб спробувати її сьогодні!

Яка ваша улюблена особливість ES2020? Розкажіть мені про це, твітуючи та спілкуючись зі мною у Twitter та Instagram!

Це допис у блозі, складений із мого відео, на ту саму тему. Для мене це означало б світ, якби ви могли показати йому якусь любов!