Nowy Standard JavaScript
10 godz. 43 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperNa początku dowiesz się jakie nowości pojawiły się w języku, jeśli chodzi o tworzenie zmiennych i stałych. Poznasz dwa nowe słowa let i const, a także dokładnie omówimy ich różnice, względem znanego nam do tej pory słowa var. Następnie poruszymy temat obiektów. Zobaczysz jak nowy zapis pozwoli znaczenie ułatwić nam pracę i sprawić, by kod był bardziej czytelny. W kolejnym rozdziale porozmawiamy o zmianach w funkcjach. Poznasz tzw. arrow functions wraz z poradami, kiedy z nich korzystać, a także z konsekwencjami ich użycia. Zobaczysz również, jak korzystać z domyślnych parametrów. Następną nowością będą operatory rest i spread, które znacząco uproszczą pisanie kodu dla funkcji i tablic. Chwilę później rzucimy okiem na bardzo ciekawy temat, mianowicie na tzw. destructuring. To nowa funkcja języka, która pozwala w łatwy sposób wyciągnąć odpowiednie dane z tablic i obiektów, nawet jeżeli te posiadają kilkupoziomową, zagnieżdżoną strukturę. Zmian doczekały się również ciągi znaków. Poznasz nowy zapis, tzw. template string, a także możliwość wykorzystania funkcji tagujących.
ES6 wprowadza do języka JavaScript zapis klas. I choć na początku wydaje się, że to duży krok w stronę klasycznych obiektowych języków programowania, to jak się przekonasz, jest to w dużej mierze tzw. syntactic sugar, a więc zupełnie nowy, prostszy zapis, a prawie identyczne jak wcześniej działanie, oparte na dziedziczeniu prototypowym. W kursie poruszymy również temat Symboli oraz tego jak z nimi pracować, a chwilę później poznasz iteratory. To konstrukcje ułatwiające iterację, które znacząco upraszczają pracę z kolekcjami danych. Wraz z iteratorami poznasz również generatory, które ułatwiają z kolei tworzenie tych iteratorów. Istotną nowością w ES6 są również natywne Promise. To sposób na rozwiązanie problemu asynchroniczności, który znamy od bardzo dawna w postaci różnych bibliotek. Od teraz jednak Promisy znajdują się bezpośrednio w języku. Nowymi konstrukcjami, które pozwalają pracować z kolekcjami danych, są Map i Set. Dowiesz się jak z nich korzystać, a także do czego są przydatne. W jednym z rozdziałów rzucimy też okiem na tzw. Proxy API. To mechanizm języka, który pozwala na dość niskopoziomowy dostęp do różnych operacji. I choć być może nie jest to coś, z czego będziesz korzystał nad wyraz często, to warto wiedzieć, jakie są nowe możliwości tego API.
Jedną z najlepszych nowości, która zawitała do języka JavaScript wraz z ES6 są moduły. To możliwość dzielenia kodu na wiele plików, z których można pewne wartości wyeksportować, a następnie zaimportować je w innych modułach. Tutaj dowiesz się wszystkiego, co z modułami związane. Zobaczysz wiele sposobów na eksport i import, a także jak pracować z modułami w przeglądarkach internetowych. Kurs skupia się na omówieniu wszystkich najważniejszych nowości w ES6, dzieląc je na rozdziały. Jeden z nich natomiast, poświęcony został omówieniu mniejszych zmian, które znalazły się w specyfikacji. Poznasz w nim np. nowe metody tablic czy ulepszoną współpracę z Unicode.
Specyfikacja EcmaScript 2015 wprowadziła naprawdę bardzo wiele zmian, ale jej twórcy założyli, że od tego czasu każda kolejna wersja specyfikacji będzie pojawiać się co roku. Oznacza to przede wszystkim, że nie będziemy na raz bombardowani aż tak wieloma zmianami, jak w 2015 roku. W tym kursie nie zabrakło zatem omówienia nowości ze specyfikacji ES2016 oraz 2017, gdzie poznasz np. nowe metody dla stringów czy funkcje asynchroniczne.
Kiedy będziesz już uzbrojony w solidną wiedzę z zakresu nowości w ES6, dowiesz się jak w praktyce pracuje się dzisiaj z tym standardem. W jednym z rozdziałów omówimy nowoczesny workflow z użyciem npm i wykorzystamy popularne narzędzie webpack, do pracy z modułami, a także do transpilowania kodu ES6 do wersji ES5. Dzięki temu nowoczesny kod, który napiszemy, będzie mógł być uruchamiany również w starszych przeglądarkach, które nie wspierają najnowszego standardu. Dowiesz się na co zwrócić uwagę, by wszystko działało bez zarzutu.
Zwieńczeniem tego kursu będzie praktyczny projekt, w którym od podstaw wykonamy swoją własną bibliotekę do pracy z Obiektowym Modelem Dokumentu. Będzie ona w działaniu nieco podobna do znanej chyba wszystkim biblioteki jQuery. Na tym przykładzie postaramy się wykorzystać jak najwięcej wiedzy z zakresu ES6 zdobytej wcześniej. Stworzymy metody do pracy z drzewem dokumentu, a więc do wyszukiwania elementów, do tworzenia nowych, do przypisywania im klas, atrybutów czy styli CSS. Nie zabraknie również modułu odpowiedzialnego za współpracę z Ajax. Cały kod utworzymy oczywiście w sposób modułowy, aby bibliotekę można było łatwo rozwijać w przyszłości. Na koniec projekt ten przetranspilujemy do kodu ES5 z użyciem Babel i przetestujemy w starszej przeglądarce Internet Explorer 11, aby upewnić się, że nasza biblioteka działa poprawnie.
Kurs ten jest dla wszystkich osób, które znają już język JavaScript i czują się w pracy z nim swobodnie. Jeśli zatem chciałbyś pracować z nowoczesnym kodem JavaScript, to ten kurs jest zdecydowanie dla Ciebie. A może masz zamiar poznać framework Angular lub bibliotekę React? Tam również wykorzystywany jest najnowszy zapis ES6, więc wiedza ta będzie naprawdę pomocna. Z solidną wiedzą z zakresu EcmaScript 6, bez trudu pozostaniesz na bieżąco z każdą kolejną edycją tej specyfikacji.
I na koniec nowości dostępnych dla ciągów znaków w ES6
pokażę ci jeszcze kilka nowych metod, które na string'u są dostępne.
Przejdziemy sobie zatem od razu do kodu i utworze sobie tutaj coś
takiego jak URL i chcę ci pokazać na tym przykładzie nową metodę,
która pozwala nam określić czy jakiś string zaczyna się od jakiegoś
innego substring'u, czyli po prostu czy jest na początku jednego
string'u inny string. Do tego celu utworzymy sobie funkcję na przykład
isHTTPS. Chciałbym, żeby to był taki w miarę praktyczny
przykład, dlatego tak ci to pokaże i ta funkcja będzie przyjmowała jako
parametr jakiś tekst i teraz jak w ES5 moglibyśmy sprawdzić czy
na początku przekazanego tekstu, na przykład takiego, znajduje się HTTPS.
Otóż musielibyśmy sobie coś zwrócić oczywiście, bo chcemy żeby one zwracała true lub false i
odwołalibyśmy się do text indexOf https,
czy on jest równy zero. Dlaczego? Dlatego,
że indexOf na stringach zawsze zwróci ci indeks pierwszego
jakby dopasowania, czy jeżeli napisałem https, to w tym
sttring'u, gdybyśmy podali URL, będzie to pasowało od początku, czyli od indeksu
zero. Gdybym zapytał o ttps, to zostałby mi zwrócony jeden,
bo tutaj string traktujemy jak tablice czyli 0, 1 i tak dalej, a więc jeżeli indeks
jest to zero, to wiemy, że taki string text zaczyna się od https.
Zróbmy sobie zatem console.log isHTTPS i przekażemy
tam URL. Zobaczmy w konsoli mamy wartość true. Natomiast
teraz mamy nową metodę, która nam to ułatwi, dlatego tą starą wykomentuje
i napiszemy return. Na dowolnym stringu możemy skorzystać z
metody starts with, czyli czy zaczyna się od i na
dowolnym string'u, to znaczy na każdym, czy utworzonym tak, czy tak czy
za pomocą template string'u. Nie ma to żadnego znaczenia i tutaj możemy
podać jakiś inny string. Też w dowolnym formacie https
i tak dalej, więc jeżeli podam jako template string, też będzie działać, ale ja preferuję
taki string za pomocą cudzysłowów i z kolei ta metoda, ona od razu
już mi zwraca true lub false, a nie żaden indeks, dlatego jeżeli zwróci true lub false,
to zwracam to dalej. No i zobaczymy efekt jest dokładnie taki sam. Odwrotną
metodą jest metoda, która nazywa się ends with, czyli czy coś
się kończy za pomocą właśnie jakiegoś stringu. Dlatego
tutaj wkleję sobie coś takiego jak file path i na przykład w Node.js, często
korzystamy ze ścieżek i jeżeli chcemy sprawdzić czy jakaś ścieżka
do pliku ma pewne rozszerzenie, to możemy skorzystać na przykład z wyrażeń
regularnych. Pokażę ci jak można byłoby to zrobić. Nazwałbym
funkcję hasExt, czyli czy zawiera takie rozszerzenie. Tutaj byśmy
podawali ścieżkę, a tutaj rozszerzenie. No i musiałbym tutaj skorzystać z wyrażenia
regularnego. Generalnie gdybym mógł otworzyć zawczasu, gdybym
znał to rozszerzenie, to mógłbym napisać coś takiego, jeżeli jesteś zaznajomiony z wyrażeniami regularnymi.
W ten sposób mam wyrażenie regularne, które dopasowuje, jeżeli
na końcu danego string'u znajduje się kropka html. No i mógłbym
za pomocą takiego wyrażenia zrobić test path i wszystko byłoby
okej. Natomiast jeżeli chciałbym, żeby ktoś tutaj mógł podawać dynamicznie extension,
czyli na przykład has extension, podamy ten file path, który
mamy u góry i rozszerzenie HTML, to muszę skorzystać z konstruktora,
który nazywa się regExt, więc ja sobie teraz tutaj
wpiszę. Zrobię to tak, żeby było to wyrażenie i tutaj nowy RegExt i
tutaj się zawsze podaje string. Musiałbym zrobić coś takiego, jak zrobiłem przed
momentem. Do tego bym musiał dodać ext, czyli dynamicznie tę zmienną
i na końcu jeszcze musiałbym dodać dolar. Teraz, jeśli bym
zrobił test path, no to powinno to zadziałać, chociaż tutaj widzę, że mamy
jakiś błąd. Właśnie przez tego plusa. Mógłbym to również zinterpolować za pomocą template string'u.
No niemniej jednak, tutaj byśmy sobie to zwrócili. No i zobaczmy czy file
path zawiera extension html. Zgadza się, a gdybym zapytał czy ma rozszerzenie
png, to miałbym tutaj wartość false, czyli w ten sposób by to musiało wyglądać w
przypadku ES5. Natomiast za pomocą nowej
metody srting'u również możemy sobie to uprościć. Sprawdzę po prostu czy path ends with i
tutaj sobie napiszemy kropka plus extension
albo skorzystamy z template string'u, czyli napiszemy sobie po prostu kropka ext i
tyle wystarczy. Zobacz, o ile to jest prostsze,
więc nawet bym pewnie nie tworzył takiej funkcji has extension, tylko od razu bym mógł skorzystać
z takiego zapisu. Również zwróci mi true, bo ta metoda sprawdza
czy string, który podamy znajduje się na końcu w string'u, na którym wywołaliśmy
tą metodę. Teraz pokażę ci kolejną metodę, która nazywa się includes, więc
też utworzyłbym sobie funkcję, którą bym nazwał includes i chciałbym sprawdzić czy jeden string
zawiera inny string, więc napisałbym tekst i może sam string, więc chcę sprawdzić
czy w tekście znajduje się substring. Jak to sprawdzić? Otóż mógłbym
to zrobić w ES5, też operatorem, czy w zasadzie metodą indexOf
napisałbym text index of substring i
jeżeli nie zostanie zwrócony minus jeden, czyli nie jest równy
minus jeden, to znaczy, że w string'u text znajduje się taki podciąg,
jak tutaj podałem. Może on być od indeksu zero, tak jak mieliśmy w przypadku tutaj.
Sprawdzaliśmy czy jest to zero. Może być w innym miejscu, ale jeżeli nie zostanie znaleziony
to jest minus jeden, więc w tym przypadku zróbmy sobie console.log includes
i napiszmy Ala ma
kota i sprawdźmy czy w środku znajduje się ma. Zobaczmy. Zostało
zwrócone true, ale znowu, aby sobie życie ułatwić możemy skorzystać z
nowej metody, text includes substring i w
ten sposób zostanie zwrócone true lub false, a nie żaden index
tak jak w przypadku indexOf. No i efekt jest znowu dokładnie taki sam. No
i na koniec jeszcze jedna ciekawa metoda, której nie będę już teraz odtwarzał, ale pokażę ci, że
jest. Jest to metoda repeat. Mogę się odwołać do dowolnego string'u, na
przykład taki równa się i metodą repeat powtórzyć go tyle razy ile mnie interesuje,
na przykład chciałbym 10 razy powtórzyć taki ciąg i to mi oczywiście zwróci
nowy string, który przekażemy do console.log i zauważ taki będzie efekt, więc
jeżeli wyświetlamy jakieś dane to można sobie zamiast wpisywać 10 razy czy
więcej razy taki znak równa się. Można go po prostu powtórzyć, ale to może być przydatne
również w przypadku innych operacji. Jak zatem widzisz stringi
w języku JavaScript w EcmaScript 6 doczekały się naprawdę ciekawych zmian. Jest
to template string oraz funkcje tag'ujące i dodatkowo kilka ciekawych metod,
które naprawdę ułatwiają życie, chociaż jak widzisz można było w EcmaScript 5
również takie same czynności wykonać, tylko musieliśmy trochę więcej
kodu napisać.