← Lekcje
JavaScript · lekcja 12

Tablice w JavaScript 2/3:
dopisujemy i zamieniamy elementy

Plan tematu (3 godziny):

  1. Godzina 1: czym jest tablica, tworzenie, odczyt elementu, .length
  2. Godzina 2 (dziś): dopisywanie i zamiana elementów, klucz tekstowy
  3. Godzina 3: pętla po wszystkich elementach tablicy
  4. Ćwiczenie: tablica owoców z split(), dopisanie elementu, klucz tekstowy
Rozgrzewka · 3 minuty

Rozgrzewka: tablice z poprzedniej lekcji

  1. Macie tablicę const colors = ["czerwony","zielony","niebieski"]; Pod jakim indeksem znajduje się "zielony"?
  2. Jak odczytacie liczbę elementów tablicy, bez liczenia ręcznie?
  3. Literał [...] to jeden poprawny sposób stworzenia tablicy. Jaki jest drugi poprawny sposób?
Część 1 · Dopisywanie i usuwanie na końcu

Koniec tablicy: push() dodaje, pop() zabiera

0Manchester 1Liverpool 2Cardiff push("Cardiff") pop() usuwa i zwraca "Cardiff" 
const cities = ["Manchester", "Liverpool"];
cities.push("Cardiff");
console.log(cities);  // [ 'Manchester', 'Liverpool', 'Cardiff' ]
cities.pop();
console.log(cities);  // [ 'Manchester', 'Liverpool' ]

Ten sam efekt co push() daje zapis array[array.length] = value - nowy indeks to zawsze aktualna długość tablicy, bo ostatni wolny numer szuflady to length.

MDN: Learn_web_development/Core/Scripting/Arrays (sekcje „Adding items”: „To add one or more items to the end of an array we can use push()”; „Removing items”: „To remove the last item from the array, use pop()”)
Część 2 · Dopisywanie i usuwanie na początku

Początek tablicy: unshift() i shift()

przed 0Manchester 1Liverpool po unshift("Edinburgh") 0Edinburgh 1Manchester 2Liverpool indeksy Manchester i Liverpool przesunęły się o jeden 
const cities = ["Manchester", "Liverpool"];
cities.unshift("Edinburgh");
console.log(cities);  // [ 'Edinburgh', 'Manchester', 'Liverpool' ]
cities.shift();
console.log(cities);  // [ 'Manchester', 'Liverpool' ] - wraca do stanu początkowego
MDN: Learn_web_development/Core/Scripting/Arrays (sekcje „Adding items”: „To add an item to the start of the array, use unshift()”; „Removing items”: „To remove the first item from an array, use shift()”)
Część 3 · Szukanie i zamiana elementu

indexOf() szuka, zamiana po indeksie zmienia

0Manchester 1Liverpool 2Edinburgh 3Carlisle indexOf("Liverpool") → 1 1Bristol cities[1] = "Bristol" - ten sam indeks, nowa wartość 
const cities = ["Manchester", "Liverpool", "Edinburgh", "Carlisle"];
const index = cities.indexOf("Liverpool");  // 1
cities[index] = "Bristol";
console.log(cities);  // [ 'Manchester', 'Bristol', 'Edinburgh', 'Carlisle' ]
MDN: Learn_web_development/Core/Scripting/Arrays (sekcja „Finding the index of items in an array”: „The indexOf() method takes an item as an argument and will either return the item's index or -1 if the item is not in the array”; sekcja „Accessing and modifying array items”: „You can also modify an item in an array by giving a single array item a new value”)
Część 4 · Napis na tablicę

split(): tnie napis na kawałki

"jablko,gruszka,banan" ✂ ✂ 0jablko 1gruszka 2banan separator „,” znika,
zostają tylko kawałki 
const data = "jablko,gruszka,banan";
const fruits = data.split(",");
console.log(fruits);  // [ 'jablko', 'gruszka', 'banan' ]

Ciekawostka z MDN: split() jest tak naprawdę metodą tekstu, nie tablicy - wywołujecie go na napisie (data.split(...)), nie na tablicy. Wynikiem i tak jest tablica, dlatego MDN opisuje go razem z metodami tablic, chociaż formalnie nim nie jest.

MDN: Learn_web_development/Core/Scripting/Arrays (sekcja „Converting between strings and arrays”: „we can use the split() method. In its simplest form, this takes a single parameter, the character you want to separate the string at, and returns the substrings between the separator as items in an array”)
Część 5 · Klucz tekstowy zamiast numerka

Tablica z kluczem tekstowym zamiast numerka

W kursie PHP, na lekcji 02, tablica asocjacyjna z kluczem tekstowym to zwykła, pełnoprawna tablica. W JavaScript da się dopisać do tablicy element z kluczem tekstowym zamiast numerka - ale to wyjątek, nie osobny typ tablicy: klucz tekstowy nie liczy się do .length.

0"Ala" 125 2true "technik""informatyk" student.length = 3 - tyle, ile numerowanych szuflad "technik" nie liczy się do length 
let student = ["Ala", 25, true];
student["technik"] = "informatyk";
console.log(student);         // [ 'Ala', 25, true, technik: 'informatyk' ]
console.log(student.length);  // 3 - klucz tekstowy się nie liczy
MDN: Learn_web_development/Core/Scripting/Arrays
Egzamin EE.09 / E.14

Tak pytają na egzaminie

1. W języku JavaScript, aby zamienić specjalnie przygotowany napis w tablicę, można zastosować metodę

  1. trim()
  2. split()
  3. slice()
  4. replace()

2. Instrukcja przypisania elementu do tablicy w języku JavaScript:

items['technik'] = 'informatyk';

dotyczy tablicy

  1. statycznej.
  2. asocjacyjnej.
  3. numerycznej.
  4. wielowymiarowej.
CKE, EE.09, czerwiec 2026, zadanie 8 · CKE, E.14, styczeń 2018, zadanie 33
Ćwiczenie przy komputerze · 20 minut

Ćwiczenie: dopisywanie elementów

  1. Otwórz script.js z poprzednich lekcji (w folderze swojego projektu).
  2. Utwórz tablicę z ciętego napisu: let fruits = "jablko,gruszka,banan".split(",");
  3. Wypisz wynik: console.log(fruits);
  4. Dopisz nowy element na końcu: fruits[fruits.length] = "kiwi";
  5. Wypisz tablicę znowu: console.log(fruits);
  6. Utwórz let student = ["Ala", 25, true]; i dopisz klucz tekstowy: student["technik"] = "informatyk";
  7. Wypisz console.log(student); i console.log(student.length); - sprawdźcie, że length nadal pokazuje 3.
  8. Dla chętnych w domu: usuń ostatni element przez fruits.pop(); i sprawdź, co wypisze konsola.
Na koniec

Sprawdź się

  1. Jak dopiszecie nowy element na końcu tablicy - dwoma sposobami?
  2. Co się dzieje z numerami (indeksami) pozostałych elementów, gdy dodacie element metodą unshift()?
  3. Jak sprawdzicie, pod jakim indeksem znajduje się dany element, żeby móc go potem zamienić?

Na następnej lekcji: pętla przechodząca przez wszystkie elementy tablicy.

Poza szkołą

A jak to wygląda w produkcji?

Na lekcjiW produkcjiStatus
array[array.length] = valuepush(value) - ten sam efekt, krócej; tak radzi MDN.zastępowane
unshift()/shift() na początkuUżywane rzadziej niż push()/pop() - dodanie elementu na początku przenumerowuje wszystkie pozostałe.tak robię w projektach
array.indexOf(x) !== -1array.includes(x) - krótszy zapis, gdy potrzeba tylko odpowiedzi tak/nie, bez numeru indeksu.zastępowane
Tablica z kluczem tekstowymZwykły obiekt {klucz: wartość} - w tablicy klucz tekstowy to wyjątek, nie reguła.tak robię w projektach
MDN: Web/JavaScript/Reference/Global_Objects/Array/push („we can use push()”); Web/JavaScript/Reference/Global_Objects/Array/includes („determines whether an array includes a certain value”)