W tym artykule przygl\u0105dniemy si\u0119 funkcjom i metodom, jakie stosuje si\u0119 w tablicach. Przede wszystkim – tablice to jedna z najcz\u0119\u015bciej u\u017cywanych struktur danych w JavaScript, pomagaj\u0105ca w przechowywaniu wielu warto\u015bci w jednym miejscu.<\/p>\n
Tablice pozwalaj\u0105 na grupowanie danych o r\u00f3\u017cnym typie, takich jak liczby, ci\u0105gi znak\u00f3w czy obiekty, co czyni je niezwykle wszechstronnymi. Przyk\u0142adowo, tablica mo\u017ce przechowywa\u0107 list\u0119 ocen ucznia, nazwiska klient\u00f3w w sklepie internetowym, czy te\u017c zbiory koordynat\u00f3w punkt\u00f3w na wykresie. Dzi\u0119ki temu, mo\u017cna \u0142atwo zarz\u0105dza\u0107 du\u017c\u0105 ilo\u015bci\u0105 danych, a tak\u017ce wykonywa\u0107 na nich r\u00f3\u017cnorodne operacje za pomoc\u0105 metod, kt\u00f3re oferuje JavaScript. Aby efektywnie pracowa\u0107 z tablicami, warto pozna\u0107 r\u00f3\u017cne metody, kt\u00f3re oferuje JavaScript.<\/p>\n
Sprawd\u017amy wi\u0119c jedne z najwa\u017cniejszych funkcji i metod, kt\u00f3re pozwalaj\u0105 na manipulacj\u0119 tablicami oraz ich wykorzystanie w projektach.<\/p>\n
push(element)<\/strong><\/code> \u2013 Dodaje element na ko\u0144cu tablicy. Metoda ta zmienia oryginaln\u0105 tablic\u0119 i zwraca now\u0105 d\u0142ugo\u015b\u0107.\n\n- Przyk\u0142ad:
tab.push(4);<\/code> doda 4<\/code> na ko\u0144cu tablicy.<\/li>\n<\/ul>\n<\/li>\npop()<\/strong><\/code> \u2013 Usuwa ostatni element z tablicy i zwraca go. Tak\u017ce zmienia oryginaln\u0105 tablic\u0119.\n\n- Przyk\u0142ad:
tab.pop();<\/code> usunie ostatni element z tablicy.<\/li>\n<\/ul>\n<\/li>\nunshift(element)<\/strong><\/code> \u2013 Dodaje element na pocz\u0105tku tablicy, przesuwaj\u0105c pozosta\u0142e elementy.\n\n- Przyk\u0142ad:
tab.unshift(1);<\/code> doda 1<\/code> na pocz\u0105tku tablicy.<\/li>\n<\/ul>\n<\/li>\nshift()<\/strong><\/code> \u2013 Usuwa pierwszy element z tablicy i zwraca go.\n\n- Przyk\u0142ad:
tab.shift();<\/code> usunie pierwszy element tablicy.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n2. \u0141\u0105czenie tablic<\/h3>\n\nconcat(anotherArray)<\/strong><\/code> \u2013 \u0141\u0105czy dwie lub wi\u0119cej tablic i zwraca now\u0105 tablic\u0119. Nie zmienia oryginalnych tablic.\n\n- Przyk\u0142ad:
tab1.concat(tab2);<\/code> po\u0142\u0105czy tab1<\/code> i tab2<\/code> w jedn\u0105 tablic\u0119.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n3. Szukanie element\u00f3w<\/h3>\n\nindexOf(element)<\/strong><\/code> \u2013 Zwraca pierwszy indeks pod kt\u00f3rym wyst\u0119puje dany element. Je\u015bli element nie wyst\u0119puje, zwraca -1<\/code>.\n\n- Przyk\u0142ad:
tab.indexOf(3);<\/code> zwr\u00f3ci indeks pierwszego wyst\u0105pienia liczby 3<\/code>.<\/li>\n<\/ul>\n<\/li>\nincludes(element)<\/strong><\/code> \u2013 Sprawdza, czy tablica zawiera dany element. Zwraca true<\/code> lub false<\/code>.\n\n- Przyk\u0142ad:
tab.includes(2);<\/code> zwraca true<\/code>, je\u015bli 2<\/code> znajduje si\u0119 w tablicy.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n4. Modyfikowanie tablicy<\/h3>\n\nreverse()<\/strong><\/code> \u2013 Odwraca kolejno\u015b\u0107 element\u00f3w w tablicy. Zmienia oryginaln\u0105 tablic\u0119.\n\n- Przyk\u0142ad:
tab.reverse();<\/code> odwraca kolejno\u015b\u0107 element\u00f3w tablicy.<\/li>\n<\/ul>\n<\/li>\nsort((a, b) => a - b)<\/strong><\/code> \u2013 Sortuje elementy tablicy. Domy\u015blnie sortuje jako ci\u0105gi znak\u00f3w, ale mo\u017cna przekaza\u0107 funkcj\u0119 por\u00f3wnuj\u0105c\u0105.\n\n- Przyk\u0142ad:
tab.sort((a, b) => a - b);<\/code> sortuje liczby rosn\u0105co.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n5. Uzyskiwanie d\u0142ugo\u015bci i fragment\u00f3w tablicy<\/h3>\n\nlength<\/strong><\/code> \u2013 Zwraca liczb\u0119 element\u00f3w w tablicy.\n\n- Przyk\u0142ad:
tab.length;<\/code> zwraca d\u0142ugo\u015b\u0107 tablicy.<\/li>\n<\/ul>\n<\/li>\nslice(start, end)<\/strong><\/code> \u2013 Zwraca now\u0105 tablic\u0119 z elementami od indeksu start<\/code> do end<\/code> (nie w\u0142\u0105cznie). Nie zmienia oryginalnej tablicy.\n\n- Przyk\u0142ad:
tab.slice(1, 3);<\/code> zwraca fragment tablicy od indeksu 1<\/code> do 3<\/code> (bez 3<\/code>).<\/li>\n<\/ul>\n<\/li>\nsplice(start, deleteCount, item1, item2, ...)<\/strong><\/code> \u2013 Usuwa lub dodaje elementy do tablicy, zmieniaj\u0105c j\u0105.\n\n- Przyk\u0142ad:
tab.splice(1, 0, 2, 3);<\/code> wstawi 2<\/code> i 3<\/code> na indeksie 1<\/code> bez usuwania element\u00f3w.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n6. Iteracja po elementach tablicy<\/h3>\n\nforEach(callback)<\/strong><\/code> \u2013 Iteruje po ka\u017cdym elemencie tablicy, wywo\u0142uj\u0105c funkcj\u0119 callback<\/code> dla ka\u017cdego elementu.\n\n- Przyk\u0142ad:
tab.forEach(el => console.log(el));<\/code> wy\u015bwietli ka\u017cdy element tablicy.<\/li>\n<\/ul>\n<\/li>\nmap(callback)<\/strong><\/code> \u2013 Tworzy now\u0105 tablic\u0119, gdzie ka\u017cdy element jest wynikiem dzia\u0142ania funkcji callback<\/code> na oryginalnym elemencie.\n\n- Przyk\u0142ad:
tab.map(x => x ** 2);<\/code> zwraca now\u0105 tablic\u0119, gdzie ka\u017cdy element jest kwadratem oryginalnego.<\/li>\n<\/ul>\n<\/li>\nfilter(callback)<\/strong><\/code> \u2013 Tworzy now\u0105 tablic\u0119 z elementami spe\u0142niaj\u0105cymi warunek w funkcji callback<\/code>.\n\n- Przyk\u0142ad:
tab.filter(x => x > 2);<\/code> zwr\u00f3ci now\u0105 tablic\u0119 z elementami wi\u0119kszymi ni\u017c 2<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n7. Redukcja i znajdowanie element\u00f3w<\/h3>\n\nreduce((acc, curr) => ..., initialValue)<\/strong><\/code> \u2013 Redukuje tablic\u0119 do jednej warto\u015bci, u\u017cywaj\u0105c funkcji callback<\/code>.\n\n- Przyk\u0142ad:
tab.reduce((sum, val) => sum + val, 0);<\/code> sumuje wszystkie elementy w tablicy.<\/li>\n<\/ul>\n<\/li>\nfind(callback)<\/strong><\/code> \u2013 Zwraca pierwszy element, kt\u00f3ry spe\u0142nia warunek w funkcji callback<\/code>.\n\n- Przyk\u0142ad:
tab.find(el => el > 2);<\/code> zwr\u00f3ci pierwszy element wi\u0119kszy ni\u017c 2<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n8. Inne przydatne metody<\/h3>\n\nflat()<\/strong><\/code> \u2013 Sp\u0142aszcza tablic\u0119 wielowymiarow\u0105 do jednowymiarowej.\n\n- Przyk\u0142ad:
tab.flat();<\/code> sp\u0142aszcza np. [[1, 2], [3, 4]]<\/code> do [1, 2, 3, 4]<\/code>.<\/li>\n<\/ul>\n<\/li>\njoin(separator)<\/strong><\/code> \u2013 \u0141\u0105czy elementy tablicy w ci\u0105g znak\u00f3w, oddzielaj\u0105c je podanym separatorem.\n\n- Przyk\u0142ad:
tab.join(\", \");<\/code> zwraca ci\u0105g element\u00f3w oddzielonych przecinkiem, np. \"1, 2, 3\"<\/code>.<\/li>\n<\/ul>\n<\/li>\nArray(n).fill(value)<\/strong><\/code> \u2013 Tworzy now\u0105 tablic\u0119 o d\u0142ugo\u015bci n<\/code>, wype\u0142nion\u0105 warto\u015bci\u0105 value<\/code>.\n\n- Przyk\u0142ad:
Array(5).fill(\"A\");<\/code> tworzy tablic\u0119 ['A', 'A', 'A', 'A', 'A']<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nPrzyk\u0142adowe zadania z tablicami<\/h2>\n
Zadanie 1. Dodawanie elementu na ko\u0144cu tablicy
\nconst tab = [1, 2, 3];<\/code>
\ntab.push(4);<\/code>
\nconsole.log(tab); \/\/ Wynik: [1, 2, 3, 4]<\/code>
\nWyja\u015bnienie: Metoda push dodaje nowy element (4) na ko\u0144cu tablicy. Wynikiem jest zaktualizowana tablica [1, 2, 3, 4].<\/p>\nZadanie 2. Usuwanie ostatniego elementu z tablicy
\nconst tab = [1, 2, 3, 4];<\/code>
\ntab.pop();<\/code>
\nconsole.log(tab); \/\/ Wynik: [1, 2, 3]<\/code>
\nWyja\u015bnienie: Metoda pop usuwa ostatni element z tablicy (4). Tablica po tej operacji to [1, 2, 3].<\/p>\nZadanie 3. Dodawanie elementu na pocz\u0105tku tablicy
\nconst tab = [2, 3, 4];<\/code>
\ntab.unshift(1);<\/code>
\nconsole.log(tab); \/\/ Wynik: [1, 2, 3, 4]<\/code>
\nWyja\u015bnienie: Metoda unshift dodaje element (1) na pocz\u0105tku tablicy, przesuwaj\u0105c pozosta\u0142e elementy. Wynikiem jest tablica [1, 2, 3, 4].<\/p>\nZadanie 4. Usuwanie pierwszego elementu z tablicy
\nconst tab = [1, 2, 3, 4];<\/code>
\ntab.shift();<\/code>
\nconsole.log(tab); \/\/ Wynik: [2, 3, 4]<\/code>
\nWyja\u015bnienie: Metoda shift usuwa pierwszy element z tablicy (1). Tablica po tej operacji to [2, 3, 4].<\/p>\nZadanie 5. Znajdowanie indeksu elementu
\nconst tab = [1, 2, 3, 4];<\/code>
\nconsole.log(tab.indexOf(3)); \/\/ Wynik: 2<\/code>
\nWyja\u015bnienie: Metoda indexOf znajduje pierwszy indeks, pod kt\u00f3rym wyst\u0119puje element 3 (czyli 2). Je\u015bli elementu nie ma w tablicy, wynik to -1.<\/p>\nZadanie 6. Sprawdzanie, czy tablica zawiera warto\u015b\u0107
\nconst tab = [1, 2, 3];<\/code>
\nconsole.log(tab.includes(2)); \/\/ Wynik: true<\/code>
\nWyja\u015bnienie: Metoda includes sprawdza, czy tablica zawiera podan\u0105 warto\u015b\u0107 (2). Zwraca true, je\u015bli warto\u015b\u0107 istnieje, w przeciwnym razie false.<\/p>\nZadanie 7. Odwracanie kolejno\u015bci element\u00f3w w tablicy
\nconst tab = [1, 2, 3];<\/code>
\nconsole.log(tab.reverse()); \/\/ Wynik: [3, 2, 1]<\/code>
\nWyja\u015bnienie: Metoda reverse odwraca kolejno\u015b\u0107 element\u00f3w w tablicy, zmieniaj\u0105c oryginaln\u0105 tablic\u0119 na [3, 2, 1].<\/p>\nZadanie 8. Sortowanie element\u00f3w w tablicy rosn\u0105co
\nconst tab = [3, 1, 4, 2];<\/code>
\nconsole.log(tab.sort((a, b) => a - b)); \/\/ Wynik: [1, 2, 3, 4]<\/code>
\nWyja\u015bnienie: Metoda sort sortuje tablic\u0119 liczbow\u0105 od najmniejszej do najwi\u0119kszej. Funkcja a – b okre\u015bla porz\u0105dek rosn\u0105cy.<\/p>\nZadanie 9. Tworzenie nowej tablicy zawieraj\u0105cej kwadraty element\u00f3w
\nconst tab = [1, 2, 3];<\/code>
\nconst kwadraty = tab.map(x => x ** 2);<\/code>
\nconsole.log(kwadraty); \/\/ Wynik: [1, 4, 9]<\/code>
\nWyja\u015bnienie: Metoda map tworzy now\u0105 tablic\u0119, w kt\u00f3rej ka\u017cdy element jest wynikiem operacji x ** 2, czyli podniesieniem do kwadratu. Wynikiem jest tablica [1, 4, 9].<\/p>\nZadanie 10. Filtracja element\u00f3w wi\u0119kszych ni\u017c 2
\nconst tab = [1, 2, 3, 4];<\/code>
\nconst filtrowane = tab.filter(x => x > 2);<\/code>
\nconsole.log(filtrowane); \/\/ Wynik: [3, 4]<\/code>
\nWyja\u015bnienie: Metoda filter tworzy now\u0105 tablic\u0119, zawieraj\u0105c\u0105 tylko elementy wi\u0119ksze ni\u017c 2. Wynik to [3, 4].<\/p>\nPodsumowuj\u0105c, metody tablic w JavaScript oferuj\u0105 ogromn\u0105 elastyczno\u015b\u0107 i mo\u017cliwo\u015bci manipulacji danymi. Od prostych operacji jak dodawanie czy usuwanie element\u00f3w, po bardziej z\u0142o\u017cone operacje jak iteracje czy redukcje \u2013 opanowanie tych metod pozwala na efektywne zarz\u0105dzanie danymi w aplikacjach.<\/p>\n
Tablice to nieod\u0142\u0105czna cz\u0119\u015b\u0107 JavaScriptu, dlatego warto po\u015bwi\u0119ci\u0107 czas na nauk\u0119 tych metod. Praktyka z wykorzystaniem tych funkcji sprawi, \u017ce praca z kodem b\u0119dzie \u0142atwiejsza, szybsza i bardziej satysfakcjonuj\u0105ca. Spr\u00f3buj wykorzysta\u0107 ka\u017cd\u0105 z om\u00f3wionych metod w swoim projekcie, aby zrozumie\u0107, jak dzia\u0142aj\u0105 w praktyce!<\/p>\n","protected":false},"excerpt":{"rendered":"
W tym artykule przygl\u0105dniemy si\u0119 funkcjom i metodom, jakie stosuje si\u0119 w tablicach. Przede wszystkim – tablice to jedna z najcz\u0119\u015bciej u\u017cywanych struktur danych w JavaScript, pomagaj\u0105ca w przechowywaniu wielu warto\u015bci w jednym miejscu.<\/p>\n","protected":false},"author":1,"featured_media":260,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bez-kategorii"],"_links":{"self":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/1021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/comments?post=1021"}],"version-history":[{"count":4,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/1021\/revisions"}],"predecessor-version":[{"id":1220,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/1021\/revisions\/1220"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media\/260"}],"wp:attachment":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media?parent=1021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/categories?post=1021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/tags?post=1021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}