Javascript 2D Array – jak zrozumieć i efektywnie używać tablic dwuwymiarowych?

Programowanie w JavaScript może być prawdziwą przyjemnością, a jednym z bardziej interesujących aspektów jest praca z tablicami. Tablice w JavaScript to struktury danych, które pozwalają przechowywać różne elementy w jednym obiekcie. Jednym z ciekawszych rodzajów tablic są tablice dwuwymiarowe, czyli tzw. "2D arrays". W tym artykule przyjrzymy się bliżej, czym są tablice dwuwymiarowe w JavaScript, jak je tworzyć i jakie operacje na nich przeprowadzać. Jeśli chcesz poznać możliwości, jakie oferują tablice 2D, to jesteś we właściwym miejscu!

Czym jest 2D Array w JavaScript?

W języku JavaScript tablica dwuwymiarowa to tablica, której elementami są inne tablice. Takie struktury danych pozwalają przechowywać wartości w formie wierszy i kolumn – stąd ich dwuwymiarowy charakter. Tablice 2D są przydatne, gdy chcemy reprezentować dane w formie tabel, macierzy, plansz gier itp.

W przeciwieństwie do jednowymiarowych tablic, które są w zasadzie prostymi listami, tablice dwuwymiarowe pozwalają na bardziej złożoną organizację danych. Można je porównać do arkuszy kalkulacyjnych, gdzie mamy komórki zorganizowane w wiersze i kolumny.

Tworzenie tablicy 2D w JavaScript

Tworzenie tablicy dwuwymiarowej w JavaScript jest proste. Wystarczy, że stworzymy tablicę, w której poszczególne elementy będą kolejnymi tablicami. Oto przykłady:

let tablica2d = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

W tym przypadku mamy tablicę o trzech wierszach i trzech kolumnach. Każdy wiersz jest reprezentowany jako tablica, a całość to tablica zawierająca te wiersze.

Indeksowanie tablic 2D w JavaScript

Podobnie jak w przypadku zwykłych tablic, elementy tablicy dwuwymiarowej są indeksowane. Indeksowanie zaczyna się od zera, co oznacza, że pierwszy wiersz ma indeks 0, drugi wiersz ma indeks 1 itd. Każdy wiersz tablicy jest również tablicą, co oznacza, że wewnętrzne elementy mają swoje własne indeksy.

Oto jak odwołać się do poszczególnych elementów tablicy 2D:

let element = tablica2d[1][2]; // Odwołujemy się do elementu w drugim wierszu i trzeciej kolumnie (czyli liczba 6)
console.log(element); // Wydrukuje: 6

W tym przypadku element o indeksie [1][2] to liczba 6, ponieważ liczymy od zera.

Dodawanie i usuwanie elementów w tablicy 2D

Podobnie jak w przypadku tablic jednowymiarowych, tablice dwuwymiarowe w JavaScript pozwalają na dynamiczne dodawanie i usuwanie elementów. Możemy na przykład dodać nowy wiersz do naszej tablicy 2D lub dodać nowy element w istniejącym wierszu.

Dodanie nowego wiersza do tablicy 2D odbywa się za pomocą metody push():

tablica2d.push([10, 11, 12]); // Dodaje nowy wiersz do tablicy 2D
console.log(tablica2d);

Usuwanie ostatniego wiersza z tablicy 2D jest możliwe za pomocą metody pop():

tablica2d.pop(); // Usuwa ostatni wiersz
console.log(tablica2d);

Jeśli chcemy usunąć element z określonego miejsca w tablicy, możemy użyć metody splice(), która pozwala na usunięcie elementu w danym wierszu:

tablica2d[1].splice(1, 1); // Usuwa element o indeksie 1 w drugim wierszu
console.log(tablica2d);

Iteracja po tablicy 2D

Przy pracy z tablicami dwuwymiarowymi w JavaScript bardzo często będziemy musieli przejść przez wszystkie elementy. Możemy to zrobić na różne sposoby. Oto przykład użycia pętli for, aby przejść po wszystkich elementach tablicy 2D:

for (let i = 0; i < tablica2d.length; i++) {
  for (let j = 0; j < tablica2d[i].length; j++) {
    console.log(tablica2d[i][j]); // Wydrukuje każdy element w tablicy
  }
}

W powyższym przykładzie mamy dwie pętle – zewnętrzną, która przechodzi po wierszach, i wewnętrzną, która przechodzi po elementach w danym wierszu.

Przykłady zastosowania tablic 2D

Tablice dwuwymiarowe w JavaScript znajdują szerokie zastosowanie w wielu dziedzinach programowania. Oto kilka przykładów, w których mogą się przydać:

Przykład 1: Reprezentacja planszy gry

Jednym z klasycznych zastosowań tablic 2D jest reprezentacja planszy w grach. Możemy użyć tablicy 2D do reprezentacji planszy w grze, gdzie w każdym polu mamy jakąś wartość – na przykład "X" i "O" w grze w kółko-krzyżyk:

let plansza = [
  ['X', 'O', 'X'],
  ['O', 'X', 'O'],
  ['X', 'O', 'X']
];

Teraz możemy łatwo sprawdzić stan gry, odwołując się do poszczególnych komórek planszy.

Przykład 2: Przechowywanie danych tabelarycznych

Innym przykładem zastosowania tablic 2D jest przechowywanie danych w formie tabeli. Jeśli mamy dane w postaci wierszy i kolumn (np. dane z arkusza kalkulacyjnego), możemy je przechować w tablicy 2D:

let tabelaDanych = [
  ['Imię', 'Wiek', 'Miasto'],
  ['Jan', 25, 'Warszawa'],
  ['Anna', 30, 'Kraków'],
  ['Marek', 35, 'Gdańsk']
];

W ten sposób przechowujemy dane w formie tabeli, którą możemy łatwo przetwarzać i analizować.

Podsumowanie

Tablice dwuwymiarowe w JavaScript to potężne narzędzie, które pozwala na przechowywanie danych w formie wierszy i kolumn. Umożliwiają one tworzenie bardziej złożonych struktur danych i znajdą zastosowanie w wielu różnych dziedzinach, od gier po analizy danych. W tym artykule przedstawiliśmy podstawy pracy z tablicami 2D w JavaScript, pokazując, jak je tworzyć, manipulować nimi oraz jak przeprowadzać operacje na ich elementach. Teraz masz solidną podstawę, by zacząć pracować z tablicami 2D w swoich projektach. Powodzenia!