W pierwszej części wpisu o ES6 opowiedziałem o funkcjach strzałkowych, blokowym zakresie zmiennych oraz klasach. Wpis ten można znaleźć pod adresem – Co wprowadziło ES6 do JavaScript cz. 1. Zmiany te sprawiły, iż pisanie kodu JS stało się o wiele przyjemniejsze. W tym wpisie opowiem o kolejnych nowościach jakie zostały wprowadzone w 2015 roku.
Object.assign
Metoda assign pozwala na łączenie, klonowanie i nadpisywanie obiektów. Pierwszym parametrem jest obiekt nadpisywany, pozostałe to obiekty źródłowe, których pola zostaną złączone z pierwszym obiektem.
Object.assign(object1, object2, object3…);object1 – obiekt nadpisywany
object2, object3 – obiekty źródłowe
Łączenie obiektów
W przypadku łączenia obiektów jako pierwszy parametr podajemy pusty obiekt. W kolejnych parametrach przekazujemy obiekty, które mają zostać połączone.
const object1 = { firstName: 'Adam' }; const object2 = { lastName: 'Kowalski' }; const object3 = { mail: 'adam@domena.com' }; const result = Object.assign({}, object1, object2, object3); console.log(result);Klonowanie obiektów
Podczas klonowania obiektów postępujemy w podobny sposób, jak w sytuacji łączenia. Różnica polega na tym, iż teraz przekazujemy jeden obiekt źródłowy – obiekt, który chcemy sklonować.
const object = { firstName: 'Adam', lastName: 'Kowalski', mail: 'adam@domena.com' }; const result = Object.assign({}, object); console.log(result);Nadpisywanie obiektów
Ostatnią z możliwości jakie daje metoda assign to nadpisywanie obiektów. Odbywa się w takiej samej kolejności, w jakiej zostały przekazane parametry. Oznacza to, iż w przypadku powtarzających się pół, finalnie otrzymamy w danym polu wartość, która została przekazana najpóźniej.
const object1 = { firstName: 'Adam', lastName: 'Kowalski', mail: 'adam@domena.com' }; const object2 = { lastName: 'Nowakowski' }; const result = Object.assign({}, object1, object2); console.log(result);String – nowe możliwości
ES2015 wprowadza także zmiany ułatwiające pracę z ciągami znaków. Jedną z nowości jest możliwość łatwiejszego dołączania zmiennych dzięki interpolacji.
Interpolacja stringów
Przed wprowadzeniem ES6 musieliśmy łączyć stringi dzięki znaku konkatenacji + i pamiętać o wszystkich cudzysłowach, spacjach itp. Poniżej przedstawiam przykład jak wyglądało łączenie tekstu ze zmiennymi przed zmianami z 2015 roku.
const age = 25; const result = 'Adam Kowalski, lat ' + age; console.log(result);Teraz możemy zrobić to dzięki interpolacji i symbolu backtick `.
const age = 25; const result = `Adam Kowalski, lat ${age}`; console.log(result);Korzystając z tego zapisu możemy dodać do tekstu wiele zmiennych. Jedyne co musimy zrobić to otoczyć zmienną nawiasami klamrowymi i postawić przed nimi znak $, to tak zwana interpolacja. Możemy się z nią również spotkać np. w języku Python.
`tekst ${zmienna}`Wieloliniowe łańcuchy znaków
Poza interpolacją backticki umożliwiają również tworzenie wieloliniowych stringów. Przed ES2015, aby to osiągnąć należało użyć znaku końca linii /n.
const age = 25; const result = 'Adam Kowalski.\nLat ' + age; console.log(result);Dzięki znakowi „`” wystarczy po prostu użycie enteru, a efekt będzie taki sam. Dzięki temu uzyskujemy prostszy zapis oraz czytelniejszy kod.
const age = 25; const result = `Adam Kowalski. Lat ${age}`; console.log(result);Nowe metody
Zostały także dodane nowe metody, które pozwalają na dokonywanie różnych operacji na stringach. Poniżej przedstawiam listę z nowo dodanymi metodami.
StartsWith – metoda ta odpowiada za sprawdzenie czy string rozpoczyna się od określonego stringa. Pierwszym parametrem przyjmowanym przez metodę jest string źródłowy. Opcjonalnie drugim parametrem możemy określić, od którego znaku ma zostać rozpoczęte sprawdzanie. Rezultatem działania metody jest wartość boolean: true lub false.
const text = 'Bugajsky.pl'; const result = text.startsWith('B'); const result2 = text.startsWith('ga', 2); console.log(result, result2);EndsWith – metoda ta odpowiada za sprawdzenie czy string kończy się znakami określonego stringa. Pierwszym parametrem przyjmowanym przez metodę jest string źródłowy. Opcjonalnie drugim parametrem możemy określić, od którego znaku ma zostać rozpoczęte sprawdzanie. Warto zaznaczyć, iż podana w drugim parametrze wartość liczona jest od lewej strony. W przypadku kiedy chcielibyśmy zacząć sprawdzanie od przedostatniego znaku, należy wpisać liczba_znaków – 1. Rezultatem działania metody jest wartość boolean: true lub false.
const text = 'Bugajsky.pl'; const result = text.endsWith('l'); const result2 = text.endsWith('.pl', 11); console.log(result, result2);Includes – metoda ta odpowiada za sprawdzanie czy string zawiera w sobie inny string. Jako pierwszy parametr przyjmuje poszukiwany string. Drugi parametr jest opcjonalny i pozwala określić od którego miejsca ma zostać rozpoczęte sprawdzanie. Rezultatem działania metody jest wartość boolean: true lub false.
const text = 'Bugajsky.pl'; const result = text.includes('Bugajsky'); console.log(result);Repeat – metoda ta odpowiada za utworzenie nowego stringa na podstawie stringa bazowego, poprzez jego wielokrotne powielenie. Metoda ta przyjmuje parametr, który określa ile razy ma zostać powtórzony string bazowy.
const text = 'Bugajsky.pl'; const result = text.repeat(3); console.log(result);Raw – metoda ta pozwala na wpisywanie \ do konsoli bez wprowadzania nowej lini.
const text = String.raw `C:\Games`; console.log(text);fromCodePoint – metoda ta zwraca znak na podstawie przekazanego w parametrze kodu ASCII.
const result = String.fromCodePoint(321); console.log(result);Array – nowe metody
Standard wprowadzony w 2015 roku dodaje także nowe metody, które możemy wykorzystać podczas pracy z tablicami. Poniżej przedstawiam metody jakie zostały dodane.
find – metoda ta pozwala na przeszukiwanie tablicy. W parametrze przekazujemy funkcję sprawdzającą. jeżeli warunek jest spełniony, wtedy automatycznie zwracany jest element tablicy, a metoda kończy swoje działanie. W przeciwieństwie do filter(), metoda ta zawsze zwraca pierwszy spełniający warunek obiekt.
const array = [1, 3, 4, 5, 2, 2, 3, 4, 5]; const result = array.find(value => { return value === 2; }); console.log(result);findIndex – metoda ta działa w podobny sposób jak find. Różnica polega na tym, iż zwraca index, a nie znalezioną wartość.
const array = [1, 3, 4, 5, 2, 2, 3, 4, 5]; const result = array.findIndex(value => { return value === 2; }); console.log(result);entries – metoda ta zwraca iterator tablicy. Można użyć jej do poruszania pomiędzy kluczami i wartościami. Zwraca tablicę tablic, gdzie każda tablica potomna jest tablicą [index, wartość].
const array = [1, 2, 3, 4, 5]; const entries = array.entries(); console.log(entries.next().value); console.log(entries.next().value); console.log(entries.next().value);from – metoda ta pozwala na utworzenie nowej tablicy na podstawie obiektu przypominającego tablicę, np. stringi, obiekt Set(), obiekt Map().
const text = 'Bugajsky.pl'; for (let i of Array.from(text)) { console.log(i); }keys – metoda ta zwraca indeksy tablicy. W tym miejscu warto przypomnieć, iż indeksy tablic w JS mogą być stringami.
const array = [1, 3, 4, 5, 2, 2, 3, 4, 5]; console.log(Array.from(array.keys()));Podsumowanie
W tym wpisie przedstawiłem kolejne nowości jakie zostały wprowadzone w ES2015. Standard ten zdecydowanie uprościł pracę z kodem każdemu developerowi. Operacje na obiektach stały się prostsze, podobnie jak wykonywanie różnych działań na stringach i tablicach.
To jeszcze nie wszystkie nowości, jakie zostały wdrożone wraz z pojawieniem się nowego standardu. Niebawem na blogu pojawi się kolejna dawka informacji o ES6. Zachęcam do obserwowania bloga, aby być na bieżąco z publikacjami nowych treści.
