5 najnowocześniejszych funkcji JavaScript, które ulepszą Twój kod

Funkcje JavaScript ciągle się rozwijają i otrzymują nowe, takie jak operatory, konstrukcje składni, wyrażenia. Wiele z nich zostało wprowadzonych w ostatnich latach, a niektóre z nich są już drugą naturą, jak na przykład wyrażenie grubej strzałki lub operator =>rozprzestrzeniania obiektu ....

Funkcje JavaScript zaczynają się jako propozycje

Wszystkie te funkcje JavaScript zaczynają się jako propozycje przesłane do TC 39. Komitet Techniczny 39 odpowiada za standaryzację:

uniwersalny, wieloplatformowy, niezależny od dostawcy język programowania ECMAScript (JavaScript). Obejmuje to składnię języka, semantykę i biblioteki oraz technologie uzupełniające, które obsługują język.

Istnieje wiele propozycji JavaScript, które możemy zacząć dodawać do naszego przepływu już dziś, dzięki Babel, kompilatorowi JavaScript. Niektóre z nich oferują większą przejrzystość, jak np. separator liczbowy. Inne, takie jak dowyrażenia, wprowadzają możliwość mieszania złożonych warunków warunkowych ze znacznikami React JSX.

Przyjrzyjmy się w tym artykule 5 funkcjom JavaScript, które są nadal w fazie propozycji, ale których możemy używać z Babel i które znacznie poprawią Twoje wrażenia z kodowania.

Każda z nich ma łącze do swojej strony Babel, na której można zobaczyć, jak skonfigurować Babel, aby z niej korzystać, chociaż proponowane funkcje JavaScript opisane tutaj są już zawarte w Babel 7. Każda sekcja ma również łącze do swojej propozycji w organizacji Ecma TC39 na GitHub.

Zerowy operator koalescencyjny

Propozycja: https://github.com/tc39/proposal-nullish-coalescing

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-nullish-coalescing-operator.html

Ta propozycja JavaScript opisuje operator, który umożliwia podanie wartości zastępczej po prawej stronie operatora, gdy zmienna lub właściwość obiektu jest niezdefiniowana. Jeśli nie jest nieokreślony, użyje lewej strony operatora:

const maybeUndef = undefined;
const val = maybeUndef ?? 2021; 

Jest to podobne do pisania go jako operatora trójargumentowego:

const maybeUndef = undefined;
const val = maybeUndef? maybeUndef: 2021; 

Zauważ, że ten operator nie sprawdza, czy var nie istnieje. Spowoduje to zgłoszenie błędu:

const val = maybeUndef ?? 2021;  

Ale uważaj, ten operator nie jest w 100% podobny do operatora trójskładnikowego, który zwraca pierwszą stronę, jeśli oceniany warunek jest prawdziwy. Nie będzie oceniać wartości, które zwykle są fałszywe w JavaScript do false. Na przykład pusty ciąg nie będzie brany pod uwagę false:

const someEmptyString = '';
const val = someEmptyString ?? 'fallback'; 

W przeciwieństwie do tego pustego operatora koalescencyjnego, operator trójargumentowy zostałby zgłoszony fallbackw wyniku tej oceny.

Opcjonalny operator łańcucha

Propozycja: https://github.com/tc39/proposal-optional-chaining

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining.html

Ten operator działa również na zmiennych i właściwościach obiektów: sprawdza, czy zagnieżdżone właściwości, przez które przechodzimy, istnieją, czy nie. Bez tego operatora musimy sprawdzić każdą zagnieżdżoną właściwość:

const val = anObj && anObj.aProp && anObj.aProp.aNestedProp

Dzięki nowemu opcjonalnemu operatorowi łączenia łańcuchowego możemy zrobić coś takiego:

const val = anObj.aProp?.aNestedProp

Wygląda to znacznie jaśniej i jest krótsze do pisania. Ten operator działa również z tablicami liczbowymi, więc dobrze jest pracować z kolekcjami:

const val = anObj.anArray[0]?.someProp

I możemy łączyć wiele operatorów:

const val = anObj.anArray[0]?.someProp?.aNestedProp

A co jeśli połączymy to z poprzednią, zerową koalescencją? Otrzymujemy składnię, która sprawdza, czy każda przemierzana właściwość istnieje, a jeśli nie, dostarcza wartość zastępczą:

const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'

Jeśli którakolwiek z wartości nie istnieje, zwróci someDefaultValue. Połączenie tych dwóch operatorów to świetny sposób na zastąpienie funkcji get lodash .

Operator rurociągu

Propozycja: https://github.com/tc39/proposal-pipeline-operator

Babel : https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-op erator

Ten operator jest częścią kilku eksperymentalnych funkcji JavaScript, a ten zapewnia większą czytelność podczas łączenia kilku funkcji. Rozważ następującą funkcję:

Jeśli musimy ponownie wykorzystać te częściowe przekształcenia, które są ze sobą połączone, możemy podzielić je na różne funkcje, a następnie skomponować wynik za ich pomocą:

Dziwne w tym jest to, że musimy zacząć czytać to od dołu, od splitBySpacelinii do góry, aby zrozumieć transformacje zastosowane do łańcucha. Jest to sprzeczne z naszym naturalnym przepływem czytania, od góry do dołu. Mamy też wszystkie te brzydkie zwisające nawiasy. Można to zapisać w jednej linijce i nie jest to dużo ładniejsze:

Tutaj musimy zacząć czytać od funkcji centralnej w kierunku funkcji zewnętrznych lub od prawej do lewej, co jest sprzeczne z intuicją w przypadku czytania zachodniego od lewej do prawej.

Operator potoku może uczynić te konstrukcje znacznie bardziej czytelnymi i podobnymi do tworzenia łańcuchów, które mieliśmy pierwotnie przed przeniesieniem transformacji do oddzielnych funkcji:

Teraz zastosowane przekształcenia są pisane podobnie do naszego sposobu pisania, od góry do dołu, są bardziej czytelne i nie mamy żadnych zwisających nawiasów. Powodzenie!

Separator liczbowy

Propozycja: https://github.com/tc39/proposal-numeric-separator

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-numeric-separator.html

Ten separator liczbowy różni się od innych funkcji JavaScript, ponieważ nie jest operatorem. Jest to konstrukcja składni, która sprawia, że ​​literały numeryczne są bardziej czytelne, tworząc wizualną separację między grupami cyfr. Duże literały numeryczne są trudne do przeanalizowania i szybkiego zrozumienia, szczególnie gdy cyfra jest powtarzana wiele razy. Na przykład:

const longNum = 1000000000000;

Trudno to zrozumieć na pierwszy rzut oka. Ten separator sprawia, że ​​jest bardziej czytelny:

const longNum = 1_000_000_000_000;

Teraz możemy szybko zrozumieć, że to bilion.

Czy wyrażenia

Propozycja: https://github.com/tc39/proposal-do-expressions

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-do-expressions

Ostatnią z nowych funkcji JavaScript, przez którą przejdziemy, jest wyrażenie, które może zostać ocenione. Wynik tego wyrażenia pojawia się po wykonaniu bloku, który może zawierać wiele instrukcji. Możemy łatwo zrozumieć wyrażenia do, jeśli przetłumaczymy wyrażenie z operatorem trójskładnikowym, takie jak to:

const res = isCold( color )? 'light-blue': 'orange';

Równoważne do{}wyrażenie napisalibyśmy tak:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else {
        'orange';
    }
};

Zauważ, że nie musimy zwracać wartości, ponieważ nie jest to funkcja. Chociaż w tym konkretnym przypadku można to napisać bardziej zwięźle jako trójkę, wyrażenia do są znacznie bardziej wydajne, pozwalając na wiele instrukcji, na przykład:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else if (isHot( color)) {
        'orange';
    } else if (isRain( color)) {
        'purple';
    } else {
        'green';
    }
};

To, co jest naprawdę potężne, to JSX, gdzie możemy mieszać go z jego tagami bez konieczności wcześniejszego obliczania wyniku zewnętrznie. Na przykład, gdybyśmy używali Reacta do renderowania tych komponentów, moglibyśmy zrobić to:

Więcej propozycji JavaScript

Codziennie omawianych jest coraz więcej propozycji dodania ciekawszych funkcji do języka JavaScript. Ciągle rosnącą listę proponowanych funkcji JavaScript można przeczytać pod adresem https://github.com/tc39/proposals#ecmascript-proposals. Przedstawione tu propozycje są bliskie ukończenia, a zatem bliskie dodania do standardu ECMAScript, jak wyjaśniono w tej tabeli, która opisuje proces akceptacji.

Niektóre z nowych funkcji JavaScript, które omówiliśmy w tym artykule, takie jak wyrażenia do lub operator potoku, są propozycjami etapu 1, co oznacza, że ​​nadal mają przed sobą drogę, zanim staną się częścią standardu ECMAScript.