[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>
![[JS] Średnia kolumn tablicy](https://rafalskowron.pl/wp-content/themes/Extra/images/post-format-thumb-text.svg)
![[JS]Malowanie Pokoju](https://i0.wp.com/rafalskowron.pl/wp-content/uploads/2018/02/malowanie1.jpg?resize=440%2C253&ssl=1)
![[JS] Średnia kolumn tablicy](https://secure.gravatar.com/avatar/cfe2fd897b82be50743fccd201b74274?s=40&d=mm&r=g){kind=small}
Trackbacki/Pingbacki