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.
wierz mi lub nie ale w ecmascript 2016 otrzymaliśmy tylko
ten nowy operator potęgowania który widziałeś w lekcji poprzedniej a także jedną
metodę dla tablic która nazywa się includes tylko te dwie rzeczy i jakieś
drobne poprawki innych błędów więc teraz pokażę ci jak działa metoda
includes ale widziałeś ją już na stringach i dlaczego została dodana do tablic bo
być może zauważyłeś że wiele z metod które są dostępne na tablicach są też dostępne
na stringach takie metody jak na przykład slice jest dostępna i na
tablicach i na stringu dlatego metoda includes która w 2015
roku została dodana do stringów rok później zawitała również do tablic
i co ona potrafi dla nas zrobić otóż określa czy jakiś element
znajduje się w tablicy więc mogę napisać numbers includes i powiedzmy
podamy sobie tutaj 5 sprawdźmy czy piątka się znajduje ona
nam zwraca true lub false podobnie jak było w przypadku stringu w ecmascript
5 musielibyśmy zapisać sobie numbers index of
5 i czy to nie jest równe minus 1 jeżeli indeks
jest minus 1 to znaczy że taki element się nie znajduje w tablicy zobaczmy efekt
jest ten sam warto jednak pamiętać że nie działa to dokładnie w
taki sam sposób bo tutaj porównanie wygląda nieco inaczej gdybyśmy
tutaj sobie dodali nan do tej tablicy i teraz
byśmy napisali numbers includes
nan zobaczymy jaki będzie efekt zobaczymy true czyli
taka wartość tam się znajduje a gdybym skorzystał z tego starego zapisu
czyli numbers index of
none czy on nie jest równy minus 1 zobaczmy mam
wartość false z tego powodu że w starym zapisie
czyli w zasadzie przy użyciu metody index of jest używany operator
potrójnego porównania a w javascripcie jeżeli nan porównamy do nan to generuje
nam to taki problem że te wartości nie są takie same więc w przypadku
tablicy i metody includes nan będzie równy nan i tutaj być
może mógłbyś pomyśleć że pewnie jest to porównywane za pomocą object
is które już ci pokazywałem gdzie na przykład nan było
równe nan i na przykład plus 0 było różne od minus
0 sprawdźmy to sobie jeszcze na szybko w przeglądarce widzimy
false bo nie są takie same wartości okazuje się i nie wiem jaki jest tego powód
że nie ma tutaj porównania przez object is dlatego że gdybyśmy
sobie sprawdzili i dodajemy sobie tutaj wartość minus
0 gdybyśmy sobie sprawdzili czy numbers
includes plus 0 to
otrzymamy true czyli problem jest tutaj taki że plus 0 i minus 0
dla metody include to są te same wartości czyli jest tutaj pewnego rodzaju niekonsekwencja
bo nan zachowuje się inaczej niż w przypadku index of ale na przykład
plus 0 i minus 0 już zachowuje się tak samo
czyli gdybym napisał tutaj też index of plus
0 nie jest równy minus 1 po
to żeby mieć true lub false efekt będzie ten sam zatem zapamiętaj że mamy tutaj
dodaną metodę includes i ona działa praktycznie zawsze tak jakbyśmy
porównywali te dwie wartości operatorem potrójnego porównania oprócz
tego że w przypadku nan te wartości będą równe a w przypadku właśnie tego
potrójnego porównania nan do nan one nie są równe czyli nie jest tutaj z
jakiegoś powodu stosowane porównanie object is