{"id":561,"date":"2021-05-09T19:20:47","date_gmt":"2021-05-09T17:20:47","guid":{"rendered":"http:\/\/dziewczynanafroncie.pl\/?p=561"},"modified":"2021-05-09T20:35:10","modified_gmt":"2021-05-09T18:35:10","slug":"typy-zlozone-na-przykladzie-tablic-i-obiektow","status":"publish","type":"post","link":"https:\/\/dziewczynanafroncie.pl\/typy-zlozone-na-przykladzie-tablic-i-obiektow\/","title":{"rendered":"Typy z\u0142o\u017cone na przyk\u0142adzie: tablic i obiekt\u00f3w"},"content":{"rendered":"\n

W JavaScript istniej\u0105 dwie podstawowe struktury danych. Mowa tutaj o tablicach i Obiektach. W por\u00f3wnaniu do typ\u00f3w prostych reprezentuj\u0105 zbi\u00f3r warto\u015bci. Zapewne opanowa\u0142e\u015b ju\u017c podstawowe typy danych w JavaScript, nadszed\u0142 wi\u0119c czas na przybli\u017cenie typ\u00f3w z\u0142o\u017conych jakim s\u0105 obiekty i tablice.<\/p>\n\n\n\n\n\n\n\n

Obiekty<\/h3>\n\n\n\n

W JavaScript obiekt jest bytem podobnym do tablicy, r\u00f3\u017cnica polega na w\u0142asnym tworzeniu kluczy. Przez co nie jeste\u015bmy ograniczeni w nazewnictwie wy\u0142\u0105cznie do kluczy numerycznych.
Wyobra\u017amy sobie\u00a0samochody. Ka\u017cda z nich jest jako\u015b nazywany. Przyk\u0142adowo : Opel \u2013 Astra. Mamy tutaj mark\u0119 wraz z\u00a0 towarzysz\u0105cym mu modelem. Podobnie reprezentuje si\u0119 struktura obiektu. W obiekcie znajduj\u0105 si\u0119 pary \u2013 "w\u0142asno\u015b\u0107": warto\u015b\u0107<\/code> . Nale\u017cy pami\u0119ta\u0107 \u017ce ka\u017cda w\u0142asno\u015b\u0107 <\/strong>musi posiada\u0107 unikaln\u0105 nazw\u0119. Natomiast warto\u015b\u0107 jest dowolna (liczby, warto\u015bci logiczne, ci\u0105gi znak\u00f3w, tablice, obiekty lub funkcje).

Litera\u0142y obiektowe nie posiadaj\u0105ce zagnie\u017cd\u017cenia maj\u0105 bardzo prost\u0105 konstrukcj\u0119. Mo\u017cemy je stworzy\u0107 za pomoc\u0105<\/p>\n\n\n\n

1. Obiektu Litera\u0142u<\/h5>\n\n\n\n
 let obj = {} \/\/ konstruuje pusty obiekt\n let \u00a0person =<\/strong> {\n \u00a0\u00a0\u00a0 name: \"Jan Kowalski\",\n \u00a0\u00a0\u00a0 email: \"jankowalski@email.com\",\n }\n let \u00a0objXY = {x: 0, y: 0} <\/code><\/pre>\n\n\n\n
2. Konstruktora<\/h5>\n\n\n\n
 class Person  {\n     constructor(name, surname) {\n     this.name = name;\n     this.surname =   surname ;\n    }\n }\n const daneOsobowe = new Person(Jan,Kowalski);\n console.log(daneOsobowe.name); \/\/ output  Jan;\n console.log(daneOsobowe.surname); \/\/ output Kowalski<\/code><\/pre>\n\n\n\n
2. Metoda Object.create()<\/h5>\n\n\n\n
const car = {\n   isHibryd: false,\n   printIntroduction: function() {\n \u00a0\u00a0\u00a0 console.log(`Marka ${this.model}. To Hybryda? ${this.isHibryd}`);\n  }\n };\n let myCar= Object.create(car);\n myCar.model= 'Matthew'; \/\/ \"model\" jest w\u0142asno\u015bci\u0105 instancji obiektu person o nazwie me\n myCar.isHibryd= true; \/\/ w\u0142a\u015bciwo\u015bci dziedziczone mog\u0105 by\u0107 nadpisywane\n myCar.printIntroduction(); \n\/\/  wywo\u0142anie funkcji kt\u00f3ra znajduje si\u0119 wewn\u0105trz obiektu  \n\/\/ \"Model Corsa. To Hybryda? true\"<\/code><\/pre>\n\n\n\n
Mo\u017cna potocznie uzna\u0107, i\u017c obiekty s\u0105 w w istocie tablicami asocjacyjnymi. Obiekt prezentuje si\u0119 podobnie jak tablica, dlatego \u017ce jest zbiorem nazwanych warto\u015bci . W\u0142a\u015bnie dlatego mo\u017cemy si\u0119 odnie\u015b\u0107 do okre\u015blonego elementu poprzez nawias kwadratowy.<\/p>\n\n\n\n
Tablice<\/h3>\n\n\n\n
Tablica jest tak\u017ce zbiorem warto\u015bci. S\u0142u\u017c\u0105 do przechowywania wielu element\u00f3w kt\u00f3re s\u0105 w dodatku\u00a0 uporz\u0105dkowanym zbiorem, przeciwnie do wcze\u015bniej wspomnianego obiektu kt\u00f3ry jest zbiorem \u00a0nazwanych warto\u015bci.<\/p>\n\n\n\n
Do czego s\u0142u\u017cy tablica ? Mianowicie wyobra\u017amy sobie \u017ce mamy kilka marek samochod\u00f3w kt\u00f3re jak wiadomo posiadaj\u0105 r\u00f3\u017cne modele. Najlepszym sposobem na uporz\u0105dkowanie tego typu danych b\u0119dzie s\u0142u\u017cy\u0107 tablica.<\/p>\n\n\n\n
 const opel = [\"astra\", \"vectra\", \"insignia\", \"corsa\" ];\n const toyota = [\"avensis\", \"camry\", \"celica\"];\n const ford = [\"fiesta\", \"focus\", \"mondeo\"];\n const samochody = [[opel], [toyota],[ford], ]; <\/code><\/pre>\n\n\n\n
Ka\u017cdy element posiada\u00a0 pozycje czyli\u00a0 numerem w tablicy – pozycja nazywana jest indeksem. Dzi\u0119ki\u00a0 nim tablice doskonale nadaj\u0105 si\u0119 do iteracji\u00a0 przy u\u017cyciu p\u0119tli for.

<\/p>\n\n\n\n
 const opel = [\"astra\", \"vectra\", \"insignia\", \"corsa\" ];\n\/\/ Sprawd\u017amy indexy poszczeg\u00f3lnych element\u00f3w w tablicy\n console.log(opel.indexOf(\"astra\", \"vectra\", \"insignia\", \"corsa\"));\n\n\/\/ Wykonajmy p\u0119tle aby sprawdzi\u0107 ka\u017cdy element tablicy\nfor\u00a0(let i =\u00a00; i < opel.length; i++) {\n\u00a0 console.log(opel[i]);\n}<\/code><\/pre>\n\n\n\n
\n
\n
\n<- Wynik z metody indexOf ->\n0\n1\n2\n3\n<- Wynik z p\u0119tli for ->\nastra\nvectra\ninsignia\ncorsa\n<\/pre>\n<\/p>\n<\/div>\n\n\n\n
 Pami\u0119tajmy o tym \u017ce tablice s\u0105 liczone od zera,\u00a0 dlatego pierwszy element ma indeks 0 <\/div><\/p>\n\n\n\n
Nie mo\u017cemy uzyska\u0107 dost\u0119pu do element\u00f3w tablicy przy u\u017cyciu notacji z kropk\u0105 –\u00a0 jak podczas uzyskiwania dost\u0119pu do element\u00f3w obiektu. Dost\u0119p do poszczeg\u00f3lnych element\u00f3w uzyskujemy przez podanie w tablicy numeru indeksu.<\/p>\n\n\n\n
console.log (opel [0]); \/\/\u00a0 - wypisuje warto\u015b\u0107 pierwszego elementu <\/code><\/pre>\n\n\n\n
\n
\nastra\n<\/p>\n<\/div>\n\n\n\n
Tablice tak jak obiekty mo\u017cemy tworzy\u0107 na r\u00f3\u017cne sposoby.<\/p>\n\n\n\n
1. Obiekt Litera\u0142u<\/h5>\n\n\n\n
 const owoce = ['kiwi', 'mango'];<\/code><\/pre>\n\n\n\n
2. Konstruktora<\/h5>\n\n\n\n
 const owoce = new Array(\"kiwi\",\"mango\");<\/code><\/pre>\n\n\n\n
3. Metoda Array.of<\/h5>\n\n\n\n
 const owoce = Array.of(\"kiwi\",\"mango\");<\/code><\/pre>\n\n\n\n
4. Metoda Array.from<\/h5>\n\n\n\n
 const owoce = Array.from(\"kiwi\",\"mango\");<\/code><\/pre>\n\n\n\n
Podsumowanie<\/h3>\n\n\n\n
W tym artykule om\u00f3wili\u015bmy, kr\u00f3tko czym s\u0105 i jak tworzy\u0107 z\u0142o\u017cone typy danych jakimi s\u0105 obiekty i tablice<\/strong>. W p\u00f3\u017aniejszym czasie om\u00f3wimy poszczeg\u00f3lne metody z u\u017cyciem tych dw\u00f3ch typ\u00f3w danych.<\/p>\n","protected":false},"excerpt":{"rendered":"
W JavaScript istniej\u0105 dwie podstawowe struktury danych. Mowa tutaj o tablicach i Obiektach. W por\u00f3wnaniu do typ\u00f3w prostych reprezentuj\u0105 zbi\u00f3r warto\u015bci. Zapewne opanowa\u0142e\u015b ju\u017c podstawowe typy danych w JavaScript, nadszed\u0142 wi\u0119c czas na przybli\u017cenie typ\u00f3w z\u0142o\u017conych jakim s\u0105 obiekty i tablice.<\/p>\n","protected":false},"author":1,"featured_media":578,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[33,32,31],"class_list":["post-561","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-js","tag-obiekty","tag-tablice","tag-typy-danych"],"_links":{"self":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/comments?post=561"}],"version-history":[{"count":2,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/561\/revisions"}],"predecessor-version":[{"id":577,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/561\/revisions\/577"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media\/578"}],"wp:attachment":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media?parent=561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/categories?post=561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/tags?post=561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}