JavaScript: Operator spread na obiektach

0:00Teraz pokażę Ci, jak możemy korzystać z operatora spread na obiektach.

0:04Jest to operator, z którego mogliśmy już korzystać w przypadku tablic i on działa

0:07również w pezypadku obiektów i będę chciał Ci pokazać do czego służy.

0:11W tym celu utworzymy sobie dwa obiekty. Taki standardowy jak już wcześniej

0:15widzieliśmy, gdzie będziemy mieli po prostu dane

0:19osobowe jakiejś osoby, coś takiego i teraz będę chciał utworzyć drugi obiekt.

0:25Tutaj mamy czysto hipotetyczną sytuację,

0:27niemniej jednak ona nie ma żadnego znaczenia

0:29żeby pokazać Ci jak działa ten operator.

0:31Więc teraz utworzę sobie taką stałą jak programmer, czyli

0:35programista i napiszemy, że job jest to programista i np.

0:41salary czyli wynagrodzenie to słynne 15 tysięcy, czemu nie.

0:46I teraz będziemy chcieli sobie utworzyć kolejny obiekt o nazwie employee czyli

0:49pracownik, gdzie chciałbym po prostu połączyć te dwa obiekty.

0:52Czyli chciałbym mieć obiekt gdzie będzie firstName, lastName, age, job i salary.

0:56A więc chcę połączyć dwa obiekty.

0:58I teraz tak w języku JavaScript można to

1:00zrobić za pomocą takiego obiektu objekt globalnego, który ma metodę assign.

1:06Czyli mogłoby to wyglądać tak, że tworzymy sobie stałą employee

1:11w ten sposób i korzystamy z takiego globalnego

1:14konstruktora, takiego obiektu Object i on ma metodę assign

1:18i tutaj możemy podać dowolną liczbę parametrów.

1:20Możemy powiedzieć, że do tego pustego

1:22obiektu chcemy dodać wszystkie właściwości obiektu person, a także wszystkie

1:27właściwości obiektu programmer w ten sposób,

1:32ok, i to wygląda w ten sposób, że to co

1:34jest na programmer jest jakby dodawane do person i do tego obiektu.

1:37Finalnie to się znajduje na tym obiekcie. Jeżeli sobie wyświetlimy ten employee,

1:43zobaczmy, to będziemy oczywiście mieli

1:45obiekt, gdzie jest to wszystko co chciałem, czyli wszystko działa poprawnie.

1:49Ale teraz chcę Ci pokazać jak to samo możemy uzyskać z użyciem operatora spread

1:53na obiektach. I on działa również już od jakiegoś czasu w nowoczesnych

1:58przeglądarkach internetowych, więc możesz śmiało z niego korzystać.

2:01A zatem to wykomentuje i zrobimy to w ten sposób.

2:05Podobnie jak w przypadku tablic, po prostu tworzymy sobie nowy obiekt.

2:09Tu możemy dodawać jakiekolwiek właściwości

2:11chcemy, ale ja chcę, żeby były tutaj tylko te, które są w tych dwóch obiektach.

2:15A więc możemy zrobić tak, że robimy trzy

2:17kropki, to jest ten operator spread i piszemy person,

2:20następnie postawię przecinek i zrobimy trzy kropki i programmer.

2:26W ten sposób znowu tutaj coś źle napisałem,

2:30a to oznacza, że tutaj mieliśmy wcześniej już błąd

2:32podstawmy sobie to wszędzie i to oznacza, że tworzymy nowy obiekt i do

2:36niego rozstrzeliwujemy cały obiekt person, a więc tak naprawdę kopiujemy wszystkie jego

2:41pola, wstawiamy tutaj i następnie to samo robimy z tym obiektem programmer.

2:45No i zauważ, że efekt jest dokładnie taki sam.

2:47Natomiast moglibyśmy tutaj, gdybyśmy

2:49chcieli dodawać sobie kolejne właściwości, więc moglibyśmy tutaj napisać np. hobbies,

2:54jakie ma ktoś hobby, podać jakąś tablicę itd.

2:57Więc zapamiętaj z tej lekcji, że obiekt można jakby rozstrzelić takim operatorem spread

3:02i działa to w przypadku tworzenia nowego obiektu, a więc wewnątrz nowego obiektu

3:06możemy coś takiego zapisać i dzięki temu wszystko zostanie skopiowane.

3:10Natomiast trochę starszym sposobem jest również Object.assign,

3:13wtedy podajemy pusty obiekt i inne obiekty, które chcemy do niego skopiować.

3:17Tu oczywiście nie musiał by być pusty

3:18obiekt, on mógłby zawierać np.

3:20tę tablicę hobbies, o której wspomniałem i

3:23później dodatkowe obiekty moglibyśmy do niego skopiować.