10 nowych funkcji JavaScript w ES2020, o których powinieneś wiedzieć

Dobra wiadomość - nowe funkcje ES2020 są już gotowe! Oznacza to, że mamy teraz pełne wyobrażenie o zmianach zachodzących w ES2020, nowej i ulepszonej specyfikacji JavaScript. Zobaczmy więc, jakie to zmiany.

# 1: BigInt

BigInt, jedna z najbardziej oczekiwanych funkcji JavaScript, jest wreszcie tutaj. W rzeczywistości pozwala programistom na znacznie większą reprezentację liczb całkowitych w ich kodzie JS do przetwarzania danych do obsługi danych.

W tej chwili maksymalna liczba, jaką możesz zapisać jako liczbę całkowitą w JavaScript to pow(2, 53) - 1. Ale BigInt w rzeczywistości pozwala ci wyjść nawet poza to.  

Musisz jednak mieć ndopisek na samym końcu numeru, jak widać powyżej. Oznacza nto, że jest to BigInt i powinien być traktowany inaczej przez silnik JavaScript (przez silnik v8 lub inny używany przez niego silnik).

To ulepszenie nie jest kompatybilne wstecz, ponieważ tradycyjnym systemem liczbowym jest IEEE754 (który po prostu nie obsługuje numerów o takim rozmiarze).

# 2: Dynamiczny import

Dynamiczne importowanie w języku JavaScript umożliwia natywne importowanie plików JS jako modułów w aplikacji. To jest tak, jak w tej chwili robisz to z Webpack i Babel.

Ta funkcja pomoże Ci wysłać kod na żądanie, lepiej znany jako dzielenie kodu, bez narzutu związanego z pakietem internetowym lub innymi pakietami modułów. Jeśli chcesz, możesz również warunkowo załadować kod w bloku if-else.

Dobrą rzeczą jest to, że faktycznie importujesz moduł, więc nigdy nie zanieczyszcza globalnej przestrzeni nazw.

# 3: Zerowe łączenie się

Łączenie zerowe dodaje możliwość prawdziwego sprawdzania nullishwartości zamiast falseywartości. Jaka jest różnica między wartościami nullishi falsey, możesz zapytać?

W JavaScript, wiele wartości są falsey, jak pustych strun, liczba 0, undefined, null, false, NaN, i tak dalej.

Jednak wiele razy możesz chcieć sprawdzić, czy zmienna jest pusta - to znaczy, czy jest albo undefinedalbo null, na przykład, gdy zmienna może mieć pusty ciąg lub nawet wartość fałszywą.

W takim przypadku użyjesz nowego zerowego operatora koalescencji, ??

Możesz wyraźnie zobaczyć, jak operator OR zawsze zwraca prawdziwą wartość, podczas gdy operator nullish zwraca wartość inną niż zerowa.

# 4: Opcjonalne łączenie

Opcjonalna składnia łańcuchowa umożliwia dostęp do głęboko zagnieżdżonych właściwości obiektu bez martwienia się, czy właściwość istnieje, czy nie. Jeśli istnieje, to świetnie! Jeśli nie, undefinedzostanie zwrócony.

Działa to nie tylko na właściwościach obiektów, ale także na wywołaniach funkcji i tablicach. Super wygodne! Oto przykład:

# 5: Promise.allSettled

Promise.allSettledMetoda akceptuje tablicę obietnic i tylko rozwiązuje gdy wszystkie z nich są rozliczane - albo rozwiązane lub odrzucone.

Nie było to wcześniej dostępne natywnie, mimo że niektóre bliskie implementacje, takie jak racei allbyły dostępne. To przenosi „Po prostu spełnij wszystkie obietnice - nie obchodzą mnie wyniki” natywnie w JavaScript.

# 6: String # matchAll

matchAllto nowa metoda dodana do Stringprototypu, która jest związana z wyrażeniami regularnymi. To zwraca iterator, który zwraca wszystkie dopasowane grupy jedna po drugiej. Spójrzmy na szybki przykład:

# 7: globalThis

Jeśli napisałeś jakiś wieloplatformowy kod JS, który mógłby działać na Node, w środowisku przeglądarki, a także wewnątrz web-workerów, trudno byłoby ci zdobyć globalny obiekt.

Dzieje się tak, ponieważ jest windowprzeznaczony dla przeglądarek, globaldla Node i selfdla pracowników sieci. Jeśli jest więcej środowisk wykonawczych, obiekt globalny również będzie dla nich inny.

Musiałbyś więc mieć własną implementację wykrywania środowiska uruchomieniowego, a następnie używania prawidłowego globalnego - to znaczy do teraz.

ES2020 przynosi nam, globalThisco zawsze odnosi się do obiektu globalnego, bez względu na to, gdzie wykonujesz swój kod:

# 8: Eksport przestrzeni nazw modułów

W modułach JavaScript można było już zastosować następującą składnię:

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

Jednak exportdo tej pory nie istniała żadna symetryczna składnia:

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

Jest to równoważne z następującym:

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

# 9: Dobrze zdefiniowana kolejność

Specyfikacja ECMA nie określa, w jakiej kolejności ma for (x in y)  przebiegać. Mimo że przeglądarki już wcześniej samodzielnie wdrażały spójną kolejność, zostało to oficjalnie ustandaryzowane w ES2020.

# 10: import.meta

import.metaObiekt został stworzony przez wdrożenie ECMAScript, z nullprototypem.

Rozważ moduł module.js:

Możesz uzyskać dostęp do metainformacji o module za pomocą import.metaobiektu:

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

Zwraca obiekt z urlwłaściwością wskazującą podstawowy adres URL modułu. Będzie to adres URL, z którego został pobrany skrypt (w przypadku skryptów zewnętrznych) lub podstawowy adres URL dokumentu zawierającego dokument (w przypadku skryptów wbudowanych).

Wniosek

Uwielbiam spójność i szybkość, z jaką społeczność JavaScript ewoluowała i ewoluuje. To niesamowite i naprawdę cudowne widzieć, jak JavaScript wyrósł z języka, który był wygwizdywany przez 10 lat, do jednego z najsilniejszych, najbardziej elastycznych i wszechstronnych języków wszechczasów.

Czy chcesz nauczyć się JavaScript i innych języków programowania w zupełnie nowy sposób? Udaj się na nową platformę dla programistów, nad którą pracuję, aby wypróbować ją dzisiaj!

Jaka jest Twoja ulubiona funkcja ES2020? Opowiedz mi o tym, tweetując i łącząc się ze mną na Twitterze i Instagramie!

To jest post na blogu utworzony z mojego filmu wideo na ten sam temat. Oznaczałoby to dla mnie cały świat, gdybyś mógł okazać mu trochę miłości!