JavaScript Multidimensional Array (Polski)

Podsumowanie: w tym samouczku, nauczysz się jak pracować z JavaScript multidimensional array.

Wprowadzenie do JavaScript multidimensional array

JavaScript nie dostarcza natywnie tablicy wielowymiarowej. Można jednak utworzyć tablicę wielowymiarową definiując tablicę elementów, gdzie każdy element jest również inną tablicą.

Z tego powodu możemy powiedzieć, że wielowymiarowa tablica JavaScript jest tablicą tablic. Najprostszym sposobem na zdefiniowanie wielowymiarowej tablicy jest użycie dosłownej notacji tablicowej.

Aby zadeklarować pustą tablicę wielowymiarową, używamy takiej samej składni jak przy deklarowaniu tablicy jednowymiarowej:

let activities = ;
Code language: JavaScript (javascript)

Poniższy przykład definiuje tablicę dwuwymiarową o nazwie activities:

let activities = , , , , ];
Code language: JavaScript (javascript)

W tablicy activities pierwszy wymiar reprezentuje czynności, a drugi pokazuje liczbę godzin spędzonych dziennie dla każdej z nich.

Aby wyświetlić tablicę activities w konsoli, należy użyć metody console.table() w następujący sposób:

console.table(activities);
Code language: JavaScript (javascript)

Następujące elementy ilustrują dane wyjściowe:

┌─────────┬─────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼─────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Eat' │ 1 ││ 2 │ 'Commute' │ 2 ││ 3 │ 'Play Game' │ 1 ││ 4 │ 'Sleep' │ 7 │└─────────┴─────────────┴───┘
Code language: JavaScript (javascript)

Zauważ, że kolumna (index) służy do ilustracji, która wskazuje indeksy wewnętrznej tablicy.

Aby uzyskać dostęp do elementu tablicy wielowymiarowej, najpierw używasz nawiasów kwadratowych, aby uzyskać dostęp do elementu tablicy zewnętrznej, która zwraca tablicę wewnętrzną, a następnie używasz innego nawiasu kwadratowego, aby uzyskać dostęp do elementu tablicy wewnętrznej.

Poniższy przykład zwraca drugi element pierwszej tablicy wewnętrznej w tablicy activities powyżej:

console.log(activities); // 9
Code language: JavaScript (javascript)

Dodawanie elementów do tablicy wielowymiarowej JavaScript

Możesz użyć metod Array, takich jak push() i splice(), aby manipulować elementami tablicy wielowymiarowej.

Na przykład, aby dodać nowy element na końcu tablicy wielowymiarowej, używamy metody push() w następujący sposób:

activities.push();console.table(activities);
Code language: CSS (css)

┌─────────┬─────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼─────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Eat' │ 1 ││ 2 │ 'Commute' │ 2 ││ 3 │ 'Play Game' │ 1 ││ 4 │ 'Sleep' │ 7 ││ 5 │ 'Study' │ 2 │└─────────┴─────────────┴───┘
Code language: JavaScript (javascript)

Aby wstawić element w środku tablicy, używamy metody splice(). Poniższy przykład wstawia element na drugiej pozycji tablicy czynności:

activities.splice(1, 0, );console.table(activities);
Code language: CSS (css)

Oto dane wyjściowe:

┌─────────┬───────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼───────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Programming' │ 2 ││ 2 │ 'Eat' │ 1 ││ 3 │ 'Commute' │ 2 ││ 4 │ 'Play Game' │ 1 ││ 5 │ 'Sleep' │ 7 ││ 6 │ 'Study' │ 2 │└─────────┴───────────────┴───┘
Code language: JavaScript (javascript)

Ten przykład oblicza procent godzin spędzonych na każdej czynności i dodaje ten procent do wewnętrznej tablicy.

activities.forEach(activity => { let percentage = ((activity / 24) * 100).toFixed(); activity = percentage + '%';});console.table(activities);
Code language: JavaScript (javascript)

Poniżej pokazane są dane wyjściowe w konsoli:

┌─────────┬───────────────┬───┬───────┐│ (index) │ 0 │ 1 │ 2 │├─────────┼───────────────┼───┼───────┤│ 0 │ 'Work' │ 9 │ '38%' ││ 1 │ 'Programming' │ 2 │ '8%' ││ 2 │ 'Eat' │ 1 │ '4%' ││ 3 │ 'Commute' │ 2 │ '8%' ││ 4 │ 'Play Game' │ 1 │ '4%' ││ 5 │ 'Sleep' │ 7 │ '29%' ││ 6 │ 'Study' │ 2 │ '8%' │└─────────┴───────────────┴───┴───────┘
Code language: JavaScript (javascript)

Usuwanie elementów z tablicy wielowymiarowej JavaScript

Aby usunąć element z tablicy, używamy metody pop() lub splice().

Na przykład, poniższa instrukcja usuwa ostatni element tablicy activities.

activities.pop();console.table(activities);
Code language: CSS (css)

Wyjście:

┌─────────┬───────────────┬───┬───────┐│ (index) │ 0 │ 1 │ 2 │├─────────┼───────────────┼───┼───────┤│ 0 │ 'Work' │ 9 │ '38%' ││ 1 │ 'Programming' │ 2 │ '8%' ││ 2 │ 'Eat' │ 1 │ '4%' ││ 3 │ 'Commute' │ 2 │ '8%' ││ 4 │ 'Play Game' │ 1 │ '4%' ││ 5 │ 'Sleep' │ 7 │ '29%' │└─────────┴───────────────┴───┴───────┘
Code language: JavaScript (javascript)

Podobnie, można usunąć elementy z wewnętrznej tablicy tablicy wielowymiarowej za pomocą metody pop(). Poniższy przykład usuwa element procentowy z tablic wewnętrznych tablicy activities.

activities.forEach((activity) => { activity.pop(2);});console.table(activities);
Code language: JavaScript (javascript)

Output:

┌─────────┬───────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼───────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Programming' │ 2 ││ 2 │ 'Eat' │ 1 ││ 3 │ 'Commute' │ 2 ││ 4 │ 'Play Game' │ 1 ││ 5 │ 'Sleep' │ 7 │└─────────┴───────────────┴───┘
Code language: JavaScript (javascript)

Iterowanie po elementach tablicy wielowymiarowej JavaScript

Aby iterować po tablicy wielowymiarowej, używamy zagnieżdżonej pętli for, jak w poniższym przykładzie.

// loop the outer arrayfor (let i = 0; i < activities.length; i++) { // get the size of the inner array var innerArrayLength = activities.length; // loop the inner array for (let j = 0; j < innerArrayLength; j++) { console.log(' = ' + activities); }}
Code language: JavaScript (javascript)

Pierwsza pętla iteruje po elementach tablicy zewnętrznej, a pętla zagnieżdżona iteruje po elementach tablicy wewnętrznej.

Poniżej pokazujemy wynik działania skryptu w konsoli:

 = Work = 9 = Eat = 1 = Commute = 2 = Play Game = 1 = Sleep = 7 = Study = 2

Można też użyć metody forEach() dwa razy:

activities.forEach((activity) => { activity.forEach((data) => { console.log(data); });});
Code language: JavaScript (javascript)

Wyjście:

Work9Eat1Commute2Play Game1Sleep7Study2

W tym samouczku nauczyłeś się, jak używać tablicy tablic do tworzenia wielowymiarowej tablicy w JavaScript.