Wybierz stronę

[JS] Jak stworzyć tablicę dwuwymiarową w JavaScript?

Tablice w JavaScript

Przypomnijmy sobie kilka podstawowych rzeczy o tablicach:

  • w tablicy można przechowywać wiele wartości(w odróżnieniu od zwykłej zmiennej, która przechowuje jedną wartość)
  • w tablicy JavaScript można przechowywać liczby, tekst, tablice i obiekty
  • tablice w JavaScript są obiektami
  • tablicę deklarujemy korzystając z nawiasów kwadratowych

Przykład tworzenia tablicy przechowującej kilka wartości.

var tablica = [ 5, 10, "ogórek", "samochód", true];
  • długość tablicy(czyli ilość jej elementów) otrzymujemy poprzez jej właściwość length
var dlugoscTablicy=tablica.length;

Po więcej informacji, metod, właściwości tablic i przykładów na ich wykorzystanie odsyłam na w3schools. Znajduje się tam  fragment o tym, że w tablicach możemy przechowywać także inne  tablice. Taka tablica, która w każdej swojej komórce przechowuje tablicę nazywamy tablicą dwuwymiarową.

Brzmi poważnie?

Wyobraź sobie planszę do gry w statki, to jest właśnie tablica dwuwymiarowa.

Jak stworzyć tablicę dwuwymiarową?

Przedstawię jedną z metod tworzenia tablicy dwuwymiarowej. Na początku zadeklarujemy pustą tablicę o nazwie tablica

var tablica = [];

Drugim krokiem będzie zadeklarowanie w każdym elemencie tablicy kolejnej tablicy. W tym miejscu powinniśmy wiedzieć ile wierszy będzie miała nasza tablica.

 for (var i = 0; i < iloscWierszy; i++) {
            tablica[i] = [];
        }

Tablica dwuwymiarowa w działaniu

Powyższy kod wystarczy do zadeklarowania tablicy. Poniżej znajduje się gotowy przykład, który wypełnia tablicę wartościami z numerami wiersza i kolumny.

        for (var i = 0; i < iloscWierszy; i++) {
            for (var j = 0; j < iloscKolumn; j++) {
                tablica[i][j] = i + ', ' + j;
            }
        }

Jak wyświetlić tablicę dwuwymiarową?

Wykorzystaj do tego pętlę, taką jak przy wypełnianiu danymi, tylko tym razem odczytaj z niej wartości. Warto sformatować tekst, który generujemy i przedstawić go tak, aby po każdym wierszu(po każdej iteracji po i) przechodzić do nowej linjki.

        for (var i = 0; i < iloscWierszy; i++) {
            for (var j = 0; j < iloscKolumn; j++) {
                napis += tablica[i][j] + " || ";
            }
            napis += '<br>';
        }
        document.getElementById("ekranik").innerHTML = napis;

Przykład

Poniżej zamieszczam cały listing strony, która prezentuje omawiany problem.

<!DOCTYPE html>
<html>

<head>
    <title>Tablica dwuwymiarowa</title>
    <meta charset="UTF-8"> </head>

<body>
    <p id="ekranik"></p>
    <script>
        //deklaracja zmiennych
        var iloscKolumn = 10;
        var iloscWierszy = 10;
        var napis = '';
        var tablica = [];
        //deklaracja drugiego wymiaru tablicy
        for (var i = 0; i < iloscWierszy; i++) {
            tablica[i] = [];
        }
        //wypełnianie tablicy wartościami
        for (var i = 0; i < iloscWierszy; i++) {
            for (var j = 0; j < iloscKolumn; j++) {
                tablica[i][j] = i + ', ' + j;
            }
        }
        //odczytywanie tablicy i generowanie napisu  
        for (var i = 0; i < iloscWierszy; i++) {
            for (var j = 0; j < iloscKolumn; j++) {
                napis += tablica[i][j] + " || ";
            }
            napis += '<br>';
        }
        //wyświetlenie napisu na stronie
        document.getElementById("ekranik").innerHTML = napis;
    </script>
</body>

</html>

Efekt działania

O autorze

RafS

Moje główne zainteresowania to FIT: Fotografia Informatyka Technika

Trackbacki/Pingbacki

  1. [JS] Średnia kolumn tablicy - RafałSkowron.pl - […] […]

Zostaw odpowiedź

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Pin It on Pinterest