Oto przykłady wszystkiego, co nowe w ECMAScript 2016, 2017 i 2018

przez rajaraodv

trudno śledzić nowości w JavaScript (ECMAScript). A jeszcze trudniej znaleźć przydatne przykłady kodu.

w tym artykule omówię wszystkie funkcje 18 wymienione w gotowych propozycjach TC39, które zostały dodane w ES2016, ES2017 i ES2018 (wersja ostateczna) i pokażę je z przydatnymi przykładami.

to jest dość długi post, ale powinien być łatwy do odczytania. Pomyśl o tym, jak o ” Netflix binge reading.”Pod koniec tego obiecuję, że będziesz miał mnóstwo wiedzy na temat wszystkich tych funkcji.

ok, przejdźmy jeden po drugim.

Array.prototyp.zawiera

includes jest prostą metodą instancji na tablicy i pomaga łatwo znaleźć, czy Element jest w tablicy (w tym NaNw przeciwieństwie do indexOf).

Ciekawostki: spec JavaScript ludzie chcieli nazwać go contains, ale najwyraźniej był już używany przez Mootools, więc używali includes.

Wykładnictwo infix operator

operacje matematyczne , takie jak dodawanie i odejmowanie, mają operatory infiksowe, takie jak odpowiednio + i -. Podobnie do nich, Operator infiksu ** jest powszechnie używany do operacji wykładnika. W ECMAScript 2016 wprowadzono ** zamiast Math.pow.

obiekt.wartości()

Object.values() jest nową funkcją, która jest podobna do Object.keys(), ale zwraca wszystkie wartości własnych właściwości obiektu z wyłączeniem wartości w łańcuchu prototypowym.

obiekt.wpisy()

Object.entries() jest związane z Object.keys, ale zamiast zwracać tylko klucze, zwraca zarówno klucze, jak i wartości w sposób tablicy. To sprawia, że bardzo łatwo jest robić rzeczy, takie jak używanie obiektów w pętlach lub przekształcanie obiektów w mapy.

przykład 1:

przykład 2:

wypełnianie łańcuchów

do łańcucha zostały dodane dwie metody instancji — String.prototype.padStart i String.prototype.padEnd — które umożliwiają dodawanie/dodawanie pustego lub innego łańcucha do początku lub końca oryginalnego łańcucha.

'someString'.padStart(numberOfCharcters ); '5'.padStart(10) // ' 5''5'.padStart(10, '=*') //'=*=*=*=*=5''5'.padEnd(10) // '5 ''5'.padEnd(10, '=*') //'5=*=*=*=*='

jest to przydatne, gdy chcemy wyrównać rzeczy w scenariuszach takich jak ładny druk lub druk terminalowy.

3.1 przykład padstartu:

w poniższym przykładzie mamy listę liczb o różnych długościach. Chcemy poprzedzić „0” tak, aby wszystkie elementy miały tę samą długość 10 cyfr do celów wyświetlania. Możemy użyć padStart(10, '0'), aby łatwo to osiągnąć.

3.2 przykład padEnd:

padEnd naprawdę przydaje się, gdy drukujemy wiele elementów o różnych długościach i chcemy je odpowiednio wyrównać.

poniższy przykład jest dobrym realistycznym przykładem tego, jak padEnd, padStart i Object.entries łączą się, aby uzyskać piękny wynik.

3.3 ⚠️ padStart i padEnd na emotikonach i innych znakach dwubajtowych

emotikony i inne znaki dwubajtowe są reprezentowane przy użyciu wielu bajtów unicode. Tak więc padStart i padEnd mogą nie działać zgodnie z oczekiwaniami!⚠ ️

na przykład: załóżmy, że staramy się umieścić ciąg heart, aby osiągnąć 10 znaki z ❤ ️ emoji. Wynik będzie wyglądał poniżej:

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

dzieje się tak dlatego, że ❤ ️ ma długość 2 punktów kodowych ('\u2764\uFE0F' )! Samo słowo heart ma 5 znaków, więc pozostało nam tylko 5 znaków. Więc co się dzieje, że JS podkłada dwa serca za pomocą '\u2764\uFE0F' i to daje❤ ️ ❤ ️. Dla ostatniego po prostu używa pierwszego bajtu serca \u2764 co daje ❤

więc kończymy z: ❤️❤️❤heart

PS: możesz użyć tego linku, aby sprawdzić konwersje znaków unicode.

obiekt.getOwnPropertyDescriptors

metoda ta zwraca wszystkie szczegóły (łącznie z metodami getter get i setter set) dla wszystkich właściwości danego obiektu. Główną motywacją do dodania tego jest umożliwienie płytkiego kopiowania / klonowania obiektu do innego obiektu, który również kopiuje funkcje getter i setter w przeciwieństwie do Object.assign.

obiekt.Przypisz płytkie kopie wszystkich szczegółów z wyjątkiem funkcji getter i setter oryginalnego obiektu źródłowego.

poniższy przykład pokazuje różnicę między Object.assign i Object.getOwnPropertyDescriptors wraz z Object.defineProperties, aby skopiować oryginalny obiekt Car do nowego obiektu ElectricCar. Zobaczysz, że przy użyciu Object.getOwnPropertyDescriptors ,discount funkcje getter i setter są również kopiowane do obiektu docelowego.

przed…

po…

Dodaj końcowe przecinki w parametrach funkcji

jest to niewielka aktualizacja, która pozwala nam mieć końcowe przecinki po ostatnim parametrze funkcji. Dlaczego? Aby pomóc z narzędziami takimi jak Git blame, aby zapewnić obwinianie tylko nowych programistów.

poniższy przykład pokazuje problem i rozwiązanie.

Uwaga: Możesz również wywoływać funkcje z przecinkami końcowymi!

asynchroniczny / oczekiwanie

ta, jak na razie, jest najważniejszą i najbardziej użyteczną funkcją, jeśli O mnie chodzi. Funkcje asynchroniczne pozwalają nam nie radzić sobie z piekłem wywołania zwrotnego i sprawiają, że cały kod wygląda prosto.

słowo kluczowe async mówi kompilatorowi JavaScript, aby traktował tę funkcję inaczej. Kompilator zatrzymuje się za każdym razem, gdy dotrze do słowa kluczowego await w tej funkcji. Zakłada, że wyrażenie po await zwraca obietnicę i czeka, aż obietnica zostanie rozwiązana lub odrzucona przed przejściem dalej.

w poniższym przykładzie funkcja getAmount wywołuje dwie funkcje asynchroniczne getUser i getBankBalance . Możemy to zrobić w obietnicy, ale użycie async await jest bardziej eleganckie i proste.

6.1 funkcje asynchroniczne same zwracają obietnicę.

jeśli czekasz na wynik z funkcji asynchronicznej, musisz użyć składni Promise then, aby uchwycić jej wynik.

w poniższym przykładzie chcemy zapisać wynik używając console.log, ale nie wewnątrz doubleAndAdd. Chcemy więc poczekać i użyć składni then, aby przekazać wynik do console.log .

6.2 wywołanie async / await równolegle

w poprzednim przykładzie wywołujemy await dwa razy, ale za każdym razem czekamy na jedną sekundę (łącznie 2 sekundy). Zamiast tego możemy to porównać, ponieważ a i bnie są zależne od siebie za pomocą Promise.all.

6.3 Obsługa błędów funkcje asynchroniczne / oczekujące

istnieją różne sposoby obsługi błędów podczas korzystania z asynchronicznego oczekiwania.

Opcja 1 — Użyj try catch w funkcji

Opcja 2— Wyłapuj każde oczekujące wyrażenie

ponieważ każde wyrażenie await zwraca obietnicę, możesz wyłapać błędy w każdej linii, jak pokazano poniżej.

Opcja 3 — Przechwyć całą funkcję asynchroniczną oczekującą

ECMAScript jest obecnie w ostatecznej wersji i ukaże się w czerwcu lub lipcu 2018. Wszystkie funkcje opisane poniżej są w etapie 4 i będą częścią ECMAScript 2018.

1. Pamięć współdzielona i atomika

jest to ogromna, dość zaawansowana funkcja i jest podstawowym ulepszeniem silników JS.

główną ideą jest wprowadzenie pewnego rodzaju funkcji wielowątkowej do JavaScript, aby Programiści JS mogli pisać wysokowydajne, współbieżne programy w przyszłości, pozwalając na samodzielne zarządzanie pamięcią, zamiast pozwolić js engine zarządzać pamięcią.

jest to wykonywane przez nowy typ globalnego obiektu o nazwie SharedArrayBuffer, który zasadniczo przechowuje dane we wspólnej przestrzeni pamięci. Tak więc dane te mogą być współdzielone między głównym wątkiem JS i wątkami Web-workera.

do tej pory, jeśli chcemy udostępniać dane między głównym wątkiem JS a web-workerami, musieliśmy skopiować dane i wysłać je do drugiego wątku za pomocą postMessage. Już nie!

po prostu używasz SharedArrayBuffer, a dane są natychmiast dostępne zarówno przez główny wątek, jak i wiele wątków internetowych.

ale dzielenie pamięci między wątkami może powodować warunki wyścigu. Aby uniknąć warunków rasowych, wprowadzono obiekt globalny „Atomics”. Atomics udostępnia różne metody blokowania pamięci współdzielonej, gdy wątek używa swoich danych. Zapewnia również metody bezpiecznej aktualizacji takich danych w tej pamięci współdzielonej.

zaleca się korzystanie z tej funkcji za pośrednictwem niektórych bibliotek, ale w tej chwili nie ma bibliotek zbudowanych na tej funkcji.

jeśli jesteś zainteresowany, polecam lekturę:

1. od pracowników do współdzielonej pamięci-lucasfcosta
2. kreskówkowe wprowadzenie do SharedArrayBuffers-Lin Clark
3. współdzielona pamięć i atomika – Dr Axel Rauschmayer

2. Tagged Template literal restriction remove

najpierw musimy wyjaśnić, czym jest „Tagged Template literal”, abyśmy mogli lepiej zrozumieć tę funkcję.

w ES2015+ istnieje funkcja o nazwie tagged template literal, która pozwala programistom dostosować sposób interpolacji ciągów. Na przykład, w standardowy sposób łańcuchy są interpolowane jak poniżej…

w oznaczonym literale można napisać funkcję, aby otrzymać zakodowane na stałe części literału łańcucha, na przykład , i zmienne zastępcze, na przykład, jako parametry do funkcji niestandardowej (na przykład greet) i zwrócić cokolwiek chcesz z tej funkcji niestandardowej.

poniższy przykład pokazuje, że nasza niestandardowa funkcja ” Tag „greet dodaje czas Dnia, taki jak ” Dzień dobry!””Dzień dobry”, i tak dalej w zależności od pory dnia do ciągu literalnego i zwraca niestandardowy ciąg.

teraz, gdy omówiliśmy, czym są „oznaczone” funkcje, Wiele osób chce korzystać z tej funkcji w różnych domenach, takich jak Terminal dla poleceń i żądań HTTP do komponowania Uri, i tak dalej.

⚠ ️ problem z tagged string literal

więc jeśli masz oznakowaną funkcję, która wewnętrznie używa reguł innej domeny (takich jak reguły terminala), która może wymagać użycia \ ubla123abla, która nie wygląda jak \ u0049 lub \u{@f804}, wtedy pojawi się błąd składni.

w ES2018 reguły są złagodzone, aby umożliwić takie pozornie nieprawidłowe znaki ucieczki, o ile funkcja Tagged zwraca wartości w obiekcie z właściwością ” gotowane „(gdzie nieprawidłowe znaki są” niezdefiniowane”), a następnie właściwością” surowe ” (z czymkolwiek chcesz).

znacznik”dotall” dla wyrażenia regularnego

obecnie w wyrażeniu regularnym, chociaż kropka(„.”) ma pasować do pojedynczego znaku, nie pasuje do znaków nowej linii, takich jak \n \r \f etc.

na przykład:

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

to ulepszenie umożliwia operatorowi dot dopasowanie dowolnego pojedynczego znaku. Aby upewnić się, że to niczego nie zepsuje, musimy użyć flagi \s podczas tworzenia wyrażenia regularnego, aby to działało.

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

oto ogólne API z wniosku doc:

Wyrażenie regularne o nazwie Grupa przechwytuje ?

to rozszerzenie przynosi użyteczną funkcję wyrażenia regularnego z innych języków, takich jak Python, Java i tak dalej o nazwie „nazwane grupy.”Ta funkcja umożliwia programistom piszącym Wyrażenie regularne dostarczanie nazw (identyfikatorów) w formacie(?<name>...) dla różnych części grupy w wyrażeniu regularnym. Następnie mogą użyć tej nazwy, aby z łatwością złapać dowolną grupę.

4.1 podstawowy przykład nazwanej grupy

4.2 używając nazwanych grup wewnątrz wyrażeń regularnych

możemy użyć formatu \k<group name>, aby odwołać się do grupy wewnątrz wyrażeń regularnych. Poniższy przykład pokazuje, jak to działa.

4.3 używanie nazwanych grup w łańcuchu.prototyp.zastąp

funkcja nazwanej grupy jest teraz wypiekana w metodzie instancji String replace. Więc możemy łatwo zamienić słowa w ciągu.

na przykład zmień „firstName, lastName” na „lastName, firstName”.

właściwości Rest dla obiektów

operator Rest ... (trzy kropki) pozwala nam wyodrębnić właściwości obiektów, które jeszcze nie zostały wyodrębnione.

5.1 możesz użyć rest, aby wyodrębnić tylko pożądane właściwości

5.2 co więcej, możesz usunąć niechciane przedmioty! ??

właściwości Spread dla obiektów

właściwości Spread również wyglądają jak właściwości rest z trzema kropkami ..., ale różnica polega na tym, że używasz spread do tworzenia (restrukturyzacji) nowych obiektów.

Wskazówka: Operator rozrzutu jest używany po prawej stronie znaku równości. Pozostałe są używane po lewej stronie znaku równości.

regexp Lookbehind Assertions

jest to rozszerzenie wyrażenia regularnego, które pozwala nam zapewnić, że jakiś łańcuch istnieje natychmiast *przed* innym łańcuchem.

możesz teraz użyć Grupy (?<=…) (znak zapytania, mniej niż, równa), aby sprawdzić pozytywne twierdzenie.

pozytywne twierdzenie: powiedzmy, że chcemy upewnić się, że znak # istnieje przed słowem winning (to jest: #winning) i chcemy, aby Wyrażenie regularne zwracało tylko ciąg „winning”. Oto jak byś to napisał.

twierdzenie ujemne: Załóżmy, że chcemy wyodrębnić liczby z linii, które mają znaki€, a nie znaki $ przed tymi liczbami.

wyrażenia regexp właściwości Unicode

nie było łatwo napisać wyrażenia RegEx, aby dopasować różne znaki unicode. Takie rzeczy jak \w , \W , \d etc dopasuj tylko angielskie znaki i liczby. Ale co z liczbami w innych językach, takich jak Hindi, Grecki i tak dalej?

w tym miejscu pojawiają się ucieczki właściwości Unicode. Okazuje się, że Unicode dodaje właściwości metadanych dla każdego symbolu (znaku) i używa go do grupowania lub scharakteryzowania różnych symboli.

na przykład baza danych Unicode grupuje wszystkie znaki Hindi pod właściwością o nazwie Script z wartością Devanagari i inną właściwością o nazwie Script_Extensionsz tą samą wartością Devanagari. Więc możemy wyszukać Script=Devanagari i uzyskać wszystkie znaki Hindi.

Devanagari może być używany w różnych językach indyjskich, takich jak Marathi, Hindi, sanskryt i tak dalej.

począwszy od ECMAScript 2018, możemy użyć \p do znakowania escape wraz z {Script=Devanagari}, aby dopasować wszystkie te znaki indyjskie. Oznacza to, że możemy użyć: \p{Script=Devanagari} w wyrażeniach regularnych, aby dopasować wszystkie znaki Devanagari.

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

podobnie, baza danych Unicode grupuje wszystkie greckie znaki w ramach właściwości Script_Extensions (i Script ) z wartością Greek . Możemy więc wyszukiwać wszystkie greckie znaki używając Script_Extensions=Greek lub Script=Greek.

oznacza to, że możemy użyć: \p{Script=Greek} w wyrażeniu regularnym, aby dopasować wszystkie greckie znaki.

//The following matches a single Greek character/\p{Script_Extensions=Greek}/u.test('π'); // true

ponadto baza danych Unicode przechowuje różne typy Emoji w ramach właściwości logicznychEmoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, i Emoji_Modifier_Base z wartościami właściwości jako 'true’. Możemy więc wyszukać wszystkie emotikony, po prostu wybierając Emoji, aby była prawdziwa.

oznacza to, że możemy użyć: \p{Emoji} ,\Emoji_Modifier i tak dalej, aby dopasować różne rodzaje Emoji.

poniższy przykład wszystko wyjaśni.

na koniec możemy użyć dużego znaku „P”(\P ) zamiast małego p (\p ), aby zanegować dopasowania.

1. Propozycja ECMAScript 2018

Obietnica.prototyp.wreszcie()

finally() jest nową metodą instancji, która została dodana do Promise. Główną ideą jest umożliwienie wywołania zwrotnego po resolve lub reject, aby pomóc posprzątać. Wywołanie zwrotne finally jest wywoływane bez żadnej wartości i jest zawsze wykonywane bez względu na wszystko.

spójrzmy na różne przypadki.

iteracja asynchroniczna

jest to *niezwykle* przydatna funkcja. Zasadniczo pozwala nam tworzyć pętle kodu asynchronicznego z łatwością!

ta funkcja dodaje nową pętlę „for-waiting-of”, która pozwala nam wywoływać funkcje asynchroniczne, które zwracają obietnice (lub tablice z kilkoma obietnicami) w pętli. Fajne jest to, że pętla czeka na rozwiązanie każdej obietnicy przed wykonaniem następnej pętli.

to prawie wszystko!

jeśli to było przydatne, Proszę kliknąć klaśnięcie ? przycisk poniżej kilka razy, aby pokazać swoje wsparcie! ⬇⬇⬇ ??

moje inne posty

1. Sprawdź te przydatne porady i wskazówki ECMAScript 2015 (ES6)
2. 5 „złe” części JavaScript, które są naprawione w ES6
3. czy „klasa” w ES6 to nowa „zła” część?